A beautifully designed weather application built with vanilla JavaScript, HTML5, and CSS3. It uses the OpenWeather API to deliver current conditions, a 5‑day forecast, wind, pressure, visibility, and more. The app now includes a fully functional Celsius/Fahrenheit toggle, geolocation support, and a modern, mobile‑first UI with smooth transitions.
- 🔍 Search by City – Get instant weather for any city worldwide.
- 📍 Use My Location – Automatically fetch weather for your current position via the Geolocation API.
- 🌡️ Temperature Unit Toggle – Switch between Celsius and Fahrenheit. Preference is saved in
localStorage. - 📅 5‑Day Forecast – View a daily breakdown of upcoming weather.
- 📊 Detailed Stats – Feels‑like temperature, humidity, wind speed, pressure, and visibility.
- 🎨 Modern UI/UX – Clean design with gradient backgrounds, subtle animations, and loading states.
- ♿ Accessible – Semantic HTML, ARIA labels, keyboard navigation, and screen‑reader friendly.
- 📱 Fully Responsive – Looks great on desktops, tablets, and mobile devices.
Check out the live version here:
🔗 https://Happy-devloper.github.io/weather-web-app.github.io
- Frontend: HTML5, CSS3 (Flexbox & Grid), Vanilla JavaScript (ES6+)
- Icons: Boxicons & custom SVG weather icons
- API: OpenWeather (Current Weather + 5‑Day Forecast)
- Hosting: GitHub Pages