Project 3:CSS Variables

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 3 and project 3. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 3 challenge of Wes Bos Javascript30 course.

Here is the final result:

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

CODE

PART 1:HTML

In html part as you can see I've created 3 inputs. The thing to notice here is that I've given name to the input similar to variable names as we will later use them to manipulate variable values. I've created data-sizing variable which will store px. Keep reading to understand why it's needed.

PART 2:CSS

Now we are going to style our project.
Here we have created 3 variables in root. As I said, notice variable names are similar to name of inputs.

PART 3:JAVASCRIPT

Now we will make our project interactive.
The idea is to get all input tags from document, traverse them and call function updateValues when input is clicked or when mouse is moved upon range input to change values. Without mousemove event Listener the function will not take values until range input is stopped at a point.

updateValue function->

 let suffix=this.dataset.sizing||"";
    document.documentElement.style.setProperty(`--${this.name}`,this.value+suffix);

suffix will store the dataset sizing value that is px. This is required as we want to set variable values to somethingpx.
Example- If user sets padding value to 18 then we need to update
--padding variable to 18px. Thus we need to concatenate 18 and string px to achieve this.
Also since image does not have a data-sizing set to it we have set an or condition in suffix initialisation to prevent concatenation of undefined.This can also be achieved by setting data-sizing="" in img but this is not a good method for larger code bases as we'd then need to add data-sizing="" to all the inputs.

Now we will update css value by calling setProperty function of style .of document element ,which is further a part of document ,for name of the input that called the function (same as variable name) to the value of this input(returns value set by user/initial value set by programmer). (Tip: this is a complicated part hence try breaking it and printing on console to get the idea or you can comment below and I'll be happy to help you)
For more details on this part ,read here.

Previous article from this series:

Day 2 Project 2

Here is the working code :github

Things learnt:

1.mousemove event listener.
2.css variables.
3.updating variables from javascript
4.dataset
5.filter property in css (here used to blur image)

Conclusion

That's it for today's project.Next project will be Array Cardio Day 1.

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)