JavaScriptIntermediate⭐ Featured🔥 Trending
Weather App with 5-Day Forecast
A comprehensive Weather App built with Vanilla JavaScript that displays real-time weather data, 5-day forecast, hourly forecast, and recent searches using OpenWeather API.
⏱️5–7 hours
📅Added: Dec 31, 2024
About This Project
This Weather App is an intermediate-level JavaScript project that demonstrates
working with external APIs, handling asynchronous operations, and managing application state.
Users can search for any city worldwide, get weather by geolocation, view current weather
conditions with detailed metrics, check 5-day and hourly forecasts, toggle between
Celsius and Fahrenheit, and access recent search history.
The app features dynamic backgrounds based on weather conditions, error handling,
loading states, and localStorage persistence — making it a production-ready portfolio project.
Key Features
- ✓Real-time weather data via OpenWeather API
- ✓Search by city name with suggestions
- ✓Geolocation-based weather detection
- ✓Current weather with icon, temperature, and feels-like
- ✓Detailed metrics (humidity, wind, pressure, visibility)
- ✓Sunrise and sunset times
- ✓5-day weather forecast
- ✓24-hour hourly forecast
- ✓Temperature unit toggle (°C / °F)
- ✓Recent searches with localStorage
- ✓Dynamic weather-based backgrounds
- ✓Error handling and loading states
- ✓Toast notifications
- ✓Fully responsive design
What You'll Learn
- 📚Working with REST APIs
- 📚Async/await and Promises
- 📚API key management
- 📚Geolocation API usage
- 📚State management without frameworks
- 📚Error handling for API calls
- 📚Data transformation and grouping
- 📚LocalStorage for persistence
- 📚Dynamic UI updates
- 📚Date and time formatting
- 📚Responsive weather UI design
Tech Stack
HTML5CSS3Vanilla JavaScript (ES6+)OpenWeather APILocalStorage APIGeolocation APIFont Awesome
Tags
#weather#api#javascript#intermediate#forecast#openweather#portfolio-project