...

/

Building the CSS Variable Booth 🤣

Building the CSS Variable Booth 🤣

We'll cover the following...

In case you missed it, below is what we’ll build.

Type any color values within the red boxes, and move the range slider on the top right too!

This is a superb example of updating CSS variables with Javascript and the reactivity that comes with it.

Let’s see how to build this.

The Markup

Here are the necessary components.

  1. A range input
  2. A container to hold the instructions
  3. A section to hold a list of other boxes each containing input fields
widget

The markup turns out to be simple.

Here It is:


<main class="booth">
   <aside class="slider">
     <label>Move this šŸ‘‡ </label>
     <input class="booth-slider" type="range" min="-50" max="50" value="-50" step="5"/>
   </aside>
   
   <section class="color-boxes">
     <div class="color-box" id="1"><input value="red"/></div>
     <div class="color-box" id="2"><input/></div>
     <div class="color-box" id="3"><input/></div>
     <div class="color-box" id="4"><input/></div>
     <div class="color-box" id="5"><input/></div>
     <div class="color-box" id="6"><input/></div>
   </section>

   <footer class="instructions">
     šŸ‘‰šŸ» Move the slider<br/>
     šŸ‘‰šŸ» Write any color in the red boxes 
  </footer>
</main>


Here a few things to point your attention to.

  1. The range input represents values from -50 to 50 with a step value of 5 Also, the value of the range input is the minimum value, -50 If you aren’t sure how the range input works, check it out on w3schools
  2. Note how the section with class .color-boxes contains other .color-box containers. Within these containers are input fields. It is perhaps worth mentioning that the first input has a default value of red.

Having understood the structure of the document, go ahead and style it like so:

widget
  1. Take the .slider and . Instructions containers out of the document flow. Position them absolutely.
  2. Give the body element a sunrise background color and garnish the background with a flower in the bottom left corner
  3. Position the color-boxes container in the
...