Weather for the night

The market is outdoors. Add a strip above the vendors: the temperature, the chance of rain and the wind for the evening (the market runs 19:00–01:00, so the hours 19:00 to 00:00), from Open-Meteo, a public weather API that needs no key and sends CORS headers. Different server, different shape of data, same rules. ★★☆

“Do I need a jacket? Does the market close if it rains?”

You'll demo (next class): the strip with six hourly columns, 19:00 to 00:00. Reload: no request, it came from the cache. Turn off Wi-Fi (or DevTools → Offline) with an empty cache: the strip says the forecast isn't available, and the vendors still load.

The core (start in class if you've connected, the minimum for the demo)

Four things, on top of your connected market. They count when they work with chaos on (control page).

One GET to Open-Meteo for Moll de la Fusta: temperature and precipitation probability, hourly, Europe/Madrid.
A strip with 19:00–00:00 of the market evening, read from the parallel arrays.
Loading and error for the strip; a failure never affects the vendor list.
The weather and the stalls load independently: two async functions started one after the other, each rendering its own part when its response arrives.

The full feature (finish at home)

What has to work for the demo next class, not how. The core above is part of it.

Requests

One GET to Open-Meteo for Moll de la Fusta (latitude 41.38, longitude 2.18), hourly temperature, precipitation probability and wind, time zone Europe/Madrid.
The answer cached in localStorage with the time it was fetched; reused for 30 minutes.
The weather request and GET /api/stalls start together; each renders its part as soon as it has it.

States

Loading, error and ready for the strip, independent of the vendor list.
Hours 19 to 00 of the market evening, read from Open-Meteo's parallel arrays.
A one-line verdict from the data: "Dry night, 18 °C" or "Bring a jacket: rain likely after 22:00".

Errors

The weather failing never breaks the vendor list.
A stale cache (older than 30 min) is used if the network fails, labelled "as of 18:05".
A broken cache entry (invalid JSON) is ignored, not fatal.

New tool: Open-Meteo answers with parallel arrays: hourly.time[i], hourly.temperature_2m[i]… Index i is the same hour in every array. Its docs page builds the URL for you.

New tool: Starting two requests without waiting for each other: call two async functions without awaiting the first before starting the second. await Promise.all([…]) waits for both: right when you need both values together, wrong when the vendors shouldn't wait for the weather.

Edge cases (with chaos on, minutes 38–43)

DevTools → Network → Offline, with and without a cached forecast.
Put { into the cache entry by hand (Application panel), reload.
Change the clock? No: change the cache's timestamp to 31 minutes ago, reload.
Block the request (right-click → Block request URL).
Run the page from a phone-sized window.

Stretch, if you're done early

Icons from the weather_code field (WMO codes).
A °C / °F toggle that converts locally, without a new request.
Spare brief 7: prices in the visitor's currency, from another public API.

Stuck? One hint at a time

Network panel first: is the request sent, with what, and what came back? Then a hint.

Hint 1

The response has one array of times and one of temperatures. How do you turn them into one array of hours?

Hint 2

Cache: what do you store besides the data, so you can tell later whether it's too old?

Hint 3

await, await: does the second request start before the first one ends? Does the vendor list have to wait for anything but its own response?

Traps

Open when something behaves strangely

The hours are off by one or two (time zone).
The vendor list waits for the weather to load.
A cached forecast from yesterday shows as today's.
The strip shows NaN °C after the cache was edited by hand.

Before you start

This brief assumes Connect the market is done: api.js works, the stalls come from the API, loading and errors are handled. Then: The Open-Meteo request is in the Network panel with a 200, and hourly.temperature_2m is in the console.

Demo · next class, 3 minutes

Your 3 minutes

The happy path, with the Network panel open next to the page.
Chaos on: the loading state, one failure, and how the page recovers.
One request in code: the call, the status codes you handle, where the state changes.
One bug you hit, and the panel or the message that showed it to you.