<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
    <form method="dialog">
      <section>
        <p>
          <label for="favAnimal">Favorite animal:</label>
          <select id="favAnimal" name="favAnimal">
            <option></option>
            <option>Brine shrimp</option>
            <option>Red panda</option>
            <option>Spider monkey</option>
          </select>
        </p>
      </section>
      <menu>
        <button id="cancel" type="button">Cancel</button>
        <button type="submit">Confirm</button>
      </menu>
    </form>
  </dialog>
  
  <menu>
    <button id="updateDetails">Update details</button>
  </menu>
  
  <script>
    (() => {
      const updateButton = document.getElementById("updateDetails");
      const cancelButton = document.getElementById("cancel");
      const dialog = document.getElementById("favDialog");
      dialog.returnValue = "favAnimal";
  
      function openCheck(dialog) {
        if (dialog.open) {
          console.log("Dialog open");
        } else {
          console.log("Dialog closed");
        }
      }
  
      // Update button opens a modal dialog
      updateButton.addEventListener("click", () => {
        dialog.showModal();
        openCheck(dialog);
      });
  
      // Form cancel button closes the dialog box
      cancelButton.addEventListener("click", () => {
        dialog.close("animalNotChosen");
        openCheck(dialog);
      });
    })();
  </script>
  