Build Forecast Cards

Task

Group the three-hour entries into daily cards and choose a representative item.

File / section

src/components/Forecast.jsx

Change

Use the existing grouping pattern: const groups = new Map(); data.list.forEach(item => { const p = dateParts(item.dt, data.city.timezone); if (!groups.has(p.date)) groups.set(p.date, []); groups.get(p.date).push(item); });. Then use const days = [...groups.values()].slice(0, 5);.

Why this change matters

The API returns multiple observations per day. Grouping by local date lets the UI show one card per day.

Test it

Confirm that no more than five daily cards appear.

Checkpoint

The raw three-hour list is transformed into five daily groups.

const groups = new Map();
data.list.forEach(item => {
  const p = dateParts(item.dt, data.city.timezone);
  if (!groups.has(p.date)) groups.set(p.date, []);
  groups.get(p.date).push(item);
});

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