Drill 20: Trade-off — Modern HTML elements

<details>
  <summary>Do I need an account?</summary>
  <p>Yes. Progress and certificates are tied to your account.</p>
</details>

<dialog id="confirm">
  <form method="dialog">
    <h2>Delete this note?</h2>
    <p>This cannot be undone.</p>
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

<button type="button" data-open="confirm">Delete note</button>

<label for="progress">Course progress</label>
<progress id="progress" value="7" max="12">7 of 12</progress>

<script>
  document.querySelector("[data-open]").addEventListener("click", () => {
    document.getElementById("confirm").showModal();
  });
</script>