├── 404.png ├── mist.png ├── rain.png ├── snow.png ├── wind.png ├── clear.png ├── cloud.png ├── Weather1.jpg ├── Weather2.jpg ├── humidity.png ├── Weather App .png ├── weather-icon.png ├── Screenshot 2025-05-15 085406.png ├── .hintrc ├── Weather.txt ├── README.md ├── index.html ├── script.js └── style.css /404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/404.png -------------------------------------------------------------------------------- /mist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/mist.png -------------------------------------------------------------------------------- /rain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/rain.png -------------------------------------------------------------------------------- /snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/snow.png -------------------------------------------------------------------------------- /wind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/wind.png -------------------------------------------------------------------------------- /clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/clear.png -------------------------------------------------------------------------------- /cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/cloud.png -------------------------------------------------------------------------------- /Weather1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/Weather1.jpg -------------------------------------------------------------------------------- /Weather2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/Weather2.jpg -------------------------------------------------------------------------------- /humidity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/humidity.png -------------------------------------------------------------------------------- /Weather App .png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/Weather App .png -------------------------------------------------------------------------------- /weather-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/weather-icon.png -------------------------------------------------------------------------------- /Screenshot 2025-05-15 085406.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Weather-App/HEAD/Screenshot 2025-05-15 085406.png -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "development" 4 | ], 5 | "hints": { 6 | "axe/name-role-value": [ 7 | "default", 8 | { 9 | "button-name": "off" 10 | } 11 | ], 12 | "compat-api/css": [ 13 | "default", 14 | { 15 | "ignore": [ 16 | "backdrop-filter" 17 | ] 18 | } 19 | ] 20 | } 21 | } -------------------------------------------------------------------------------- /Weather.txt: -------------------------------------------------------------------------------- 1 | 🌦️ Weather App Project - Contributor Notes 2 | 3 | 🔸 Description: 4 | This file contains contributor updates and project change logs for the Weather App. 5 | 6 | 🔸 Update by: @subhamnayak343 7 | 🔸 Date: [Add today's date] 8 | 9 | 🔸 What I did: 10 | - Cloned the original repository 11 | - Set up the development environment 12 | - Added improvements/fixes/features [mention below] 13 | 14 | 🔸 Features Added / Bug Fixed: 15 | - [ ] UI responsiveness improved 16 | - [ ] API error handling added 17 | - [ ] Loading animation added while fetching weather 18 | - [ ] Dark mode support 19 | - [ ] Fixed Celsius/Fahrenheit toggle 20 | 21 | 🔸 Next Steps / To Do: 22 | - [ ] Add 5-day forecast support 23 | - [ ] Improve search suggestions 24 | - [ ] Add unit tests for API fetch 25 | - [ ] Create a deployable version (GitHub Pages / Vercel) 26 | 27 | Keep collaborating! 💻🚀 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⛅ Weather App 2 | 3 | A sleek, responsive Weather App that shows real-time weather updates for any city using the **OpenWeatherMap API**. Built using **HTML**, **CSS**, and **JavaScript**. 4 | 5 | ![Weather App Screenshot]. (https://github.com/user-attachments/assets/c0dae381-abb8-4aa4-ac55-439380ed3011) 6 | ![image](https://github.com/user-attachments/assets/c0dae381-abb8-4aa4-ac55-439380ed3011) 7 | 8 | 9 | --- 10 | 11 | ## 🔗 Live Demo 12 | 13 | 👉 [View Weather App](https://shubham-cyber-prog.github.io/Weather-App/) 14 | 15 | --- 16 | 17 | ## 🚀 Features 18 | 19 | - 🌍 Real-time weather by city name 20 | - 🌡️ Temperature, humidity, wind speed 21 | - 🌤️ Weather icons based on conditions 22 | - 🎨 Responsive and modern UI 23 | - ⚙️ API integration with OpenWeatherMap 24 | 25 | --- 26 | 27 | ## 🛠️ Tech Stack 28 | 29 | - HTML5 30 | - CSS3 31 | - JavaScript (Vanilla) 32 | - OpenWeatherMap API 33 | 34 | --- 35 | 36 | ## 📁 Folder Structure 37 | ├── index.html # Main HTML file 38 | ├── style.css # Stylesheet 39 | ├── script.js # JavaScript for API and logic 40 | └── README.md 41 | 42 | --- 43 | 44 | ## ✨ Getting Started 45 | 46 | 1. **Clone the Repository**: 47 | ```bash 48 | git clone https://github.com/Shubham-cyber-prog/Weather-App.git 49 | 50 | ## ✍️ Author 51 | 52 | 🐾 **Author**: 👨‍💻 [Subham Nayak](https://shubham-cyber-prog.github.io/) 53 | 🌐 [🌍 Portfolio](https://shubham-cyber-prog.github.io/) | 🔗 [LinkedIn](https://linkedin.com/in/subham-nayak-00276930b) | 🐱 [GitHub](https://github.com/Shubham-cyber-prog) 54 | 55 | 56 | --- 57 | 58 | Let me know if you'd like: 59 | 60 | - A badge-based layout (`shields.io` style) 61 | - Help adding a screenshot image 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Weather App 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 |
18 | 20 | 21 |
22 |
23 |
24 | 25 |

22°c

26 |

New Delhi

27 |
28 | 29 |
30 |
31 |

18°c

32 |

Min Temp

33 |
34 | 35 |
36 |

24°c

37 |

Max Temp

38 |
39 |
40 |
41 | 42 |
43 | 44 |
45 |
46 |

50%

47 |

Humidity

48 | 49 |
50 |
51 | 52 |
53 |
54 |

5 Km/h

55 |

Wind Speed

56 |
57 |
58 | 59 |
60 |
61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 2 | const apiKey = "9470f162a34d93086760b16d1426a9ed"; 3 | const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=" 4 | 5 | const searchBox = document.querySelector(".search input"); 6 | const searchButton = document.querySelector(".search button"); 7 | 8 | 9 | 10 | async function getWeather(city) { 11 | const response = await fetch(apiUrl + city + `&appid=${apiKey}`); 12 | 13 | if (response.status == 404) { 14 | // alert("City not found!"); 15 | let img = document.querySelector("#icon"); img.style.width = "30rem"; 16 | document.querySelector(".detail").style.display = "none"; 17 | document.querySelector(".temp2").style.display = "none"; 18 | 19 | img.src = 'images/404.png'; 20 | let temp = document.querySelector(".temp").innerHTML = "Error! 404"; 21 | let name = document.querySelector(".name").innerHTML = "City Not Found" 22 | document.getElementById("temp").style.fontSize = "3rem"; 23 | 24 | return; 25 | 26 | 27 | } 28 | 29 | else { 30 | var data = await response.json(); 31 | // console.log(data); 32 | 33 | document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c"; 34 | document.querySelector(".name").innerHTML = data.name + ", " + data.sys.country; 35 | document.querySelector(".mintemp").innerHTML = Math.round(data.main.temp_min) + "°c"; 36 | document.querySelector(".maxtemp").innerHTML = Math.round(data.main.temp_max) + "°c"; 37 | 38 | 39 | document.querySelector(".humidity").innerHTML = data.main.humidity + "%"; 40 | document.querySelector(".wind").innerHTML = Math.round(data.wind.speed) + " km/h"; 41 | 42 | let img = document.querySelector("#icon"); 43 | // img.src = `http://openweathermap.org/img/wn/${data.weather[0].icon}@4x.png`; 44 | 45 | switch (data.weather[0].main) { 46 | case 'Clear': 47 | img.src = 'clear.png'; 48 | break; 49 | 50 | case 'Rain': 51 | img.src = 'images/rain.png'; 52 | break; 53 | 54 | case 'Snow': 55 | img.src = 'images/snow.png'; 56 | break; 57 | 58 | case 'Clouds': 59 | img.src = 'images/cloud.png'; 60 | break; 61 | 62 | case 'Mist': 63 | img.src = 'images/mist.png'; 64 | break; 65 | 66 | case 'Haze': 67 | img.src = 'images/mist.png'; 68 | break; 69 | 70 | default: 71 | img.src = 'images/cloud.png'; 72 | break; 73 | } 74 | 75 | document.querySelector(".detail").style.display = "flex"; 76 | document.querySelector(".temp2").style.display = "flex"; 77 | document.getElementById("temp").style.fontSize = "5.5rem"; 78 | img.style.width = "16rem"; 79 | 80 | } 81 | 82 | } 83 | searchButton.addEventListener("click", function () { 84 | getWeather(searchBox.value); 85 | }) 86 | 87 | // if (searchBox.value != " ") { 88 | setInterval(() => { 89 | getWeather(searchBox.value); 90 | }, 600000); 91 | 92 | 93 | // } 94 | 95 | 96 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | 6 | } 7 | 8 | body { 9 | background-image: url("Weather2.jpg"); 10 | font-family: Arial, Helvetica, sans-serif; 11 | background-size: cover; 12 | height: 100vh; 13 | width: 100vw; 14 | display: flex; 15 | justify-content: center; 16 | padding: 50px 5px; 17 | transition: transform 0.6s; 18 | 19 | } 20 | 21 | .box { 22 | box-shadow: 0 8px 8px 10px rgba(9, 9, 9, 0.5); 23 | border-radius: 10px; 24 | border: 2px solid #87CEEB; 25 | backdrop-filter: blur(15px); 26 | background: transparent; 27 | transition: 0.5s ease; 28 | box-sizing: border-box; 29 | overflow: auto; 30 | height: fit-content; 31 | padding-bottom: 10px; 32 | width: min-content; 33 | 34 | } 35 | 36 | .search { 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | } 41 | 42 | 43 | .box input::placeholder { 44 | color: #44b1dc; 45 | 46 | /* padding-left: 5px; */ 47 | } 48 | 49 | .box input { 50 | height: 5rem; 51 | width: 30rem; 52 | font-size: 1.3rem; 53 | padding: 10px 10px 10px 40px; 54 | margin: 20px 1px 0px 20px; 55 | border: 4px solid #4fbde9; 56 | border-radius: 30px; 57 | background-color: transparent; 58 | outline: none; 59 | color: white; 60 | box-shadow: inset 2px 2px 3px #87CEEB, 61 | inset -2px -2px 3px #87CEEB; 62 | 63 | } 64 | 65 | .box button { 66 | height: 3.3rem; 67 | width: 4rem; 68 | font-size: 1.5rem; 69 | /* padding: 10px; */ 70 | margin: 22px 20px 0px -66px; 71 | border-radius: 50px; 72 | border: 1px solid #87CEEB; 73 | background-color: #87CEEB; 74 | color: #036288; 75 | box-shadow: 1px 1px 2px #87CEEB, 76 | -1px -1px 2px #87CEEB; 77 | cursor: pointer; 78 | position: relative; 79 | } 80 | 81 | .box button:hover { 82 | color: aliceblue; 83 | transition: 0.5s ease; 84 | } 85 | 86 | .box button:active { 87 | transform: scale(1.3); 88 | transition: transform 0.5 ease-in-out; 89 | 90 | } 91 | 92 | .weather { 93 | text-align: center; 94 | color: #87CEEB; 95 | transition: transform 0.8s ease; 96 | padding-bottom: 10px; 97 | 98 | 99 | } 100 | 101 | .weather img { 102 | width: 15rem; 103 | padding: 10px; 104 | margin: 5px; 105 | transition: 0.6s ease; 106 | } 107 | 108 | .weather h1 { 109 | font-size: 5rem; 110 | margin-top: -20px; 111 | font-weight: 700; 112 | transition: 0.8s ease; 113 | text-align: center; 114 | 115 | } 116 | 117 | .weather h2 { 118 | font-size: 3.2rem; 119 | font-weight: 700; 120 | /* text-transform: uppercase; */ 121 | /* letter-spacing: 1px; */ 122 | margin-top: -5px; 123 | transition: 0.8s ease; 124 | text-align: center; 125 | 126 | } 127 | 128 | .detail { 129 | color: #87CEEB; 130 | display: flex; 131 | justify-content: space-between; 132 | margin-right: 10px; 133 | margin-top: 2.3rem; 134 | font-size: .8rem; 135 | text-align: left; 136 | 137 | 138 | 139 | } 140 | 141 | .col { 142 | display: flex; 143 | align-items: center; 144 | text-align: left 145 | } 146 | 147 | .col img { 148 | width: 40px; 149 | margin-left: 39px; 150 | margin-top: 5px; 151 | position: absolute; 152 | 153 | } 154 | 155 | .detail div { 156 | font-size: 18px; 157 | margin-right: 20px; 158 | font-weight: 800; 159 | 160 | } 161 | 162 | .search div .fa { 163 | font-size: 1.8rem; 164 | color: #87CEEB; 165 | position: absolute; 166 | top: 2rem; 167 | left: 2.5rem; 168 | } 169 | 170 | .temp2 { 171 | display: flex; 172 | justify-content: space-between; 173 | text-align: center; 174 | padding: 10px 60px 0px 60px; 175 | } 176 | 177 | .temp2 h1, 178 | h4 { 179 | font-size: 1.2rem; 180 | font-family: 'Roboto', sans-serif; 181 | color: #87CEEB; 182 | /* margin-bottom: 10px; */ 183 | 184 | 185 | } 186 | 187 | ::-webkit-scrollbar{ 188 | background: transparent; 189 | width: 10px; 190 | } 191 | ::-webkit-scrollbar-thumb{ 192 | background-color: #87CEEB; 193 | height: 10%; 194 | border-radius: 10px; 195 | } 196 | 197 | @media (max-width: 600px) { 198 | 199 | .box { 200 | 201 | width: 100% !important; 202 | 203 | overflow: auto; 204 | } 205 | 206 | .search input{ 207 | width: 95% !important; 208 | height: 95% !important; 209 | 210 | } 211 | 212 | .search button{ 213 | margin: 20px 20px 0px -13vw; 214 | 215 | } 216 | 217 | .search div .fa { 218 | font-size: 1.8rem; 219 | color:#87CEEB; 220 | position: absolute; 221 | 222 | margin: 0px 20px 0px 2px 223 | } 224 | .col img { 225 | width: 29px; 226 | margin-left: 13px; 227 | margin-top: 5px; 228 | position: absolute; 229 | } 230 | .detail div{ 231 | font-size: 90%; 232 | margin-right: 4px; 233 | } 234 | 235 | } --------------------------------------------------------------------------------