Skip to main content

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.

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:
ColumnSource fieldFormat
Timehourly.time[i]Local hour as "H:00" (e.g. "14:00")
Weather iconhourly.weather_code[i]Derived via getWeatherIcon()
Temperaturehourly.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 rangeIconColour
0SunAmber
1 – 3CloudLight blue
4+Cloud-rainBlue

​
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();
}

Build docs developers (and LLMs) love

Get started for freeTalk to us