Added features with CSS and JS

rosmith76 · rosmith76 · commit 6111ac1f4baa · 2017-01-19T13:23:32.000-05:00
Added blur, size and color adjustable features using CSS variables
manipulated by javascript.
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
@@ -22,8 +22,22 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <style>
 
+  :root {
+    --base: #ffc600;
+    --spacing: 10px;
+    --blur: 10px;
+    }
+img {
+  padding: var(--spacing);
+  background: var(--base);
+  filter: blur(var(--blur));
+}
+
+.hl {
+  color: var(--base);
+}
     /*
-      misc styles, nothing to do with CSS variables
+      misc styles, nothing to do with CSS variables. Above are CSS variables.
     */
 
     body {
@@ -48,6 +62,15 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+  const inputs = document.querySelectorAll(`.controls input`);
+
+  function handleUpdate() {
+    const suffix = this.dataset.sizing || ''; //or nothing handles datasets with no value so we don't return null
+    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+  }
+
+  inputs.forEach(input => input.addEventListener('change', handleUpdate));
+  inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
   </script>
 
 </body>
