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

# Current weather

> What the current weather view displays and how temperature, humidity, and weather icons are rendered.

The current weather view is the default view shown immediately after a successful city search. It gives you a snapshot of conditions right now: the city name, temperature, and humidity.

## What is displayed

| Element      | Source field                   | Notes                                       |
| ------------ | ------------------------------ | ------------------------------------------- |
| City name    | `currentCityDisplay`           | Formatted as "Name, Country"                |
| Temperature  | `current.temperature_2m`       | Rounded to the nearest integer, shown in °C |
| Humidity     | `current.relative_humidity_2m` | Shown as a percentage                       |
| Weather icon | `current.weather_code`         | Derived via `getWeatherIcon()`              |

Temperature is always displayed in **Celsius**. There is no unit toggle.

## How to trigger it

The current weather view loads automatically after a successful city search — `showCurrent()` is called at the end of the click handler once forecast data has been fetched. You can also return to it at any time by clicking the **Current** tab.

## Weather icon logic

Icons are chosen based on the WMO weather interpretation code returned by the API:

| Code range | Icon       | Colour     | Meaning                         |
| ---------- | ---------- | ---------- | ------------------------------- |
| `0`        | Sun        | Amber      | Clear sky                       |
| `1` – `3`  | Cloud      | Light blue | Mainly clear to overcast        |
| `4`+       | Cloud-rain | Blue       | Precipitation or severe weather |

```js theme={null}
function getWeatherIcon(code) {
    if (code === 0) return '<i data-lucide="sun" style="color: #ffb703"></i>';
    if (code <= 3) return '<i data-lucide="cloud" style="color: #8ecae6"></i>';
    return '<i data-lucide="cloud-rain" style="color: #007bff"></i>';
}
```

Icons are rendered using the [Lucide](https://lucide.dev) icon library. After setting `innerHTML`, the app calls `lucide.createIcons()` to replace the `<i>` placeholders with SVG elements.

<Info>
  WMO weather codes above 3 cover a wide range of conditions — from drizzle (code 51) to thunderstorms (code 95+). All of these display the same cloud-rain icon in the current version of the app.
</Info>

## Code snippet

```js theme={null}
function showCurrent() {
    const display = document.getElementById('weatherDisplay');
    display.innerHTML = `
        <div style="animation: fadeIn 0.5s ease-out;">
            <p style="color: #888; font-size: 0.8rem; margin-bottom: 0;">${currentCityDisplay}</p>
            <h1 style="font-size: 3.5rem; margin: 5px 0;">${Math.round(globalWeatherData.current.temperature_2m)}°C</h1>
            <p>Humidity: ${globalWeatherData.current.relative_humidity_2m}%</p>
        </div>`;
    lucide.createIcons();
}
```

<Note>
  `showCurrent()` reads from the global `globalWeatherData` object. This object is populated by the weather API fetch in the click handler, so this function must only be called after a successful search.
</Note>