A weather dashboard that shows current conditions and a 5-day forecast for any city using the OpenWeatherMap API.
Search bar, current weather card, and forecast row.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Dashboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php require_once __DIR__ . '/../promo_banner.php'; ?>
<div class="app">
<form id="search-form">
<input id="city-input" type="text" placeholder="Enter city..." required>
<button type="submit">Search</button>
</form>
<div id="current" class="hidden"></div>
<div id="forecast" class="forecast-row"></div>
<p id="error" class="error hidden"></p>
</div>
<script src="weather.js"></script>
</body>
</html>Create weather.js with async functions for current weather and 5-day forecast.
const API_KEY = 'YOUR_API_KEY_HERE';
const BASE = 'https://api.openweathermap.org/data/2.5';
async function getWeather(city) {
const [cur, fore] = await Promise.all([
fetch(`${BASE}/weather?q=${city}&appid=${API_KEY}&units=metric`).then(r => r.json()),
fetch(`${BASE}/forecast?q=${city}&appid=${API_KEY}&units=metric`).then(r => r.json())
]);
return { cur, fore };
}
function renderCurrent(data) {
document.getElementById('current').innerHTML = `
<h2>${data.name}, ${data.sys.country}</h2>
<img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="">
<p class="temp">${Math.round(data.main.temp)}°C</p>
<p>${data.weather[0].description}</p>
<p>Humidity: ${data.main.humidity}% | Wind: ${data.wind.speed} m/s</p>`;
document.getElementById('current').classList.remove('hidden');
}
function renderForecast(data) {
const daily = data.list.filter(i => i.dt_txt.includes('12:00:00')).slice(0, 5);
document.getElementById('forecast').innerHTML = daily.map(d => `
<div class="day-card">
<p>${new Date(d.dt_txt).toLocaleDateString('en-GB',{weekday:'short'})}</p>
<img src="https://openweathermap.org/img/wn/${d.weather[0].icon}.png" alt="">
<p>${Math.round(d.main.temp)}°C</p>
</div>`).join('');
}
document.getElementById('search-form').addEventListener('submit', async e => {
e.preventDefault();
const city = document.getElementById('city-input').value;
try {
const { cur, fore } = await getWeather(city);
if (cur.cod !== 200) throw new Error(cur.message);
renderCurrent(cur);
renderForecast(fore);
document.getElementById('error').classList.add('hidden');
} catch (err) {
document.getElementById('error').textContent = `Error: ${err.message}`;
document.getElementById('error').classList.remove('hidden');
}
});You now have a live weather dashboard. Add hourly charts with Chart.js or unit toggling (°C / °F) for extra polish.
Spotted a bug, broken code, or something that doesn't look right? Tell us what's off and we'll fix it.