Create the Weather Icon Mapping

Task

Map OpenWeatherMap condition IDs to the Font Awesome classes already used by the starter.

Open

Add these helpers before displayCurrent().

Implementation

function weatherIconClass(id, isNight = false) {
  if (id === 800) return isNight ? "fa-solid fa-moon" : "fa-solid fa-sun";
  if (id >= 801 && id <= 802) return "fa-solid fa-cloud-sun";
  if (id >= 803 && id <= 804) return "fa-solid fa-cloud";
  if (id >= 200 && id < 300) return "fa-solid fa-cloud-bolt";
  if (id >= 300 && id < 600) return "fa-solid fa-cloud-rain";
  if (id >= 600 && id < 700) return "fa-solid fa-snowflake";
  if (id >= 700 && id < 800) return "fa-solid fa-smog";
  return "fa-solid fa-cloud";
}

function weatherIconHTML(id, isNight = false) {
  return `<i class="${weatherIconClass(id, isNight)}"></i>`;
}

The numeric ranges represent groups of weather conditions. 800 is handled separately so a clear night can use the moon while a clear day uses the sun. Returning HTML lets the helper work for both the main weather icon and forecast cards.

Test

In DevTools, call weatherIconHTML(800, false) and weatherIconHTML(800, true). Confirm the returned strings contain sun and moon classes respectively.

Expected result

Weather data can now be translated into the icon markup expected by the UI.

Checkpoint

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