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() |
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 |
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>';
}
innerHTML, the app calls lucide.createIcons() to replace the <i> placeholders with SVG elements.
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.
Code snippet
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();
}
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.