2 min read
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:
- Geocoding — Convert a city name to coordinates (latitude/longitude)
- 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}¤t_weather=true
Handle errors gracefully — show a message if the city isn't found.Test It
- Refresh the page
- Type “London” and press Enter
- You should see a real temperature and conditions
- 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)