Classify Weather into a CSS Theme

Task

Convert the condition ID and icon code into one of the CSS theme classes.

Open

Add applyTheme(data) after the icon helpers.

Implementation

javascript

function applyTheme(data) {
  document.body.className = "";
  const id = data.weather[0].id;
  const icon = data.weather[0].icon || "";
  const night = icon.endsWith("n");

  let theme = "clear";
  if (id >= 200 && id < 300) theme = "storm";
  else if (id >= 300 && id < 600) theme = "rain";
  else if (id >= 600 && id < 700) theme = "snow";
  else if (id >= 801 && id <= 804) theme = "clouds";
  else if (id === 800 && night) theme = "night";

  document.body.classList.add(`theme-${theme}`);
}

The API condition ID selects the main weather family. The icon code supplies the day/night distinction. Clearing the previous body class before adding the new one prevents the old theme from remaining active after a search.

Test

Temporarily call applyTheme(current) after the current JSON response is parsed. Inspect <body> in DevTools and confirm a class such as theme-clear, theme-clouds, theme-rain, or theme-night is applied.

Expected result

The API response now selects the CSS theme that controls the visual atmosphere.

Checkpoint

Before moving on, confirm the expected result in the running app and make sure the browser console has no blocking errors.