add random reset feature to counter sandbox demos

sandbox/index.html

@@ -19,8 +19,33 @@
         margin: 0 auto;
         text-align: center;
       }
+
+      button.reset {
+        display: block;
+        min-width: 5%;
+        margin: 0 auto;
+      }
     </style>
 
+    <script>
+      function randomReset() {
+        return Math.floor(Math.random() * 100);
+      }
+
+      globalThis.document.addEventListener('DOMContentLoaded', () => {
+        const counterJsxResetButton = document.getElementById('counter-jsx-reset');
+        const counterJsxDsdResetButton = document.getElementById('counter-jsx-dsd-reset');
+
+        counterJsxResetButton.addEventListener('click', () => {
+          document.querySelector('sb-counter-jsx').setAttribute('count', randomReset());
+        });
+
+        counterJsxDsdResetButton.addEventListener('click', () => {
+          document.querySelector('sb-counter-dsd-jsx').setAttribute('count', randomReset());
+        });
+      });
+    </script>
+
     <script>
       document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
       ':35729/livereload.js?snipver=1"></' + 'script>')
@@ -89,6 +114,8 @@ <h2>JSX + Light DOM + inferredObservability (has JS)</h2>
       count="5"
     ></sb-counter-jsx>
 
+    <button class="reset" id="counter-jsx-reset">Random Reset</button>
+
     <pre>
       &lt;sb-counter-jsx
         count="5"
@@ -103,6 +130,8 @@ <h2>JSX + DSD + inferredObservability (has JS)</h2>
       count="3"
     ></sb-counter-dsd-jsx>
 
+    <button class="reset" id="counter-jsx-dsd-reset">Random Reset</button>
+
     <pre>
       &lt;sb-counter-dsd-jsx
         count="3"