CodingNic

Application State and Navigation

Add the Currency Data

Application State and Navigation 12 min read

Add the Currency Data

Add the Currency Data

Open app.js.

The HTML already has currency controls, but the starter has no JavaScript data to drive them. Add the project’s currency dictionary and fallback rates at the top of the file.

Use the same data shape as the finished project: each currency maps to a flag and display name, while fallback stores a USD-based reference value.

Add the core declarations:

javascript
const currencies = {
  USD: ["🇺🇸", "US Dollar"],
  EUR: ["🇪🇺", "Euro"],
  GBP: ["🇬🇧", "British Pound"]
};

const fallback = {
  USD: 1,
  EUR: 0.853,
  GBP: 0.731
};

Keep the rest of the currency entries from the project when you build your version.

Why this change matters

The UI should not hard-code every currency option in multiple places. One dictionary can feed the dropdowns, rates table, and Popular Currencies section.

Checkpoint

In the browser console, evaluate currencies.USD and confirm it returns the flag and display name array.