> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/m20prs/Sky-AI-Forecast/llms.txt
> Use this file to discover all available pages before exploring further.

# Hourly forecast

> How the 24-hour forecast view works, including time formatting, data fields, and weather icons.

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.

<Note>
  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.
</Note>

## Time formatting

The raw `hourly.time` values are ISO 8601 strings (e.g. `"2024-06-15T14:00"`). The app extracts the local hour using:

```js theme={null}
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.

<Tip>
  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.
</Tip>

## 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

```js theme={null}
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();
}
```