Render the Currency Dropdowns

Open app.js and create renderDropdown(id).

The project generates one button for each entry in currencies instead of maintaining separate hard-coded lists. Start with the renderer:

function renderDropdown(id) {
  $(id).innerHTML = Object.entries(currencies)
    .map(([code, [flag, name]]) => `
      <button class="currency-option" data-code="${code}">
        <span>${flag}</span>
        <strong>${code}</strong>
        <small>${name}</small>
      </button>
    `)
    .join("");
}

Then connect each option to the shared from or to state:

$(id).querySelectorAll(".currency-option").forEach(button => {
  button.onclick = () => {
    if (id === "fromDropdown") from = button.dataset.code;
    else to = button.dataset.code;

    closeMenus();
    update();
  };
});

Add a small closeMenus() helper and call both dropdown renderers once during startup.

Test it

Open a currency selector. You should see the currency flag, code, and name for each entry.

Checkpoint

Click EUR in the Send dropdown and confirm that the selected currency is reflected in the UI state without reloading the page.