Add a Custom Confirmation Flow

Use the prepared confirmation modal for destructive actions such as clearing completed tasks or clearing all tasks.

The HTML already provides:

confirm-modal-backdrop
confirm-title
confirm-message
confirm-cancel
confirm-accept

Create a reusable function that receives the action to perform:

javascript

let pendingConfirmation = null;

function openConfirmModal(message, action) {
  document.getElementById("confirm-message").textContent = message;
  pendingConfirmation = action;
  document.getElementById("confirm-modal-backdrop").hidden = false;
}

2. Confirm or cancel

javascript

document.getElementById("confirm-accept").addEventListener("click", () => {
  if (pendingConfirmation) {
    pendingConfirmation();
  }

  pendingConfirmation = null;
  document.getElementById("confirm-modal-backdrop").hidden = true;
});

document.getElementById("confirm-cancel").addEventListener("click", () => {
  pendingConfirmation = null;
  document.getElementById("confirm-modal-backdrop").hidden = true;
});

3. Use it for a destructive action

For example, instead of immediately clearing completed tasks:

javascript

openConfirmModal(
  "Clear all completed tasks?",
  () => {
    tasks = tasks.filter((task) => !task.completed);
    saveTasks();
    renderTasks();
  }
);

Use the same pattern for Clear all.

Checkpoint: Destructive actions ask for confirmation using the prepared modal, and Cancel leaves the task data untouched.

Add a Custom Confirmation Flow

Add a Custom Confirmation Flow

1. Open the confirmation modal

2. Confirm or cancel

3. Use it for a destructive action