dishamodi0910 · anusha7530 · Jun 3, 2024
diff --git a/Existing_API_Collection/OpenWeatherMap_API/README.md b/Existing_API_Collection/OpenWeatherMap_API/README.md
@@ -0,0 +1,42 @@
+# OpenWeatherMap API
+
+The OpenWeatherMap API provides weather data for various locations. The API allows you to fetch current weather data, forecasts, and historical data, making it a comprehensive solution for weather-related applications.
+
+## Table of Contents
+
+- [Features](#features)
+- [Getting Started](#getting-started)
+- [Technologies Used](#technologies-used)
+- [Demo](#screenshot)
+- [Reference](#reference)
+
+## Features
+
+The OpenWeatherMap API provides a range of weather data, including but not limited to:
+
+- **Temperature**: Current temperature of the entered location.
+- **Wind Speed**: Current wind speed and direction.
+- **Humidity**: Current humidity levels.
+
+## Getting Started
+
+- Before you begin, ensure you have a free or paid OpenWeatherMap API key. You can get it by signing up at [OpenWeatherMap](https://openweathermap.org/api)
+- Clone the repository to your local machine.
+
+   ```sh
+   git clone https://github.com/username/repo_name.git
+   ```
+- Add your OpenWeatherMap API key to the script.js file.
+- Open the index.html file in your web browser.
+
+## Technologies Used
+
+- **HTML** : For providing the structure
+- **CSS**: For styling the web page
+- **JavaScript**: For API fetching and display
+
+## Screenshot
+![](./images/demo.png)
+
+## Reference
+For more detailed information, refer to the official [OpenWeatherMap API Documentation](https://openweathermap.org/guide).
diff --git a/Existing_API_Collection/OpenWeatherMap_API/images/clear.png b/Existing_API_Collection/OpenWeatherMap_API/images/clear.png
diff --git a/Existing_API_Collection/OpenWeatherMap_API/images/clouds.png b/Existing_API_Collection/OpenWeatherMap_API/images/clouds.png
diff --git a/Existing_API_Collection/OpenWeatherMap_API/images/demo.png b/Existing_API_Collection/OpenWeatherMap_API/images/demo.png
diff --git a/Existing_API_Collection/OpenWeatherMap_API/images/drizzle.png b/Existing_API_Collection/OpenWeatherMap_API/images/drizzle.png
diff --git a/Existing_API_Collection/OpenWeatherMap_API/images/humidity.png b/Existing_API_Collection/OpenWeatherMap_API/images/humidity.png
diff --git a/Existing_API_Collection/OpenWeatherMap_API/images/mist.png b/Existing_API_Collection/OpenWeatherMap_API/images/mist.png
diff --git a/Existing_API_Collection/OpenWeatherMap_API/images/rain.png b/Existing_API_Collection/OpenWeatherMap_API/images/rain.png
diff --git a/Existing_API_Collection/OpenWeatherMap_API/images/search.png b/Existing_API_Collection/OpenWeatherMap_API/images/search.png
diff --git a/Existing_API_Collection/OpenWeatherMap_API/images/sky.jpeg b/Existing_API_Collection/OpenWeatherMap_API/images/sky.jpeg
diff --git a/Existing_API_Collection/OpenWeatherMap_API/images/snow.png b/Existing_API_Collection/OpenWeatherMap_API/images/snow.png
diff --git a/Existing_API_Collection/OpenWeatherMap_API/images/wind.png b/Existing_API_Collection/OpenWeatherMap_API/images/wind.png
diff --git a/Existing_API_Collection/OpenWeatherMap_API/index.html b/Existing_API_Collection/OpenWeatherMap_API/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Weather App</title>
+  <!-- CSS -->
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+
+  <div class="card">
+    <div class="search">
+      <input type="text" placeholder="Enter City Name" spellcheck="false">
+      <button><img src="images/search.png" alt=""></button>
+    </div>
+    <div class="error">
+      <p>Invalid City Name</p>
+    </div>
+    <div class="weather">
+      <img src="images/rain.png" alt="" class="weather-icon">
+      <h1 class="temp">22°c</h1>
+      <h2 class="city">New York</h2>
+      <div class="details">
+        <div class="col">
+          <img src="images/humidity.png" alt="">
+          <div>
+            <p class="humidity">50%</p>
+            <p>Humidity</p>
+          </div>
+        </div>
+        <div class="col">
+          <img src="images/wind.png" alt="">
+          <div>
+            <p class="wind">15 km/h</p>
+            <p>Wind Speed</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <!--JS-->
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/OpenWeatherMap_API/script.js b/Existing_API_Collection/OpenWeatherMap_API/script.js
@@ -0,0 +1,53 @@
+const apiKey = API_KEY
+const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
+
+const searchBox = document.querySelector(".search input");
+const searchBtn = document.querySelector(".search button");
+const weatherIcon = document.querySelector(".weather-icon");
+
+async function checkWeather(city){
+    const response = await fetch(apiUrl +city + `&appid=${apiKey}`);
+
+    if(response.status == 404){
+        document.querySelector(".error").style.display = "block";
+        document.querySelector(".weather").style.display = "none";
+    } else if(response.status==400){
+      alert("Please Enter a City Name");
+    } else{
+
+      var data = await response.json();
+
+    document.querySelector(".city").innerHTML = data.name;
+    document.querySelector(".temp").innerHTML = Math.round(data.main.temp)+ "°c"; 
+    document.querySelector(".humidity").innerHTML = data.main.humidity+"%";
+    document.querySelector(".wind").innerHTML = data.wind.speed+" km/h";
+
+    if(data.weather[0].main =="Clouds"){
+        weatherIcon.src = "images/clouds.png";
+    }else if(data.weather[0].main =="Clear"){
+        weatherIcon.src = "images/clear.png";
+      }
+      else if(data.weather[0].main =="Rain"){
+        weatherIcon.src = "images/rain.png";
+      }
+      else if(data.weather[0].main =="Drizzle"){
+        weatherIcon.src = "images/drizzle.png";
+      }
+      else if(data.weather[0].main =="Mist"){
+        weatherIcon.src = "images/mist.png";
+      }
+
+      document.querySelector(".weather").style.display = "block";
+      document.querySelector(".error").style.display = "none";
+    }
+}
+
+searchBtn.addEventListener("click", ()=>{
+    checkWeather(searchBox.value);
+})
+
+searchBox.addEventListener("keyup", (event)=>{
+    if(event.key == "Enter"){
+        checkWeather(searchBox.value);
+    }
+});