What you will use in this project
- Calling REST APIs with fetch
- Async and await with Promises
- Parsing and rendering JSON
- Graceful loading and error states
Web Project: Weather Dashboard
Complete each step in the editor and watch the result as your page takes shape.
Build Weather Dashboard, step-by-step
Create a weather dashboard that fetches data from a real API.
Display current conditions and a forecast.
How it works
- 1 Follow the steps on the left. Each dot in the stepper bar is one focused chunk of work. Read the instructions, the “What to do” checklist, and any hints.
- 2 Write your code on the right. The editor is yours. Files auto-save as you type. Use the Preview tab to see your work in action.
-
3
Click
Check codewhen you’re ready. We grade your work against the step’s rubric and tell you exactly what passed and what still needs work. - 4 Pass a step to move on. Build the project cumulatively. Pass every step to complete it and earn the full XP.
How it’s graded
This project is broken into 10 steps. Each one has its own pass criterion. Click Check code on every step to verify your progress and earn the full +150 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 | Search bar Search form and input present | 15 pts |
| 2 | Status containers Loading and error containers present | 5 pts |
| 3 | Current-weather card Current-weather card with child ids | 5 pts |
| 4 | Forecast container Forecast container present | 10 pts |
| 5 | Style the layout CSS uses real layout and media query | 5 pts |
| 6 | Wire the form Loading indicator toggled | 5 pts |
| 7 |
Fetch with async/await
|
30 pts |
| 8 | Render current JS updates current-weather ids | 10 pts |
| 9 | Render forecast JS appends forecast cards | 10 pts |
| 10 | Error and loading states Error class toggled | 5 pts |
