Building the CSS Variable Booth 🤣

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

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:

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