finished challenge wesbos#3

cindychen5 · cindychen5 · commit b379d1625c9b · 2021-04-15T15:14:56.000-06:00
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
@@ -3,9 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <title>Scoped CSS Variables and JS</title>
+  <link rel="stylesheet" href="style.css">
 </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>
@@ -20,32 +21,8 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
-  <style>
 
-    /*
-      misc styles, nothing to do with CSS variables
-    */
-
-    body {
-      text-align: center;
-      background: #193549;
-      color: white;
-      font-family: 'helvetica neue', sans-serif;
-      font-weight: 100;
-      font-size: 50px;
-    }
-
-    .controls {
-      margin-bottom: 50px;
-    }
-
-    input {
-      width: 100px;
-    }
-  </style>
-
-  <script>
-  </script>
+  <script type="text/javascript" src="script.js"></script>
 
 </body>
 </html>
diff --git a/03 - CSS Variables/script.js b/03 - CSS Variables/script.js
@@ -0,0 +1,9 @@
+const inputs = document.querySelectorAll('.controls input')
+
+function handleUpdate() {
+    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));
diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css
@@ -0,0 +1,35 @@
+:root {
+    --base: #ffc600;
+    --spacing: 10px;
+    --blur: 10px;
+}
+
+img {
+    padding: var(--spacing);
+    background: var(--base);
+    filter: blur(var(--blur));
+}
+
+.h1 {
+    color: var(--base);
+}
+/*
+  misc styles, nothing to do with CSS variables
+*/
+
+body {
+    text-align: center;
+    background: #193549;
+    color: white;
+    font-family: 'helvetica neue', sans-serif;
+    font-weight: 100;
+    font-size: 50px;
+}
+
+.controls {
+    margin-bottom: 50px;
+}
+
+input {
+    width: 100px;
+}
