Prices in your currency

Visitors come from everywhere. A select next to the filters shows every price in EUR, GBP, USD or CHF, using today's rates from the Frankfurter API (public, no key, CORS enabled). The server's prices stay in euros; the conversion is display only. ★☆☆

“Is €12 for a record a lot? What's that in pounds?”

You'll demo (next class): switch to GBP: every price changes, with the right currency symbol and decimals. Switch again: no new request. Reload: the choice is remembered.

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 Frankfurter for today's rates.
A select (EUR, GBP, USD, CHF) in state; prices converted on render.
Prices formatted with Intl.NumberFormat; "free" stays "free".
If the rates fail, the select is hidden and prices stay in euros.

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 https://api.frankfurter.dev/v1/latest?base=EUR&symbols=GBP,USD,CHF, cached for the day.
The chosen currency in state and in localStorage.
Prices formatted with Intl.NumberFormat, not string concatenation.

States

While the rates load, the select is disabled and prices show in euros.
"free" stays "free" in every currency.
A note with the rates' date: "Rates of 2 October".

Errors

If the rates fail, the select is hidden and everything stays in euros.
An unknown currency in localStorage falls back to EUR.

New tool: Intl.NumberFormat with style: "currency".

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

Offline with no cached rates.
A cached rate from yesterday.
Switch currency while the stalls are still loading.

Stretch, if you're done early

Detect a default from navigator.language.
Round to friendly prices (£10.50, not £10.21) and say so.

Stuck? One hint at a time

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

Hint 1

Is the converted price state, or derived from state?

Hint 2

Where should the conversion happen: in card(), or before the data reaches it?

Traps

Open when something behaves strangely

£10.200000000000001.
Prices convert twice after switching back and forth.

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 Frankfurter request is in the Network panel and rates.GBP 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.