03 - CSS Variables: remove jQuery deps, refactor to 1 line function

alexrah · alexrah · commit e12b229aef76 · 2022-01-24T23:50:23.000+01:00
diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Scoped CSS Variables and JS</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
@@ -14,68 +15,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     <label for="blur">Blur:</label>
     <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
-    <label for="base">Base Color</label>
-    <input id="base" type="color" name="base" value="#ffc600">
+    <label for="color">Base Color</label>
+    <input id="color" type="color" name="color" value="#ffc600">
   </div>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
-  <style>
-
-    /*
-      misc styles, nothing to do with CSS variables
-    */
-
-    :root {
-      --base: red;
-      --spacing: 10px;
-      --blur: 0;
-    }
-
-    body {
-      text-align: center;
-      background: #193549;
-      color: white;
-      font-family: 'helvetica neue', sans-serif;
-      font-weight: 100;
-      font-size: 50px;
-    }
-
-    .controls {
-      margin-bottom: 50px;
-    }
-
-    input {
-      width:100px;
-    }
-
-    img {
-      padding: var(--spacing);
-      background: var(--base);
-      filter: blur(var(--blur));
-    }
-
-    .hl {
-      color: var(--base);
-      filter: blur(var(--blur));
-    }
-
-  </style>
-
-  <script type="text/javascript">
-
-    const inputs = document.querySelectorAll('input');
-
-    function handleChange(){
-       const sizing = this.dataset.sizing||'';
-       document.documentElement.style.setProperty(`--${this.name}`,this.value + sizing);
-    }
-
-    inputs.forEach(input => input.addEventListener('change',handleChange));
-    inputs.forEach(input => input.addEventListener('mousemove',handleChange));
-
-
-  </script>
+  <script src="main.js"></script>
 
 
 </body>
diff --git a/03 - CSS Variables/main.js b/03 - CSS Variables/main.js
@@ -0,0 +1,18 @@
+/**
+ * Created by ale on 05/01/18.
+ */
+
+window.addEventListener("DOMContentLoaded",function () {
+
+    function getSizing(elem){
+        return elem.dataset.sizing || '';
+    }
+
+    function setCssVar(elem){
+        document.documentElement.style.setProperty(`--${elem.name}`,elem.value + getSizing(elem));
+    }
+
+    document.querySelectorAll('input').forEach(input => {input.addEventListener('input',(e)=>{ setCssVar(e.target) })})
+
+
+});
diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css
@@ -3,10 +3,10 @@
 */
 
 :root {
-    --base-color: red;
+    --color: red;
     --main-font: "Arial", sans-serif;
-    --main-padding: 10px;
-    --main-blur: 10px;
+    --spacing: 10px;
+    --blur: 10px;
 }
 
 body {
@@ -27,9 +27,9 @@ input {
 }
 
 img {
-    background-color: var(--base-color);
-    padding: var(--main-padding);
-    filter: blur(var(--main-blur));
+    background-color: var(--color);
+    padding: var(--spacing);
+    filter: blur(var(--blur));
 
 }
 
