Merge pull request #388 from pallasivasai/weather8384

Weather_Forecast_API
dishamodi0910 · Aug 9, 2024 · 8c2d1d7 · 8c2d1d7
2 parents 1715de4 + faeac3c
commit 8c2d1d7
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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>
diff --git a/New_APIs/Weather_Forecast_API/script.js 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 = `
+                    <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);
+        });
+}
diff --git a/New_APIs/Weather_Forecast_API/styles.css 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;
+}