Day 3

wxl387 · wxl387 · commit 53bf1eb80207 · 2019-09-18T00:48:55.000-04:00
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html
@@ -5,7 +5,7 @@
   <title>Scoped CSS Variables and JS</title>
 </head>
 <body>
-  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
+  <h2>Update CSS Variables with <span class='h1'>JS</span></h2>
 
   <div class="controls">
     <label for="spacing">Spacing:</label>
@@ -22,7 +22,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <style>
     :root {
-      --base: #ffc600;
+      --base:yellow;
       --spacing: 10px;
       --blur: 10px;
     }
@@ -33,8 +33,8 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       filter: blur(var(--blur));
     }
 
-    .hl {
-      color: var(--base);
+    .h1 {
+      color:var(--base);
     }
 
     /*
@@ -63,14 +63,17 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     const inputs = document.querySelectorAll('.controls input');
 
     function handleUpdate() {
+      // console.log(this.value);
       const suffix = this.dataset.sizing || '';
-      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+
+      document.documentElement.style.setProperty(`--${this.name}`, this.value +suffix);
+
     }
 
     inputs.forEach(input => input.addEventListener('change', handleUpdate));
     inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
-  </script>
 
+  </script>
 
 </body>
 </html>
diff --git a/README.md b/README.md
@@ -14,3 +14,9 @@
 * degree conversion
 * setInterval(function, timeout) to animate
 
+## Day 3-CSS Controller @*Sept 17 2019*
+* :root -- root element of the document
+* in CSS, var(--some-name); then can be used as --some-name: some_value;
+* .forEach();
+* addEventListener('event',some_function)
+* add suffix e.g 'px' to a value and used in CSS property: documentElement.style.setProperty('target_property', add_some_value);
