feat(html): Add example of <dialog> (#2212)

* dialog

* Update live-examples/html-examples/interactive-elements/dialog.html

---------

Co-authored-by: Queen Vinyl Da.i'gyu-Kazotetsu <[email protected]>
Co-authored-by: Brian Thomas Smith <[email protected]>

live-examples/html-examples/interactive-elements/css/dialog.css

@@ -0,0 +1,18 @@
+.card {
+  text-align: center;
+  width: 80%;
+  background-color: bisque;
+  padding: 1em;
+  font-weight: bold;
+}
+
+dialog::backdrop {
+  background-color: grey;
+}
+
+.won {
+  font-weight: bold;
+  color: deeppink;
+  font-size: 1.3em;
+  text-align: center;
+}

live-examples/html-examples/interactive-elements/dialog.html

@@ -0,0 +1,13 @@
+<div class="card">
+  <p class="question">Would you like to try your luck in a throw of the dice?</p>
+  <p>Everyone has a chance to win.</p>
+  <button id="showDialogBtn">Yes, let's give it a try</button>
+</div>
+
+<dialog id="favDialog">
+  <form method="dialog">
+    <p class="won">You have won! Congratulations!</p>
+    <p class="lost">I am sorry to say, but you have lost...</p>
+    <button id="closeBtn">Close dialog</button>
+  </form>
+</dialog>

live-examples/html-examples/interactive-elements/js/dialog.js

@@ -0,0 +1,24 @@
+const showDialogBtn = document.getElementById('showDialogBtn');
+const favDialog = document.getElementById('favDialog');
+
+function rollDice() {
+  return Math.floor(Math.random() * 3) === 0;
+}
+
+function changeHidden(className, hidden) {
+  const elements = document.getElementsByClassName(className);
+  for (const e of elements) {
+    if (hidden) {
+      e.classList.add('hidden');
+    } else {
+      e.classList.remove('hidden');
+    }
+  }
+}
+
+showDialogBtn.addEventListener('click', () => {
+  const won = rollDice();
+  changeHidden('won', !won);
+  changeHidden('lost', won);
+  favDialog.showModal();
+});

live-examples/html-examples/interactive-elements/meta.json

@@ -8,6 +8,17 @@
       "type": "tabbed",
       "height": "tabbed-shorter"
     },
+    "dialog": {
+      "exampleCode": "./live-examples/html-examples/interactive-elements/dialog.html",
+      "cssExampleSrc": "./live-examples/html-examples/interactive-elements/css/dialog.css",
+      "jsExampleSrc": "./live-examples/html-examples/interactive-elements/js/dialog.js",
+      "fileName": "dialog.html",
+      "title": "HTML Demo: <dialog>",
+      "type": "tabbed",
+      "defaultTab": "html",
+      "tabs": "html,css,js",
+      "height": "tabbed-standard"
+    },
     "menu": {
       "exampleCode": "./live-examples/html-examples/interactive-elements/menu.html",
       "cssExampleSrc": "./live-examples/html-examples/interactive-elements/css/menu.css",