Render the Favorites View

Create renderFavorites() and use the stored pair keys to create cards in #favoritesGrid.

The rendering pattern is intentionally small:

javascript

function renderFavorites() {
  const favorites = read("fx-favorites");
  const grid = $("favoritesGrid");

  grid.innerHTML = favorites.map(pair => {
    const [fromCode, toCode] = pair.split("/");
    return `
      <article class="favorite-card panel">
        <div>
          <strong>${currencies[fromCode][0]} ${fromCode} / ${currencies[toCode][0]} ${toCode}</strong>
          <small>1 ${fromCode} = ${fmt(rate(fromCode, toCode))} ${toCode}</small>
        </div>
        <div>
          <button class="outline" data-use="${pair}">Convert</button>
          <button class="outline" data-remove="${pair}">Remove</button>
        </div>
      </article>
    `;
  }).join("");
}

Then attach the two actions: data-use restores the pair and switches to Convert; data-remove calls toggleFavorite.

Test it

Save two different pairs and open Favorites.

Checkpoint

The Favorites view shows the saved pair, its current rate, and actions to reuse or remove it. The empty message appears when the list is empty.