asap · asap · Oct 21, 2017
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
@@ -21,6 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

  <style>
+    :root {
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img {
+      padding:  var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
+
+    .h1 {
+      color: var(--base);
+    }

    /*
      misc styles, nothing to do with CSS variables
@@ -44,8 +59,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
    }
  </style>

-  <script>
-  </script>
+  <script src="script.js"></script>

 </body>
 </html>
diff --git a/03 - CSS Variables/script.js b/03 - CSS Variables/script.js
@@ -0,0 +1,11 @@
+const inputs = document.querySelectorAll('.controls input');
+
+const handleUpdate = (e) => {
+  const suffix = e.target.dataset.sizing || '';
+  const name = e.target.name;
+  const value = e.target.value;
+  document.documentElement.style.setProperty(`--${name}`, value + suffix);
+};
+
+inputs.forEach(input => input.addEventListener('change', handleUpdate));
+inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));