03 - CSS Variables

Day 03 - Playing with CSS Variables and JS ✅

Date: 04/29/2020

I loved it! 😍

About HTML

I learned about how to use 02 new tags:

The range input tag, which define a range control. On this case [10, 200]:

<input type="range" min="10" max="200" >

The color input tag, which defines a color picker:

<input id="base" type="color" name="base" value="#ffc600">

About JavaScript

Wes used the CSS Variables to manipulate the HTML tags values.

On the HTML tags, he set the property data-sizing with px unit:

    <input type="range" data-sizing="px">

And he used it to create a suffix, which it's used to specify the unit values:

    const suffix = this.dataset.sizing;

Then he used the setProperty() to set CSS properties and change the variables values using String Template:

    document.documentElement.style
    .setProperty(`--${this.name}`, this.value + suffix);

You can see and to interact with the final result here. 😉

That's all folks! 😃

Thanks WesBos to share this with us! 😊💖

---

written by @vanribeiro.