Clear and Restore History

Task

Let users clear history and click a previous calculation to restore its result.

Open

Open:

js/calculator.js

Add:

clearHistory() {
  this.state.history = [];
}

Then in js/history.js, listen for clicks on history entries.

historyContainer.addEventListener('click', (event) => {
  const entry = event.target.closest('.history-item');

  if (!entry) {
    return;
  }

  calculator.state.current = entry.dataset.result;
  calculator.state.justCalculated = true;
  updateDisplay();
});

Connect the History Clear control in js/ui.js:

if (action === 'clear-history') {
  calculator.clearHistory();
  renderHistory(calculator.state.history, historyContainer);
}

Test

Create several calculations.

Then:

1. Click a history entry.
2. Confirm its result appears on the main display.
3. Create another calculation.
4. Press Clear History.
5. Confirm the history panel is empty.

Checkpoint

Users can review previous calculations, restore a result, and clear the history collection.