├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Weather App 7 | 8 | 9 | 10 |
11 |
12 |

🌤️ Weather App

13 | 14 | 15 |
16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | async function getWeather() { 2 | const city = document.getElementById('cityInput').value.trim(); 3 | const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key 4 | const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`; 5 | 6 | try { 7 | const response = await fetch(url); 8 | if (!response.ok) throw new Error('City not found'); 9 | const data = await response.json(); 10 | 11 | const icon = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`; 12 | 13 | const resultHTML = ` 14 |

${data.name}, ${data.sys.country}

15 | weather icon 16 |

${data.weather[0].description.toUpperCase()}

17 |

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

18 |

💧 Humidity: ${data.main.humidity}%

19 |

🌬️ Wind: ${data.wind.speed} m/s

20 | `; 21 | 22 | document.getElementById('weatherResult').innerHTML = resultHTML; 23 | } catch (error) { 24 | document.getElementById('weatherResult').innerHTML = `

${error.message}

`; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Background Gradient */ 2 | body { 3 | margin: 0; 4 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 5 | background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%); 6 | height: 100vh; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | /* App Container */ 13 | .app { 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | width: 100%; 18 | } 19 | 20 | /* Weather Card */ 21 | .weather-card { 22 | background: rgba(255, 255, 255, 0.2); 23 | border-radius: 20px; 24 | padding: 30px; 25 | width: 350px; 26 | text-align: center; 27 | box-shadow: 0 8px 32px rgba(31, 38, 135, 0.3); 28 | backdrop-filter: blur(10px); 29 | color: #ffffff; 30 | } 31 | 32 | .weather-card h1 { 33 | margin-bottom: 20px; 34 | } 35 | 36 | input { 37 | padding: 10px; 38 | width: 80%; 39 | border-radius: 8px; 40 | border: none; 41 | margin-bottom: 10px; 42 | } 43 | 44 | button { 45 | padding: 10px 20px; 46 | margin-top: 10px; 47 | border: none; 48 | border-radius: 8px; 49 | background-color: #ffffff; 50 | color: #333; 51 | cursor: pointer; 52 | font-weight: bold; 53 | transition: background 0.3s ease; 54 | } 55 | 56 | button:hover { 57 | background-color: #f1f1f1; 58 | } 59 | 60 | .weather-info { 61 | margin-top: 20px; 62 | font-size: 18px; 63 | line-height: 1.6; 64 | } 65 | 66 | .weather-info img { 67 | margin-top: 10px; 68 | width: 80px; 69 | } 70 | --------------------------------------------------------------------------------