css var & js.html

<!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">
    <title>yoyo</title>
</head>
<body>
    
    <h2>Update CSS variable with <span class="hl">JS</span></h2>
    <div class="controls">
        <label for="spacing">Spacing:</label>
        <input type="range" name="spacing" min="10" max="200" id="" value="10" data-sizing="px">

        <label for="blur">Blur:</label>
        <input type="range" name="blur" min="0" max="25" id="" value="10" data-sizing="px">

        <label for="base">Base color:</label>
        <input type="color" name="base"  value="#ffc600">
    </div>
    <img src="https://picsum.photos/800/500" alt="">


    <style>
        :root{
            --base: #ffc600;
            --blur:10px;
            --spacing:10px;
        }


        img{
            padding: var(--spacing);
            background: var(--base);
            filter: blur(var(--blur));

        }

        .hl{
            color: var(--base);
        }


        body{
            text-align: center;
            background: #193549;
            color: white;
            font-size: 50px;
            font-weight: 100;
        }

        .controls{
            margin-bottom: 50px;
        }


    </style>

    <script>
        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) );
    </script>
    
    <p>
    This is an HTML Website ENdulged with Fsociety!
    Safe Surfing!
    Bonsoir Elliot!
    </p>
</body>
</html>