API Bouncer

Buy me a coffee

Building a Weather Dashboard with Free APIs

A weather dashboard is one of the best first projects for learning APIs. It's practical (you'll actually use it), visual (lots of UI to build), and teaches key concepts like API keys, async/await, and error handling. Let's walk through building one.

Choosing a weather API

There are several free weather APIs. Here are the most popular options:

For this tutorial, we'll use Open-Meteo since it requires no sign-up, but the concepts apply to any weather API.

Step 1: Understand the API

Open-Meteo's forecast endpoint accepts latitude and longitude and returns weather data:

GET https://api.open-meteo.com/v1/forecast ?latitude=40.7128 &longitude=-74.0060 ¤t_weather=true &daily=temperature_2m_max,temperature_2m_min &timezone=auto

The response includes current temperature, wind speed, and daily forecasts. Always read the API documentation to understand what parameters are available.

Step 2: Set up the HTML structure

<div class="weather-dashboard"> <h1>Weather Dashboard</h1> <div class="search-bar"> <input type="text" id="city" placeholder="Enter city name..."> <button id="search-btn">Search</button> </div> <div id="current-weather"></div> <div id="forecast"></div> </div>

We have an input for the city name, a display area for current weather, and a section for the forecast.

Step 3: Convert city name to coordinates

Most weather APIs need latitude and longitude, not city names. Open-Meteo has a geocoding API for this:

async function getCoordinates(city) { const url = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(city)}&count=1`; const response = await fetch(url); const data = await response.json(); if (!data.results || data.results.length === 0) { throw new Error('City not found'); } const result = data.results[0]; return { lat: result.latitude, lon: result.longitude, name: result.name, country: result.country }; }

Step 4: Fetch weather data

async function getWeather(lat, lon) { const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t_weather=true&daily=temperature_2m_max,temperature_2m_min,weathercode&timezone=auto`; const response = await fetch(url); if (!response.ok) throw new Error('Weather API error'); return response.json(); }

Step 5: Display the data

function displayWeather(location, weather) { const current = weather.current_weather; document.getElementById('current-weather').innerHTML = ` <h2>${location.name}, ${location.country}</h2> <p class="temp">${current.temperature}°C</p> <p>Wind: ${current.windspeed} km/h</p> `; const daily = weather.daily; let forecastHtml = '<h3>7-Day Forecast</h3><div class="forecast-grid">'; for (let i = 0; i < daily.time.length; i++) { forecastHtml += `<div class="forecast-day"> <div>${daily.time[i]}</div> <div>${daily.temperature_2m_max[i]}° / ${daily.temperature_2m_min[i]}°</div> </div>`; } forecastHtml += '</div>'; document.getElementById('forecast').innerHTML = forecastHtml; }

Step 6: Wire it all together

document.getElementById('search-btn').addEventListener('click', async () => { const city = document.getElementById('city').value.trim(); if (!city) return; try { const location = await getCoordinates(city); const weather = await getWeather(location.lat, location.lon); displayWeather(location, weather); } catch (error) { document.getElementById('current-weather').innerHTML = `<p class="error">${error.message}</p>`; } });

Enhancements to try

Once the basics work, try adding:

Browse more weather APIs in our Weather category to find one that fits your needs.

More Guides