Render the Rates Table

Open app.js and create renderRates(query = "").

Filter the currencies object using both code and display name:

javascript

function renderRates(query = "") {
  const q = query.toLowerCase();

  $("ratesBody").innerHTML = Object.entries(currencies)
    .filter(([code, [, name]]) =>
      code.toLowerCase().includes(q) || name.toLowerCase().includes(q)
    )
    .map(([code, [flag, name]]) => `
      <tr>
        <td>
          <span class="flag">${flag}</span>
          <strong>${code}</strong>
          <span class="muted">${name}</span>
        </td>
        <td class="mono">${fmt(rates[code] ?? fallback[code])}</td>
        <td class="green mono">+0.16%</td>
        <td><button class="small-convert" data-c="${code}">Convert →</button></td>
      </tr>
    `).join("");
}

The project already has a search input. Wire it up with:

javascript

$("search").oninput = event => renderRates(event.target.value);

Test it

Open Rates and search for euro or eur.

Checkpoint

The table should shrink to matching currencies while typing, without a page reload.