course wesbos#3 finished

Author: Jin Xu

03 - CSS Variables/index-START.html

@@ -48,6 +48,27 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+  const target = document.querySelector('img');
+  const ctrl_bdr = document.getElementById('spacing');
+  const ctrl_blur = document.getElementById('blur');
+  const ctrl_bdrc = document.getElementById('base');
+  
+  function updateStyle(formctrl, attr){
+    let unit = formctrl.hasAttribute('data-sizing') ? formctrl.getAttribute('data-sizing') : '';
+    target.style[attr] = attr === 'filter' ? `blur(${formctrl.value + unit})` : `${formctrl.value + unit}`;
+  }
+
+  window.onload = function(){
+    target.style.borderStyle = 'solid';
+    ((changes) => {
+      for(let ctrlAttr in changes) {
+        updateStyle(changes[ctrlAttr], ctrlAttr);
+        ((attr) => changes[attr].addEventListener('change', function(){
+          updateStyle(this, attr)
+        }))(ctrlAttr)
+      }
+    })({'borderWidth': ctrl_bdr, 'filter': ctrl_blur, 'borderColor': ctrl_bdrc})
+}
   </script>
 
 </body>

readme.md

@@ -5,9 +5,9 @@
 > Folked repo for practice and fun!
 
 1. [x]  ~~JavaScript Drum Kit~~
-2. [x] ~~JS + CSS Clock ~~
-3. [ ] CSS Variables 
-4. [ ] Array Cardio, Day 1 
+2. [x] ~~JS + CSS Clock~~
+3. [x] ~~CSS Variables~~
+4. [ ] Array Cardio, Day 1
 5. [ ] Flex Panel Gallery
 6. [ ] Type Ahead
 7. [ ] Array Cardio, Day 2