Building a Weather Dashboard: Step-by-Step Tutorial
Let's build something real. In this tutorial, you'll create a weather dashboard that shows current conditions and a 5-day forecast for any city in the world. We'll use the Open-Meteo API, which is completely free and requires no API key. By the end, you'll have a functional app you can deploy anywhere.
What we're building
The finished dashboard will have:
A search bar to look up any city
Current temperature, wind speed, and weather condition
A 5-day forecast with daily highs and lows
A "Use my location" button using the browser's geolocation API
Proper error handling for network failures and unknown cities
The HTML structure
Create an index.html file. We'll keep the markup clean and semantic:
function showError(msg) {
const el = document.getElementById('error-msg');
el.textContent = msg;
el.hidden = false;
}
function clearError() {
document.getElementById('error-msg').hidden = true;
}
async function searchCity(name) {
clearError();
try {
const geo = await geocodeCity(name);
const weather = await getWeather(geo.latitude, geo.longitude);
renderCurrent(geo.displayName, weather);
renderForecast(weather);
} catch (err) {
showError(err.message);
}
}
document.getElementById('search-btn').addEventListener('click', () => {
const city = document.getElementById('city-input').value.trim();
if (city) searchCity(city);
});
document.getElementById('city-input').addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
const city = e.target.value.trim();
if (city) searchCity(city);
}
});
document.getElementById('location-btn').addEventListener('click', () => {
clearError();
if (!navigator.geolocation) {
return showError('Geolocation is not supported by your browser.');
}
navigator.geolocation.getCurrentPosition(
async (pos) => {
try {
const weather = await getWeather(pos.coords.latitude, pos.coords.longitude);
renderCurrent('Your Location', weather);
renderForecast(weather);
} catch (err) {
showError(err.message);
}
},
() => showError('Unable to get your location. Please allow location access or search manually.')
);
});
How it all fits together
When the user types a city and clicks Search, we geocode the city name to coordinates, fetch the weather data for those coordinates, and render both the current conditions and the 5-day forecast. The geolocation button skips the geocoding step and feeds the browser's coordinates directly into the weather fetch.
Error handling is layered: the geocoding function throws if no city is found, the weather function throws on network failure, and both are caught in searchCity() which displays the error to the user.
Deploying it
Since this is a static site (three files, no build step), you can deploy it anywhere:
GitHub Pages — Push to a repo, enable Pages in settings. Free and fast.
Netlify — Drag and drop the folder. Done in 10 seconds.
Vercel — Same story. Great for static sites.
No server needed. No environment variables. No API keys to protect. This is one of the beauties of using a keyless API like Open-Meteo.
Going further
You could extend this project by adding hourly temperature charts (using Chart.js), saving favorite cities to localStorage, showing weather icons, or adding unit toggling between Celsius and Fahrenheit. Each of those is a great exercise in working with API data. For more weather-related APIs, check out our Weather API category.
Buy me a coffee