Completed CSS Variables

tksander · tksander · commit b43559b0b77d · 2017-02-03T17:02:16.000-08:00
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
@@ -65,35 +65,10 @@
       transform: rotate(90deg);
       transition: all 0.5s
       transition-timing-function: cubic-bezier(1, 2.99, 0.58, 1);
-
     }
 
   </style>
   <script>
-    setInterval(tick, 1000)
-    function tick() {
-      const date = new Date();
-      const seconds = date.getSeconds();
-      secTick(date.getSeconds())
-      minuteTick(date.getMinutes())
-      hourTick(date.getHours())
-    }
-    function secTick(sec) {
-      const secondsDegrees = sec * 6;
-      const handSec = document.querySelector('.hand.second-hand');
-      handSec.style.transform = `rotate(${secondsDegrees}deg)`;
-    }
-    function minuteTick(min) {
-      const minDegrees = min * 6;
-      const handMin = document.querySelector('.hand.min-hand');
-      handMin.style.transform = `rotate(${minDegrees}deg)`;
-    }
-    function hourTick(hour) {
-      const hourDegrees = hour * 30;
-      const handHour = document.querySelector('.hand.hour-hand');
-      handHour.style.transform = `rotate(${hourDegrees}deg)`;
-    }
-
   </script>
 </body>
 </html>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
@@ -27,7 +27,9 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     */
 
     body {
-      text-align: center;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
     }
 
     body {
@@ -45,9 +47,35 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     input {
       width:100px;
     }
+
+    :root {
+        --base: #ffc600;
+        --blur: 10px;
+        --padding: 10px;
+    }
+
+    img {
+      background: var(--base);
+      filter: blur(var(--blur));
+      padding: var(--spacing);
+    }
+
+    .hl {
+      color: var(--base);
+    }
   </style>
 
   <script>
+    var inputs = document.querySelectorAll('.controls input');
+
+    function handleUpdate() {
+    debugger
+      const suffix = this.dataset.sizing || '';
+      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>
