Render and Clear History

The finished project keeps the newest conversion first and limits history to 30 entries. Build the renderer around the same stored objects created earlier.

A focused renderer looks like this:

javascript

function renderHistory() {
  const history = read("fx-history");
  const panel = $("historyPanel");

  panel.innerHTML = history.length
    ? history.map(item => `
        <div class="history-row">
          <div>
            <strong>${fmt(item.amount)} ${item.from}</strong>
            <span>→</span>
            <strong>${fmt(item.result)} ${item.to}</strong>
          </div>
          <time>${new Date(item.date).toLocaleString()}</time>
        </div>
      `).join("")
    : `<div class="history-empty">No conversions saved yet.</div>`;
}

Then wire the Clear history button:

javascript

$("clearHistory").onclick = () => {
  write("fx-history", []);
  renderHistory();
};

Test it

Make two conversions, open History, then clear it.

Checkpoint

History should show the newest conversion first, and Clear history should remove all stored rows immediately.