Update CSS Variables Using JavaScript Project

HuXn-WebDev · HuXn-WebDev · commit 78563d8785af · 2022-09-15T19:39:58.000-07:00
diff --git a/72. Update CSS Variables Using JavaScript/app.js b/72. Update CSS Variables Using JavaScript/app.js
@@ -0,0 +1,12 @@
+const input = document.querySelectorAll(".controls input");
+
+function handleUpdate() {
+  // console.log(this.name);
+  this.name == "base" ? (suppix = "") : (suppix = "px");
+  document.documentElement.style.setProperty(
+    `--${this.name}`,
+    this.value + suppix
+  );
+}
+
+input.forEach((input) => input.addEventListener("change", handleUpdate));
diff --git a/72. Update CSS Variables Using JavaScript/index.html b/72. Update CSS Variables Using JavaScript/index.html
@@ -0,0 +1,36 @@
+<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" />
+    <title>Update CSS</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="controls">
+        <label for="spacing">Spacing:</label>
+        <input
+          type="range"
+          id="spacing"
+          name="spacing"
+          min="10"
+          max="200"
+          value="10"
+        />
+
+        <label for="blur">Blur:</label>
+        <input type="range" id="blur" name="blur" min="0" max="25" value="10" />
+
+        <label for="base">Color:</label>
+        <input type="color" id="base" name="base" value="#ffc600" />
+      </div>
+
+      <img
+        src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80"
+      />
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/72. Update CSS Variables Using JavaScript/style.css b/72. Update CSS Variables Using JavaScript/style.css
@@ -0,0 +1,34 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+:root {
+  --base: #ffc600;
+  --spacing: 10px;
+  --blur: 2px;
+}
+
+.container {
+  text-align: center;
+  font-family: sans-serif;
+  font-size: 20px;
+  margin: 20px;
+}
+
+.controls {
+  margin-bottom: 50px;
+}
+
+img {
+  padding: var(--spacing);
+  background: var(--base);
+  filter: blur(var(--blur));
+  width: 100vh;
+}
+
+input {
+  width: 100px;
+  border: none;
+  background: transparent;
+}
