The 24-hour forecast view shows weather conditions for each of the next 24 hours, starting from the first entry in the hourly dataset returned by the API.
What is displayed
Each row in the list shows three pieces of information:
| Column | Source field | Format |
|---|
| Time | hourly.time[i] | Local hour as "H:00" (e.g. "14:00") |
| Weather icon | hourly.weather_code[i] | Derived via getWeatherIcon() |
| Temperature | hourly.temperature_2m[i] | Shown in °C, unrounded |
hourly arrays).
How to trigger it
Click the 24h Forecast tab. The view does not load automatically — you must click the tab after a city search has completed.
The tab is hidden until a successful search has been performed. Once visible, clicking it always re-renders the list from the current globalWeatherData object.
Time formatting
The raw hourly.time values are ISO 8601 strings (e.g. "2024-06-15T14:00"). The app extracts the local hour using:
const time = new Date(globalWeatherData.hourly.time[i]).getHours() + ":00";
"0:00", "9:00", and "14:00". The timezone is determined by the timezone=auto parameter in the weather API request, so times reflect the local time at the searched city.
Because the hourly array starts at the beginning of the current day (not the current hour), the first few entries may represent hours that have already passed. Scroll down to find the entries closest to the current time.
Weather icons
Icons follow the same getWeatherIcon() logic used across all views:
| Code range | Icon | Colour |
|---|
0 | Sun | Amber |
1 – 3 | Cloud | Light blue |
4+ | Cloud-rain | Blue |
Code snippet
function show24h() {
const display = document.getElementById('weatherDisplay');
let html = '<div class="forecast-list"><h3>Next 24 Hours</h3>';
for (let i = 0; i < 24; i++) {
const time = new Date(globalWeatherData.hourly.time[i]).getHours() + ":00";
html += `
<div class="forecast-item">
<span>${time}</span>
<span>${getWeatherIcon(globalWeatherData.hourly.weather_code[i])}</span>
<span>${globalWeatherData.hourly.temperature_2m[i]}°C</span>
</div>`;
}
display.innerHTML = html + '</div>';
lucide.createIcons();
}