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 temperatures

Display 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 weather

Test 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 preference

Checkpoint

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

Exercises

1. Paste the "Fetch Forecast Data" and "Display the Forecast" prompts, then confirm all five cards show distinct day names, emoji, and high/low temps.
2. Search a tropical city and an arctic city back to back and compare the forecasts to verify the data is genuinely different.
3. Paste the "Add Temperature Units" prompt, toggle between Celsius and Fahrenheit, then refresh the page to confirm your preference is remembered.