Build In-Memory Password History

Build history in memory first. Persistence is intentionally postponed until the list itself is working.

1. Add the state

Near your application state:

let history = [];

Create the update function:

function addHistory(password) {
  history = [password, ...history.filter((item) => item !== password)].slice(0, 5);
  renderHistory();
}

This puts the newest value first, removes duplicates, and limits the list to five.

2. Render the list

Start with a clean render function:

function renderHistory() {
  const list = $("historyList");
  list.innerHTML = "";
}

Then create one row for each password:

history.forEach((password) => {
  const row = document.createElement("div");
  row.className = "history-item";

  const code = document.createElement("code");
  code.textContent = password;

  row.append(code);
  list.append(row);
});

3. Add generated passwords to history

At the end of generatePassword(), after output.textContent is set, call:

addHistory(password);

Test

Generate six or more passwords. Confirm that the newest appears first and only five remain.

Checkpoint

History is now real application state and is rendered into the prepared panel. It is not persistent yet.