Skip to content

Commit

Permalink
Weather_Forecast_API is added
Browse files Browse the repository at this point in the history
  • Loading branch information
pallasivasai committed Aug 8, 2024
1 parent 839aa6a commit d8f8474
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 1 deletion.
3 changes: 2 additions & 1 deletion New_APIs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,5 @@
|[Payment API](./Payment_API/)|This demonstrates how to integrate PayPal API for online payments. It handles payment success and cancellation scenarios.|
|[Social Media Analytics API](./Social_Media_Analytics_AP/)|This demonstrates how to create a Social Media Analytics API to retrieve user engagement data like posts, likes, comments, and shares.|
|[Voice_Recognition_API](./Voice_Recognition_API/)|This demonstrates how a meachine retrieve user engagement only Voice|
|[Cryptocurrency_API](./Cryptocurrency_API/)|This demonstrates how a convert Cryptocurrency and spefic currency to dollars only|
|[Cryptocurrency_API](./Cryptocurrency_API/)|This demonstrates how a convert Cryptocurrency and spefic currency to dollars only|
|[Weather_Forecast_API](./Weather_Forecast_API/)|This demonstrates we can know weather report via api and spefic locactions only|
34 changes: 34 additions & 0 deletions New_APIs/Weather_Forecast_API/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# Weather Forecast API

This project is a simple web application that fetches and displays the current weather information for a specified city using the OpenWeatherMap API.

## Features

- Input a city name to fetch its current weather, including temperature and description.
- Display the fetched data on the web page.

## Technologies Used

- HTML
- CSS
- JavaScript
- [OpenWeatherMap API](https://openweathermap.org/api)

## How to Run

1. Clone the repository or download the files.
2. Replace `YOUR_API_KEY` in `script.js` with your OpenWeatherMap API key.
3. Open the `index.html` file in your web browser.
4. Enter a city name (e.g., `New York`, `London`) in the input box and click the "Get Weather" button to see the current weather.

## Example Usage

- Input: `London`
- Output:
- City: London
- Temperature: 15°C
- Weather: clear sky

## License

This project is open-source and available under the MIT License.
18 changes: 18 additions & 0 deletions New_APIs/Weather_Forecast_API/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Forecast API</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Weather Forecast API</h1>
<input type="text" id="cityInput" placeholder="Enter City Name">
<button onclick="fetchWeatherData()">Get Weather</button>
<div id="weatherData"></div>
</div>
<script src="script.js"></script>
</body>
</html>
23 changes: 23 additions & 0 deletions New_APIs/Weather_Forecast_API/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
function fetchWeatherData() {
const city = document.getElementById('cityInput').value;
const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

fetch(url)
.then(response => response.json())
.then(data => {
if (data.cod === 200) {
document.getElementById('weatherData').innerHTML = `
<p><strong>City:</strong> ${data.name}</p>
<p><strong>Temperature:</strong> ${data.main.temp} °C</p>
<p><strong>Weather:</strong> ${data.weather[0].description}</p>
`;
} else {
document.getElementById('weatherData').innerHTML = `<p>City not found. Please try again.</p>`;
}
})
.catch(error => {
document.getElementById('weatherData').innerHTML = `<p>There was an error fetching the data.</p>`;
console.error('Error fetching the weather data:', error);
});
}
51 changes: 51 additions & 0 deletions New_APIs/Weather_Forecast_API/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
text-align: center;
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
margin-bottom: 20px;
color: #333;
}

input[type="text"] {
padding: 10px;
font-size: 16px;
width: 250px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#weatherData {
margin-top: 20px;
font-size: 18px;
color: #555;
}

0 comments on commit d8f8474

Please sign in to comment.