A modern and responsive Weather Forecast Web Application built using HTML, CSS & JavaScript, powered by the Open-Meteo API. The app provides real-time weather details, a 7-day weekly forecast, and includes a Day/Night theme mode for an enhanced user experience.
🔗 Live App: https://shravani-31-12.github.io/Weather-Forecast/
- 🌍 Search Weather by City Name
- 📍 Use My Location (Auto-detect weather using GPS)
- 🌡️ Shows Temperature, Feels Like, Humidity, Wind Speed & Condition
- 📅 7-Day Weather Forecast with emoji icons
- 🌓 Theme Toggle – Day & Night Mode
- 🎨 Beautiful Glassmorphism UI Design
⚠️ Smart Error Handling (City not found, location denied, etc.)- 📱 Fully Responsive UI for Mobile, Tablet & Desktop
| Technology | Purpose |
|---|---|
| HTML5 | Structure & layout |
| CSS3 | UI styling, animations, glassmorphism |
| JavaScript (ES6) | Functionality & API integration |
| Open-Meteo API | Real-time weather & 7-day forecast |
| Geocoding API | Convert city name → latitude & longitude |
- User enters a city OR clicks Use My Location
- City name is converted to coordinates via Geocoding API
- Weather & forecast fetched from Open-Meteo
- UI updates with weather info + 7-day forecast
| Night Mode | Light Mode |
|---|---|
![]() |
![]() |
📂 Weather-App
│── index.html
│── style.css
│── script.js
└── /img
Shravani Pawar
- 💻 GitHub: https://github.com/Shravani-31-12
- 🔗 LinkedIn: https://www.linkedin.com/in/shravani-pawar-333a31259/
- 📩 Email: [email protected]
If you found this project helpful, please ⭐ star the repository!

