Day 3 challenge added

shubhendrapatel · shubhendrapatel · commit e3bf73092df6 · 2025-01-02T15:27:47.000+05:30
diff --git a/README.md b/README.md
@@ -3,9 +3,10 @@ visit this [link](https://shubhendrapatel.github.io/JavaScript-30/) for showcase
 
 | Row 1         | Row2          | Row3        |
 | ------------- | ------------- |-------------|
+
 |- [x] Challange 1 | - [ ] Challange 11 | - [ ] Challange 21|
 |- [x] Challange 2 | - [ ] Challange 12 | - [ ] Challange 22|
-|- [ ] Challange 3 | - [ ] Challange 13 | - [ ] Challange 23|
+|- [x] Challange 3 | - [ ] Challange 13 | - [ ] Challange 23|
 |- [ ] Challange 4 | - [ ] Challange 14 | - [ ] Challange 24|
 |- [ ] Challange 5 | - [ ] Challange 15 | - [ ] Challange 25|
 |- [ ] Challange 6 | - [ ] Challange 16 | - [ ] Challange 26|
diff --git a/challenge-3-css-variables/index.html b/challenge-3-css-variables/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Blur The Image</title>
+  </head>
+  <body>
+    <h1>Update CSS variables with <span class="js">JS</span></h1>
+
+    <div class="controls">
+      <label for="spacing">Spacing:</label>
+      <input
+        type="range"
+        value="10"
+        max="200"
+        data-sizing="px"
+        name="spacing"
+      />
+
+      <label for="blur">Blur:</label>
+      <input type="range" value="10" max="200" data-sizing="px" name="blur" />
+
+      <label for="base-color">Base Color</label>
+      <input type="color" name="base-color" value="#07a872" />
+    </div>
+
+    <img src="https://picsum.photos/500/500" alt="dummy image" />
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/challenge-3-css-variables/script.js b/challenge-3-css-variables/script.js
@@ -0,0 +1,22 @@
+(function () {
+  inputs = document.querySelectorAll("input");
+
+  inputs.forEach((input) => {
+    input.addEventListener("change", handleChanges);
+    input.addEventListener("mousemove", handleChanges);
+  });
+
+  function handleChanges() {
+    if (this.value === this.dataset.last_value) {
+      return;
+    }
+    const suffix = this.dataset.sizing || "";
+
+    document.documentElement.style.setProperty(
+      `--${this.name}`,
+      this.value + suffix
+    );
+
+    this.dataset.last_value = this.value;
+  }
+})();
diff --git a/challenge-3-css-variables/style.css b/challenge-3-css-variables/style.css
@@ -0,0 +1,35 @@
+:root {
+    --base-color: #07a872;
+    --spacing: 10px;
+    --blur: 10px;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    height: 100vh;
+    width: 100vw;
+
+    background: radial-gradient(circle, #9b1414 21%, #09203f 100%);
+    color: white;
+}
+
+h1 .js {
+    color: var(--base-color);
+}
+
+.controls {
+    margin-bottom: 20px;
+}
+
+img {
+    padding: var(--spacing);
+    background-color: var(--base-color);
+    filter: blur(var(--blur));
+}
