Fixes blur variable and adds JS solution

Author: dustinleer

03 - CSS Variables/scripts.js

@@ -0,0 +1,15 @@
+const inputs = document.querySelectorAll('.controls input');
+
+function handleUpdate(params) {
+    // console.log(this.value);
+    
+    const suffix = this.dataset.sizing || '';
+    // console.log(suffix);
+
+    // console.log(this.name);
+    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+}
+
+inputs.forEach(input => input.addEventListener('change', handleUpdate));
+inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+

03 - CSS Variables/style.css

@@ -10,13 +10,19 @@
 img {
     padding: var(--spacing);
     background: var(--base);
-    filter: blur(--blur);
+    filter: blur(var(--blur));
 }
 
 .hl {
     color: var(--base);
 }
 
+#base {
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+
 body {
     text-align: center;
     background: #193549;