Modals and alerts

<div class="p-3">
  <div class="alert alert-success" role="alert">Your changes were saved.</div>
  <div class="alert alert-warning" role="alert">Your trial ends in 3 days.</div>
  <div class="alert alert-danger" role="alert">
    <h4 class="alert-heading h6">Payment failed</h4>
    The card was declined. <a href="#" class="alert-link">Update your card</a>.
  </div>
</div>

<div class="p-3">
  <div class="alert alert-info alert-dismissible fade show" role="alert">
    New lessons were added this week.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
</div>

<div class="p-3">
  <button type="button" class="btn btn-primary" id="notify">Show a message</button>
  <div id="messages" class="mt-3"></div>
</div>
<script>
  let n = 0;
  document.querySelector("#notify").addEventListener("click", () => {
    n++;
    const box = document.createElement("div");
    box.className = "alert alert-success alert-dismissible fade show";
    box.setAttribute("role", "alert");
    box.textContent = `Message number ${n}.`;
    const close = document.createElement("button");
    close.type = "button";
    close.className = "btn-close";
    close.setAttribute("data-bs-dismiss", "alert");
    close.setAttribute("aria-label", "Close");
    box.append(close);
    document.querySelector("#messages").append(box);
  });
</script>

<div class="p-3">
  <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmDelete">Delete account</button>
</div>

<div class="modal fade" id="confirmDelete" tabindex="-1" aria-labelledby="confirmTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="confirmTitle">Delete your account?</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">This deletes your progress and badges. It can't be undone.</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Delete</button>
      </div>
    </div>
  </div>
</div>

<div class="p-3">
  <button type="button" class="btn btn-primary" id="start">Start the quiz</button>
</div>

<div class="modal fade" id="ready" tabindex="-1" aria-labelledby="readyTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-body text-center">
        <h2 class="h5" id="readyTitle">Ready?</h2>
        <p class="mb-0">The quiz starts in <span id="count">3</span>...</p>
      </div>
    </div>
  </div>
</div>
<script>
  document.querySelector("#start").addEventListener("click", () => {
    const modal = bootstrap.Modal.getOrCreateInstance("#ready");
    let left = 3;
    document.querySelector("#count").textContent = left;
    modal.show();
    const timer = setInterval(() => {
      left--;
      document.querySelector("#count").textContent = left;
      if (left === 0) {
        clearInterval(timer);
        modal.hide();
      }
    }, 1000);
  });
</script>

<div class="p-3">
  <button type="button" class="btn btn-success" id="copy">Copy link</button>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="copied" class="toast" role="status" aria-live="polite" aria-atomic="true">
    <div class="toast-body">Link copied to the clipboard.</div>
  </div>
</div>
<script>
  document.querySelector("#copy").addEventListener("click", () => {
    bootstrap.Toast.getOrCreateInstance("#copied").show();
  });
</script>