CSS variable

Project Description:

In this project we are going to learn how to use CSS variable with javascript.

At first we will create a box whose padding, filter,background-color and border-radious values will be variable values.
Then we will set up input fields for above variables with type='range'.
With the help of javascript we will be able to change the variable values by changing ranges.

Requirements:

You must be familiar input tag and its attributes.
You must know how to use css variables.
You must be familiar with javascript DOM.
You must know how to handle javascript functions with events.

Challenge:

If you want to do it with description and guidelines above, you can try our Editor above.

Project view must look like below in image:

Guides:

First create a container section with fixed height and width.
Now define css variables for container.eg::root { --color:rgb(189, 106, 106); --bord:10px; }
Now use these variables for container.eg: background-color: var(--color);
Set up input fields for border,background-color,spacing,blur with type='range'.
Now, use javascript to handle and change css variables using input field.

If you want to take a challenge don't scroll below

example source code for css variable

HTML


        <section class="control">
            <label for="spacing">Spacing:</label>
            <input type="range" name="spacing" min="10" max="200" value="22" data-sizing="px">
    
            <label for="bord">Border:</label>
            <input type="range" name="bord" min="0" max="25" value="0" data-sizing="px">
    
            <label for="blur">Blur:</label>
            <input type="range" name="blur" min="0" max="25" value="0" data-sizing="px">
    
            <label for="color">color:</label>
            <input type="color" name="color"  value="#223344" >
            </section>
    <section class="content">
    
    
    </section>

CSS

    
        
:root {
    --color:rgb(189, 106, 106);
    --bord:10px;
    --spacing:100px;
    --blur:0px;
}
.content {
    height:200px;
    width:300px;
   
    background-color: var(--color);
    border-radius: 50%;
    border:var(--bord) solid red;
    padding:var(--spacing);
    filter:blur(var(--blur));
}

        const inputs=document.querySelectorAll('.control input ');
        function handleInput(){
            const suffix=this.dataset.sizing || '';
            document.documentElement.style.setProperty(`--${this.name}`,this.value+ suffix );
    
        }
        inputs.forEach(input=>input.addEventListener('change',handleInput));
        inputs.forEach(input=>input.addEventListener('mousmove',handleInput));

PREVIEW:

Challenge-2:

Add extra input field for border-radious.