1st YearBeginnerWeb 1-2 weeks
Weather Dashboard with Public API
A weather app that fetches current conditions and a multi-day forecast for any city from a public weather API, with unit toggle and recent-search history.
HTMLCSSJavaScriptFetch APIOpenWeatherMap API
Find GitHub repos & source code →How to build it — step by step
- 1API integration: Call a weather API with fetch + async/await; handle loading and error states.
- 2Rendering: Display temperature, humidity, wind, and an icon; render a 5-day forecast row.
- 3UX features: Add °C/°F toggle and store recent searches in localStorage.
- 4Geolocation: Optionally use the browser Geolocation API to load the user’s local weather on start.
Key features to implement
- ✓City search with autocomplete
- ✓5-day forecast
- ✓Celsius/Fahrenheit toggle
- ✓Recent searches
- ✓Geolocation default
💡 Unique twist to stand out
Change the page background/theme dynamically based on the current weather condition (sunny, rainy, snowy).
🎓 What you'll learn
Consuming REST APIs, async/await, error handling, environment-safe API keys, and responsive UI.