project file

alitahir4024 · web-flow · commit bd4b92906c4e · 2020-04-25T17:45:29.000+05:00
diff --git a/82528602_845598082535414_6936156667733234811_n.jpg b/82528602_845598082535414_6936156667733234811_n.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>JS-P3</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <h2>Update CSS variable with JS</h2>
+
+    <div class="controls">
+
+        <label for="spacing">Spacing:</label>
+
+        <input type="range" id="spacing" min="10" max="200" value="10" name="spacing" data-sizing="px">
+
+        <label for="blur">Blur:</label>
+
+        <input type="range" id="blur" name="blur" min="0" max="25" value="10" data-sizing="px">
+
+        <label for="base">Base Color</label>
+
+        <input type="color" name="base" id="base" value="#ffc600">
+
+        <label for="height"> Height </label>
+
+        <input type="range" name="height" id="height" min="10" max="100" data-sizing="vh" value="10">
+
+        <label for="rotate"> Rotate </label>
+
+        <input type="range" name="rotate" id="rotate" min="0" max="360" data-sizing="deg" value="0">
+
+        <label for="radius"> Radius </label>
+
+        <input type="range" name="radius" id="radius" min="0" max="100" data-sizing="px" value="0" >
+
+    </div>
+
+    <img src="82528602_845598082535414_6936156667733234811_n.jpg" alt="">
+
+</body>
+<script>
+
+    var inputs = document.querySelectorAll(".controls input ");
+
+    function handler(){
+        const suffix =this.dataset.sizing || "";
+        document.documentElement.style.setProperty(
+            `--${this.name}`,
+            this.value+suffix
+        );
+    }
+
+    inputs.forEach(input=>input.addEventListener("change",handler));
+    inputs.forEach(input=>input.addEventListener("mousemove",handler));
+
+</script>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,49 @@
+*{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    scroll-behavior: smooth;
+    color: inherit;
+    outline: none;
+}
+
+body{
+    text-align: center;
+    background: #193549;
+    color: white;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 100;
+    font-size: 40px;
+}
+
+:root{
+    --base:#ffc600;
+    --spacing:10px;
+    --blur:10px;
+    --height:10vh;
+    --rotate:0deg;
+    --radius:0px;
+}
+
+img{
+    padding: var(--spacing);
+    background: var(--base);
+    filter: blur(var(--blur));
+    height: var(--height);
+    transform: rotate(var(--rotate));
+    border-radius: var(--radius);
+}
+
+h2{
+    color: var(--base);
+}
+
+.controls{
+    margin-bottom: 50px;
+    margin-top: 20px;
+}
+
+input{
+    width: 100px;
+}
