3rd done.

emillind · emillind · commit 3306d986da8c · 2016-12-12T23:06:06.000+01:00
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
@@ -22,6 +22,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <style>
 
+	:root {
+		--base: yellow;
+		--spacing: 10px;
+		--blur: 10px;
+	}
+
+	img {
+		padding: var(--spacing);
+		background: var(--base);
+		filter: blur(var(--blur));
+	}
+
+	.hl {
+		color: var(--base);
+	}
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -53,6 +68,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+	function change() {
+		var suffix = this.dataset.sizing || '';
+		document.documentElement.style.setProperty(`--${this.name}`, (this.value+suffix));
+	}
+
+  	const inputs = document.querySelectorAll(`.controls input`);
+	inputs.forEach(input => input.addEventListener('input', change));
   </script>
 
 </body>
