Reuse Icons for Forecast Cards

Task

Give each forecast card an icon based on its own weather condition and day/night code.

Open

Inside the forecast renderer, calculate the night flag and pass it to weatherIconHTML().

Implementation

const night = (midday.weather[0].icon || "").endsWith("n");

return `<article class="forecast-card">
  <div class="day">${index === 0 ? "Today" : parts.day}</div>
  <div class="date">${parts.date}</div>
  <div class="icon">${weatherIconHTML(midday.weather[0].id, night)}</div>
  <div class="temps">${temp(max)}${unitSymbol()} <span class="low">${temp(min)}${unitSymbol()}</span></div>
</article>`;

Using the same helper for current and forecast conditions prevents two different icon-mapping rules from developing. Each card still receives its own condition ID and icon code.

Test

Search for a location with varied forecast conditions. Confirm the forecast cards can show cloud, rain, snow, or clear icons as appropriate.

Expected result

Forecast cards now use the same consistent weather-icon mapping.

Checkpoint

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