Weather Dashboard Web App
Build a responsive weather dashboard in plain JavaScript, HTML and CSS: search for a city, see the current conditions on a styled card (temperature, feels-like, wind, humidity and an icon), and a chart of the next 7 days' high and low temperatures made with Chart.js. Data comes from the free Open-Meteo API, which needs no key. The page remembers recent searches, shows loading and error states, and works on phones and desktops. You'll learn the Fetch API with async and await, debouncing user input, handling errors and slow responses, using a charting library, responsive CSS layouts, and saving data in localStorage.
- Estimate
- ~7.5h
- Steps
- 6
- Completed by
- 0
- Proposed by
- codeseed.app
Fetch API · Chart.js · HTML/CSS
Project roadmap
- 01
Build the layout and search
~1.5hCreate index.html, style.css and app.js with a search box, a current conditions card and a chart area, using CSS grid so the layout stacks on phones. When the user stops typing for 300 ms (a debounce), call the Open-Meteo geocoding API and show up to 5 matching cities with their country. Done when: typing a city shows suggestions, and the layout works on a phone-sized screen.
- 02
Fetch the weather
~1.5hWrite an async function that calls the Open-Meteo forecast API for the chosen city's coordinates, asking for the current conditions and 7 days of daily highs and lows, with a timeout using AbortController. Check response.ok and throw a clear error otherwise. Done when: choosing a city logs its weather data.
- 03
Show the current conditions
~1hFill the card with the city name, temperature, feels-like, wind, humidity and a description and icon chosen from the weather code (using a small lookup table and emoji or SVG icons). Format numbers with Intl.NumberFormat. Done when: the card shows the current weather for the chosen city.
- 04
Plot the forecast
~1.5hDraw a Chart.js line chart with the daily highs and lows for the next 7 days, labeled by weekday. When a new city is chosen, update the existing chart's data and call update() instead of creating a new chart on top. Make the chart resize with the page. Done when: the chart shows 7 days and updates when the city changes.
- 05
Remember recent searches
~1hSave the last 5 chosen cities (name and coordinates) in localStorage without duplicates, most recent first, and show them as buttons for one-click access, with a Clear button. Load the most recent city when the page opens. Done when: recent cities survive a page reload.
- 06
Handle loading and errors
~1hShow a loading spinner while requests run, and friendly messages with a Retry button when a request fails or times out, or when no city matches. If the user picks another city before the previous one finishes loading, cancel the old request so the newest city always wins. Done when: slow, failed and overlapping requests all behave correctly.
Ready to build this?
Get a GitHub repo and start building. Your AI reviewer checks each step as you go.
Tech stack