feat: Update stats whenever form input changes (DenverCoder1#439)

* feat: create all selects

* refactor: use themeSelect from upper scope

* refactor: adjust refresh callback

* feat: add on change event listener to each select

* refactor: move refresh event listeners to `load`

Author: timagixe

src/demo/js/script.js

@@ -220,14 +220,17 @@ const tooltip = {
   },
 };
 
-// refresh preview on interactions with the page
-document.addEventListener("keyup", () => preview.update(), false);
-document.addEventListener("click", () => preview.update(), false);
-
 // when the page loads
 window.addEventListener(
   "load",
   () => {
+    // refresh preview on interactions with the page
+    const refresh = () => preview.update();
+    document.addEventListener("keyup", refresh, false);
+    document.addEventListener("click", refresh, false);
+    [...document.querySelectorAll("select:not(#properties)")].forEach((element) => {
+      element.addEventListener("change", refresh, false);
+    });
     // set input boxes to match URL parameters
     new URLSearchParams(window.___location.search).forEach((val, key) => {
       const paramInput = document.querySelector(`#${key}`);