CodingNic

Dynamic Weather Themes

Connect Weather Icons to Conditions

Dynamic Weather Themes 10 min read

Connect Weather Icons to Conditions

Task

Reuse the same weather-code mapping for current and forecast icons.

File / section

src/utils/weather.js, CurrentWeather.jsx, Forecast.jsx

Change

Keep iconForWeather grouped by OpenWeather ranges: thunderstorm 200–299, drizzle/rain 300–599, snow 600–699, atmosphere 700–799, clear 800, and clouds 801–804.

Why this change matters

One mapping keeps current and forecast icons visually consistent.

Test it

Search conditions that exercise different code ranges and confirm the icon changes.

Checkpoint

Weather icons consistently reflect OpenWeather condition codes.