diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 8a4f0d556e..125e199a04 100644
--- 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
new file mode 100644
index 0000000000..75d86d40fd
--- /dev/null
+++ 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));