diff --git a/New_APIs/README.md b/New_APIs/README.md index 6fa3ad6..16362ad 100644 --- a/New_APIs/README.md +++ b/New_APIs/README.md @@ -20,4 +20,7 @@ |[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| +|[Weather_Forecast_API](./Weather_Forecast_API/)|This demonstrates we can know weather report via api and spefic locactions only| + + diff --git a/New_APIs/Weather_Forecast_API/README.md b/New_APIs/Weather_Forecast_API/README.md new file mode 100644 index 0000000..87657b7 --- /dev/null +++ b/New_APIs/Weather_Forecast_API/README.md @@ -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. diff --git a/New_APIs/Weather_Forecast_API/index.html b/New_APIs/Weather_Forecast_API/index.html new file mode 100644 index 0000000..43b90a2 --- /dev/null +++ b/New_APIs/Weather_Forecast_API/index.html @@ -0,0 +1,18 @@ + + + + + + Weather Forecast API + + + +
+

Weather Forecast API

+ + +
+
+ + + diff --git a/New_APIs/Weather_Forecast_API/script.js b/New_APIs/Weather_Forecast_API/script.js new file mode 100644 index 0000000..53cde6f --- /dev/null +++ b/New_APIs/Weather_Forecast_API/script.js @@ -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 = ` +

City: ${data.name}

+

Temperature: ${data.main.temp} °C

+

Weather: ${data.weather[0].description}

+ `; + } else { + document.getElementById('weatherData').innerHTML = `

City not found. Please try again.

`; + } + }) + .catch(error => { + document.getElementById('weatherData').innerHTML = `

There was an error fetching the data.

`; + console.error('Error fetching the weather data:', error); + }); +} diff --git a/New_APIs/Weather_Forecast_API/styles.css b/New_APIs/Weather_Forecast_API/styles.css new file mode 100644 index 0000000..82ca962 --- /dev/null +++ b/New_APIs/Weather_Forecast_API/styles.css @@ -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; +}