Step 3: Fetching Data

Connect to a weather API and show real data.

Where We Are

You have a styled layout with placeholder data. Now let's make it real.

The API

We'll use Open-Meteo — a free weather API that doesn't require an API key. It works in two steps:

1. Geocoding — Convert a city name to coordinates (latitude/longitude)
2. Weather — Get weather data for those coordinates

You don't need to understand the API details. Claude does.

Fetch Weather on Search

When the user clicks Search or presses Enter:
1. Take the city name from the input
2. Use the Open-Meteo geocoding API to get coordinates
3. Use those coordinates to fetch current weather
4. Display the temperature, city name, and weather condition
5. Show a loading state while fetching

API endpoints:
- Geocoding: https://geocoding-api.open-meteo.com/v1/search?name={city}
- Weather: https://api.open-meteo.com/v1/forecast?latitude={lat}&longitude={lon}&current_weather=true

Handle errors gracefully — show a message if the city isn't found.

Test It

1. Refresh the page
2. Type "London" and press Enter
3. You should see a real temperature and conditions
4. Try "New York", "Tokyo", "Sydney"

If something doesn't work, open the browser console (Right-click → Inspect → Console) and look for errors.

Map Weather Codes

The API returns weather codes (numbers) instead of text. Let Claude handle the mapping:

Map the weather codes from Open-Meteo to human-readable descriptions.
For example:
- 0 = Clear sky
- 1-3 = Partly cloudy
- 45, 48 = Fog
- 51-55 = Drizzle
- 61-65 = Rain
- 71-77 = Snow
- 95+ = Thunderstorm

Also add a weather emoji for each condition.

Checkpoint

By now you should have:

• Search fetches real weather data
• Temperature and conditions display correctly
• Weather codes mapped to descriptions
• Errors handled (city not found)

What You Learned

• Fetching data from an API with JavaScript
• Async/await pattern
• Error handling for network requests
• Chaining API calls (geocoding → weather)

Exercises

1. Paste the "Fetch Weather on Search" prompt, then search "London" and confirm a real temperature appears.
2. Test the error path by searching a nonsense string (e.g. "asdfgh") and verify a friendly "city not found" message shows instead of a blank screen.
3. Paste the "Map Weather Codes" prompt, then search cities in different climates and confirm the description and emoji match the conditions.