Finished the 3rd project

Author: tuxitop

Diff for: Challenges/03 - Playing with CSS Variables and JS/assets/css/style.css

@@ -1,3 +1,9 @@
+:root {
+  --base-color: #f2c94c;
+  --spacing: 10px;
+  --blur: 10px;
+}
+
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
@@ -64,8 +70,9 @@ input[type="range"]::-moz-range-track {
 }
 
 img {
+  background: var(--base-color);
   box-sizing: border-box;
+  filter: blur(var(--blur));
+  padding: var(--spacing);
   width: 100%;
-  border: 10px solid #333;
-  filter: blur(.1rem)
 }

Diff for: Challenges/03 - Playing with CSS Variables and JS/assets/js/script.js

@@ -0,0 +1,11 @@
+const inputs = document.querySelectorAll('input');
+
+function handleUpdate(e) {
+  const suffix = e.target.dataset.metric || '';
+  document.documentElement.style.setProperty(`--${e.target.name}`, e.target.value + suffix);
+}
+
+inputs.forEach(input => {
+  input.addEventListener('change', handleUpdate);
+  input.addEventListener('mousemove', handleUpdate);
+});

Diff for: Challenges/03 - Playing with CSS Variables and JS/index.html

@@ -18,16 +18,16 @@ <h1 class="title">
  <main>
     <section class="controls">
       <label for="spacing">Spacing</label>
-      <input type="range" name="spacing" min="0" max="200" value=10>
+      <input type="range" name="spacing" min="0" max="200" value=10 data-metric="px">
       <label for="blur">Blur</label>
-      <input type="range" name="blur" min="0" max="25" value=10>
-      <label for="color">Base Color</label>
-      <input type="color" name="color" value=#ffc600>
+      <input type="range" name="blur" min="0" max="25" value=10 data-metric="px">
+      <label for="base-color">Base Color</label>
+      <input type="color" name="base-color" value=#ffc600>
     </section>
     <section>
       <img src="assets/images/main-image.jpg" title="Photo by NASA">
     </section>
   </main>
-<!-- <script src="./assets/js/script.js"></script> -->
+<script src="./assets/js/script.js"></script>
 </body>
 </html>