2 min read
Step 4: Forecast
Add the 5-day forecast.
Where We Are
You can search for a city and see current weather. Now let’s add the forecast.
Fetch Forecast Data
Update the weather API call to also request daily forecast data.
Add these parameters to the Open-Meteo request:
- daily=temperature_2m_max,temperature_2m_min,weathercode
- timezone=auto
- forecast_days=5
Parse the response and fill in the 5 forecast cards with:
- Day name (Mon, Tue, etc.)
- Weather emoji from the weather code
- High and low temperaturesDisplay the Forecast
Update the forecast cards to show the real data:
- Each card gets its own day
- Show the day name at top
- Weather emoji in the middle
- High temp and low temp at bottom
- Use the same weather code mapping from the current weatherTest It
Search for a city. You should see:
- Current weather at the top
- 5 forecast cards below with different temperatures per day
- Weather emojis that match conditions
Try cities in different climates — tropical, arctic, desert — to see variety.
Add Temperature Units
Add a toggle to switch between Celsius and Fahrenheit.
- Default to Celsius
- When toggled, re-fetch or convert the displayed temperatures
- Remember the preferenceCheckpoint
By now you should have:
- 5-day forecast displays correctly
- Each day shows high/low and conditions
- Temperature unit toggle works
- Different cities show different forecasts
What You Learned
- Working with more complex API responses
- Parsing dates and formatting days
- User preferences (unit toggle)
- Multiple data points from one API