css variables done

borkson · borkson · commit 7844b1557dd5 · 2016-12-16T18:35:59.000+01:00
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
@@ -1,54 +1,86 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <title>Scoped CSS Variables and JS</title>
+    <meta charset="UTF-8">
+    <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='hl'>JS</span></h2>
 
-  <div class="controls">
-    <label for="spacing">Spacing:</label>
-    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+    <div class="controls">
+        <label for="spacing">Spacing:</label>
+        <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
 
-    <label for="blur">Blur:</label>
-    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+        <label for="blur">Blur:</label>
+        <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
-    <label for="base">Base Color</label>
-    <input type="color" name="base" value="#ffc600">
-  </div>
+        <label for="base">Base Color</label>
+        <input type="color" name="base" value="#ffc600">
+    </div>
 
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+    <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
-  <style>
+    <style>
+         :root {
+            --base: #ffc600;
+            --spacing: 10px;
+            --blur: 10px;
+        }
 
-    /*
+        img {
+            padding: var(--spacing);
+            /*-- analogicznie jak w js $*/
+            background: var(--base);
+            filter: blur(var(--blur));
+        }
+
+        .hl {
+            color: var(--base);
+        }
+        /*
       misc styles, nothing to do with CSS variables
     */
 
-    body {
-      text-align: center;
-    }
+        body {
+            text-align: center;
+        }
+
+        body {
+            background: #193549;
+            color: white;
+            font-family: 'helvetica neue', sans-serif;
+            font-weight: 100;
+            font-size: 50px;
+        }
 
-    body {
-      background: #193549;
-      color: white;
-      font-family: 'helvetica neue', sans-serif;
-      font-weight: 100;
-      font-size: 50px;
-    }
+        .controls {
+            margin-bottom: 50px;
+        }
 
-    .controls {
-      margin-bottom: 50px;
-    }
+        input {
+            width: 100px;
+        }
+    </style>
 
-    input {
-      width:100px;
-    }
-  </style>
+    <script>
+        const inputs = document.querySelectorAll('.controls input');
+        console.log(inputs); // otrzymuje NodeList - wygląda jak tablica, ale nie ma po rozwinięciu _proto w konsoli wszystkich metod tablicowych
 
-  <script>
-  </script>
+        function handleUpdate() {
+            console.log(this.value); //zobaczymy w konsoli konkretną wartość, która aktualnie się zmienia
+            console.log(this.dataset); //atrybut dataset jako objekt
+            console.log(this.name); //pokazuje wartość atrybutu name
+            const suffix = this.dataset.sizing || ''; //zmienna dla suwaka, wskazująca wartość w px lub pustą wartość dla koloru
+
+            document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); //--spacing/or --blur + this.value (bez suffixa nie pokazywałoby wartości w px)
+
+        }
+        inputs.forEach(input => input.addEventListener('change', handleUpdate));
+        inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+    </script>
 
 </body>
+
 </html>
