refactor: Consistent ID naming, redundant return, styling (#443)

Author: DenverCoder1

src/demo/css/style.css

@@ -200,6 +200,7 @@ input:focus:invalid {
 
 .advanced summary {
   padding: 6px;
+  cursor: pointer;
 }
 
 .advanced .parameters {
@@ -304,7 +305,7 @@ input:focus:invalid {
   content: "You must first input a valid username.";
 }
 
-textarea#exportedPhp {
+textarea#exported-php {
   margin-top: 10px;
   width: 100%;
   resize: vertical;

src/demo/index.php

@@ -102,13 +102,13 @@ function gtag() {
                 </select>
 
                 <label for="hide_border">Hide Border</label>
-                <select class="param" id="hide_border" name="hide_border">
+                <select class="param" id="hide-border" name="hide_border">
                     <option>false</option>
                     <option>true</option>
                 </select>
 
                 <label for="border_radius">Border Radius</label>
-                <input class="param" type="number" id="border_radius" name="border_radius" placeholder="4.5" value="4.5" step="0.1">
+                <input class="param" type="number" id="border-radius" name="border_radius" placeholder="4.5" value="4.5" step="0.1">
 
                 <label for="locale">Locale</label>
                 <select class="param" id="locale" name="locale">
@@ -121,7 +121,7 @@ function gtag() {
                 </select>
 
                 <label for="date_format">Date Format</label>
-                <select class="param" id="date_format" name="date_format">
+                <select class="param" id="date-format" name="date_format">
                     <option value="">default</option>
                     <option value="M j[, Y]">Aug 10, 2016</option>
                     <option value="j M[ Y]">10 Aug 2016</option>
@@ -146,11 +146,11 @@ function gtag() {
                                 <option><?php echo $option; ?></option>
                             <?php endforeach; ?>
                         </select>
-                        <button class="plus btn" type="button" onclick="return preview.addProperty()">+</button>
+                        <button class="plus btn" type="button" onclick="preview.addProperty()">+</button>
                     </div>
-                    <button class="btn" type="button" onclick="return preview.exportPhp()">Export to PHP</button>
-                    <button id="clear_button" class="btn" type="button" onclick="return preview.removeAllProperties()">Clear Options</button>
-                    <textarea id="exportedPhp" hidden></textarea>
+                    <button class="btn" type="button" onclick="preview.exportPhp()">Export to PHP</button>
+                    <button id="clear-button" class="btn" type="button" onclick="preview.removeAllProperties()" disabled>Clear Options</button>
+                    <textarea id="exported-php" hidden></textarea>
                 </details>
 
                 <button class="btn" type="submit">Open Permalink</button>

src/demo/js/script.js

@@ -38,17 +38,16 @@ const preview = {
     const copyButton = document.querySelector(".copy-button");
     copyButton.disabled = Boolean(document.querySelector("#user:invalid") || !document.querySelector("#user").value);
     // disable clear button if no added advanced options
-    const clearButton = document.querySelector("#clear_button");
+    const clearButton = document.querySelector("#clear-button");
     clearButton.disabled = !document.querySelectorAll(".minus").length;
   },
 
   /**
    * Add a property in the advanced section
    * @param {string} property - the name of the property, selected element is used if not provided
    * @param {string} value - the value to set the property to
-   * @returns {false} false to prevent the default action
    */
-  addProperty(property, value = "#DD2727FF") {
+  addProperty(property, value = "#EB5454FF") {
     const selectElement = document.querySelector("#properties");
     // if no property passed, get the currently selected property
     const propertyName = property || selectElement.value;
@@ -101,13 +100,11 @@ const preview = {
       // update and exit
       this.update();
     }
-    return false;
   },
 
   /**
    * Remove a property from the advanced section
    * @param {string} property - the name of the property to remove
-   * @returns {false} false to prevent the default action
    */
   removeProperty(property) {
     const parent = document.querySelector(".advanced .parameters");
@@ -120,7 +117,6 @@ const preview = {
     option.disabled = false;
     // update and exit
     this.update();
-    return false;
   },
 
   /**
@@ -138,7 +134,7 @@ const preview = {
   },
 
   /**
-   * Create a key-value mapping of ids to values from all elements in a Node list
+   * Create a key-value mapping of names to values from all elements in a Node list
    * @param {NodeList} elements - the elements to get the values from
    * @returns {Object} the key-value mapping
    */
@@ -154,7 +150,7 @@ const preview = {
           value = value.replace(/[Ff]{2}$/, "");
         }
       }
-      obj[next.id] = value;
+      obj[next.name] = value;
       return obj;
     }, {});
   },
@@ -177,7 +173,7 @@ const preview = {
       .join("\n");
     const output = `[\n${mappings}\n]`;
     // set the textarea value to the output
-    const textarea = document.getElementById("exportedPhp");
+    const textarea = document.getElementById("exported-php");
     textarea.value = output;
     textarea.hidden = false;
   },
@@ -190,7 +186,7 @@ const preview = {
   checkColor(color, input) {
     if (color.length === 9 && color.slice(-2) === "FF") {
       // if color has hex alpha value -> remove it
-      document.getElementById(input).value = color.slice(0, -2);
+      document.querySelector(`[name="${input}"]`).value = color.slice(0, -2);
     }
   },
 
@@ -251,7 +247,7 @@ window.addEventListener(
     });
     // set input boxes to match URL parameters
     new URLSearchParams(window.location.search).forEach((val, key) => {
-      const paramInput = document.querySelector(`#${key}`);
+      const paramInput = document.querySelector(`[name="${key}"]`);
       if (paramInput) {
         // set parameter value
         paramInput.value = val;