Open and Close the Tips Modal

The Tips interface is already in the HTML. Add its interaction in three small steps.

1. Open

tipsOpen.addEventListener("click", () => {
  tipsModal.classList.add("show");
});

Click Tips and verify the existing modal appears.

2. Close

tipsClose.addEventListener("click", () => {
  tipsModal.classList.remove("show");
});

3. Support Escape

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    tipsModal.classList.remove("show");
  }
});

Do not add new markup. The prepared modal already contains its content and close control.

Test

Open Tips, close it with the button, open it again, and close it with Escape. Confirm password output and history remain unchanged.

Checkpoint

Tips is now a real modal interaction with both mouse and keyboard dismissal.