Hourly forecast

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

The list is headed “Next 24 Hours” and contains exactly 24 rows (indices 0–23 of the 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";

This produces zero-padded-free strings such as "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();
}

Get Started

Features

Customization

Reference

What is displayed

How to trigger it

Time formatting

Weather icons

Code snippet

​What is displayed

​How to trigger it

​Time formatting

​Weather icons

​Code snippet

What is displayed

How to trigger it

Time formatting

Weather icons

Code snippet