Render the Five-Day Forecast

Task

Convert each grouped day into the prepared forecast-card markup.

Open

Replace the temporary log in displayForecast() with the following code, then call displayForecast(forecast) after displayCurrent(current) in fetchWeather().

Implementation

javascript

const days = [...byDay.values()].slice(0, 5);

$("forecastGrid").innerHTML = days.map((items, index) => {
  const midday = items.reduce((best, x) =>
    Math.abs(new Date(x.dt * 1000).getUTCHours() - 12) <
    Math.abs(new Date(best.dt * 1000).getUTCHours() - 12) ? x : best,
    items[0]
  );

  const parts = getLocalDateParts(midday.dt, data.city.timezone);
  const min = Math.min(...items.map(x => x.main.temp_min));
  const max = Math.max(...items.map(x => x.main.temp_max));
  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>`;
}).join("");

Then, after the current renderer:

javascript

displayCurrent(current);
displayForecast(forecast);

The midday entry gives the card a stable representative condition. The daily high and low are calculated from every entry in the group rather than relying on one three-hour snapshot. innerHTML is safe here because the values come from the weather API and the structure is fixed by the course implementation.

Test

Search for several cities. Confirm that five cards appear with a day, date, icon, high, and low. The first card should say Today.

Expected result

The dashboard now shows a live five-day forecast.

Checkpoint

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