🌤️ Build a Weather Card (UI)
A live HTML/CSS card that fetches data from a free API. Practices: input/output, objects, async basics.
What You'll Build
A small webpage that shows the current temperature for a given city, fetched from Open-Meteo (free, no API key).
Step 1 — the HTML
html
<input id="city" value="London">
<button id="go">Get weather</button>
<div id="result"></div>Step 2 — the Fetch
javascript
async function getWeather(city) {
// Geocode
const geo = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${city}`).then(r => r.json());
const { latitude, longitude } = geo.results[0];
// Weather
const wx = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true`).then(r => r.json());
return wx.current_weather.temperature;
}
document.getElementById("go").onclick = async () => {
const city = document.getElementById("city").value;
const t = await getWeather(city);
document.getElementById("result").textContent = `${city}: ${t}°C`;
};Stretch Goals
- Show a 7-day forecast.
- Add an error message if the city isn't found.
- Cache the last city in localStorage.