├── images ├── mist.png ├── rain.png ├── snow.png ├── wind.png ├── clear.png ├── cloudy.png ├── drizzle.png └── humidity.png ├── index.html ├── script.js ├── README.md └── style.css /images/mist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Weather/HEAD/images/mist.png -------------------------------------------------------------------------------- /images/rain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Weather/HEAD/images/rain.png -------------------------------------------------------------------------------- /images/snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Weather/HEAD/images/snow.png -------------------------------------------------------------------------------- /images/wind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Weather/HEAD/images/wind.png -------------------------------------------------------------------------------- /images/clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Weather/HEAD/images/clear.png -------------------------------------------------------------------------------- /images/cloudy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Weather/HEAD/images/cloudy.png -------------------------------------------------------------------------------- /images/drizzle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Weather/HEAD/images/drizzle.png -------------------------------------------------------------------------------- /images/humidity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Weather/HEAD/images/humidity.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Weather 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 17 |
18 |
19 |

Invalid City Name

20 |
21 |
22 | 23 |

22°C

24 |

New York

25 | 26 |
27 |
28 | 29 |
30 |

50%

31 |

Humidity

32 | 33 |
34 | 35 |
36 |
37 | 38 |
39 |

15 km/hr

40 |

Wind Speed

41 |
42 |
43 |
44 |
45 |
46 | 47 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const apiKey = "c59a08bd29bc39c640f9a7ac52b36d65" 2 | const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=" 3 | 4 | const searchCity = document.querySelector(".inputBox") 5 | const searchBtn = document.querySelector(".search button") 6 | let weatherIcon = document.querySelector(".weather-icon") 7 | 8 | 9 | 10 | 11 | async function checkWeather(city){ 12 | const response = await fetch(apiUrl + city + `&appid=${apiKey}`) 13 | 14 | if(response.status == 404) 15 | { 16 | document.querySelector(".error").style.display = "block" 17 | document.querySelector(".weather").style.display = "none" 18 | } 19 | else 20 | { 21 | 22 | 23 | let data = await response.json() 24 | 25 | 26 | document.querySelector(".city").innerHTML = data.name 27 | document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°C" 28 | document.querySelector(".humidity").innerHTML = data.main.humidity + "%" 29 | document.querySelector(".wind").innerHTML = data.wind.speed + " km/hr" 30 | 31 | 32 | if(data.weather[0].main == "Clouds"){ 33 | weatherIcon.src = "images/cloudy.png" 34 | } 35 | else if(data.weather[0].main == "Clear"){ 36 | weatherIcon.src = "images/clear.png" 37 | } 38 | else if(data.weather[0].main == "Rain"){ 39 | weatherIcon.src = "images/rain.png" 40 | } 41 | else if(data.weather[0].main == "Drizzle"){ 42 | weatherIcon.src = "images/drizzle.png" 43 | } 44 | else if(data.weather[0].main == "Mist"){ 45 | weatherIcon.src = "images/mist.png" 46 | } 47 | else if(data.weather[0].main == "Snow"){ 48 | weatherIcon.src = "images/snow.png" 49 | } 50 | 51 | document.querySelector(".weather").style.display = "block" 52 | document.querySelector(".error").style.display = "none" 53 | } 54 | } 55 | 56 | searchBtn.addEventListener('click',() =>{ 57 | checkWeather(searchCity.value) 58 | }) 59 | 60 | 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 🌦️ Weather App 2 | 3 | A sleek and responsive weather application built using **HTML**, **CSS**, and **JavaScript**, integrated with the **OpenWeatherMap API** to provide real-time weather updates for any city. 4 | 5 | --- 6 | 7 | ### 🚀 Features 8 | 9 | - **Real-time Weather Data**: Fetches current temperature, humidity, and wind speed for the entered city. 10 | - **City Search Functionality**: Users can search for any city using the search bar. 11 | - **Dynamic UI Updates**: Weather information updates instantly based on the searched city. 12 | - **Visual Weather Indicators**: Displays images/icons for temperature, humidity, and wind speed for better visual understanding. 13 | - **Clean and Modern Design**: User-friendly interface with a gradient background and responsive layout. 14 | 15 | --- 16 | 17 | ### 🛠️ Technologies Used 18 | 19 | - **HTML** – Structure of the application 20 | - **CSS** – Styling and layout 21 | - **JavaScript** – API integration and DOM manipulation 22 | - **OpenWeatherMap API** – Provides accurate and up-to-date weather data 23 | 24 | --- 25 | 26 | ### 🔍 How It Works 27 | 28 | 1. User enters a **city name** into the search bar. 29 | 2. JavaScript fetches weather data from the **OpenWeatherMap API**. 30 | 3. The app displays: 31 | - **Temperature (°C)** 32 | - **Humidity (%)** 33 | - **Wind Speed (km/hr)** 34 | 4. Corresponding **icons** for weather metrics are shown for visual clarity. 35 | 36 | --- 37 | 38 | 39 | ### 📦 Setup Instructions 40 | 41 | 1. Clone the repository: 42 | 43 | git clone https://github.com/Uvajanani/Weather.git 44 | 45 | 2. Navigate to the project directory: 46 | 47 | cd Weather 48 | 49 | 3. Open `index.html` in your browser to run the app. 50 | 51 | > ⚠️ Make sure to replace the placeholder API key in the JavaScript file with your **OpenWeatherMap API key**. 52 | 53 | --- 54 | 55 | ### 🌐 API Used 56 | 57 | - **[OpenWeatherMap API](https://openweathermap.org/api)** 58 | Provides real-time weather data including temperature, humidity, and wind speed. 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | font-family: Arial, Helvetica, sans-serif; 5 | } 6 | body{ 7 | background-color: #222; 8 | } 9 | .card{ 10 | background: linear-gradient(135deg,#00feba,#5b548a); 11 | width: 90%; 12 | max-width: 470px; 13 | text-align: center; 14 | border-radius: 20px; 15 | padding: 40px 35px; 16 | margin: 100px auto 0; 17 | color: aliceblue; 18 | 19 | } 20 | 21 | .search{ 22 | width: 100%; 23 | display: flex; 24 | align-items: center; 25 | justify-content: space-between; 26 | } 27 | 28 | .search input{ 29 | border: 0; 30 | outline: 0; 31 | background: #ebfffc; 32 | color: #555; 33 | border-radius: 30px; 34 | padding: 10px 25px; 35 | font-size: 18px; 36 | flex: 1; 37 | height: 40px; 38 | margin-right: 16px; 39 | } 40 | .search button{ 41 | border: 0; 42 | outline: 0; 43 | border-radius: 50%; 44 | background: #ebfffc; 45 | cursor: pointer; 46 | width: 60px; 47 | height: 60px; 48 | } 49 | .search button img{ 50 | width: 16px; 51 | } 52 | 53 | .weather-icon{ 54 | width: 200px; 55 | margin-top: 30px; 56 | } 57 | 58 | .weather h1{ 59 | font-size: 70px; 60 | font-weight: 500; 61 | margin-top: 5px; 62 | } 63 | .weather h2{ 64 | font-size: 40px; 65 | font-weight: 400; 66 | margin-top: 7px; 67 | } 68 | 69 | .details{ 70 | display: flex; 71 | align-items: center; 72 | justify-content: space-between; 73 | padding: 2px 1px; 74 | margin-top: 60px; 75 | } 76 | 77 | .col{ 78 | display: flex; 79 | align-items: center; 80 | text-align: left; 81 | } 82 | 83 | .humiImg{ 84 | width: 90px; 85 | margin-left: 50px; 86 | 87 | } 88 | 89 | .windImg{ 90 | width: 100px; 91 | margin-right: 2px; 92 | } 93 | .humidity,.wind{ 94 | font-size: 25px; 95 | margin-left: 10px; 96 | margin-top: 1px; 97 | } 98 | .col p{ 99 | font-size: 20px; 100 | margin-left: 10px; 101 | margin-top: 5px; 102 | } 103 | .weather{ 104 | display: none; 105 | } 106 | 107 | .error{ 108 | font-size: 20px; 109 | margin-top: 20px; 110 | display: none; 111 | } --------------------------------------------------------------------------------