Render History · Build a calculator with vanilla JavaScript

Task

Render the calculator’s history state into the prepared history panel.

Open

Open:

js/history.js

Use the history container already provided by the starter UI.

Add the renderer

javascript

function renderHistory(items, container) {
  container.innerHTML = '';

  items.forEach((item) => {
    const entry = document.createElement('button');
    entry.type = 'button';
    entry.className = 'history-item';

    entry.innerHTML = `
      <span class="history-time">
        ${new Date(item.timestamp).toLocaleTimeString()}
      </span>
      <span class="history-expression">
        ${item.expression}
      </span>
      <strong>= ${item.result}</strong>
    `;

    entry.dataset.result = item.result;
    container.appendChild(entry);
  });
}

Then call the renderer after a calculation changes history:

javascript

renderHistory(calculator.state.history, historyContainer);

Use the actual history container variable from your starter project.

Test

Perform several calculations:

8 + 2 =
7 × 6 =
95 ÷ 3 =

The newest calculation should appear at the top.

Refresh the calculation several times and confirm that each completed calculation creates one history entry.

Checkpoint

The prepared history panel now reflects the calculator’s history state.