CodeNewbie Community 🌱

Cover image for Commit13 //#JavaScript30 - Day 3 [CSS Variables w/JS]
Janet Webster
Janet Webster

Posted on • Updated on

 

Commit13 //#JavaScript30 - Day 3 [CSS Variables w/JS]

Photo of CSS Variable website preview


I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!


Today's challenge comes from JavaScript30.

Dealing with a few domestic issues today. Mainly the dryer being broken, so we're having a repairman come over sometime this morning to fix it.

Yesterday I jumped into my JS React course as well, so I ended up publishing twice. But that's just how it's going to be if I have time to both work on my JS30 challenges and my Skillcrush bootcamp's JS React course.

JavaScript30 - Day 3

The purpose of todays challenge is to create 3 variables that the front end user can manipulate. Spacing, Blur, and Base Color.

We will start off with creating the styles.

    :root {
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
    }
Enter fullscreen mode Exit fullscreen mode

:root is the most base level setting for styles. It's the "root", so we are setting up these styles here.

    img {
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }
Enter fullscreen mode Exit fullscreen mode

We can then use the variable created in the :root to set the default padding pixel for the image.

Adding the background, so that within the padding it shows the base color variable.

Finally adding a filter so that we can set the blur variable.

    .hl {
      color: var(--base);
    }
Enter fullscreen mode Exit fullscreen mode

Still working on style, then grabbing the highlighter class to set the color for the "JS" letters.

Now moving on to writing the JavaScript!

  <script>
    const input = document.querySelectorAll('.controls input');

    function handleUpdate() {
      console.log(this.value);
    }

    inputs.forEach(input => input.addEventListener('change', handleUpdate));
  </script>
Enter fullscreen mode Exit fullscreen mode

Our input variable is to connect the script to the HTML. Now the function and the forEach I'm not really understanding fully. It also isn't working in my console the way it is for them. I'm going to look at the solution to see if I see anything different. Nope - still not working, so I'm just going to keep going.

inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
Enter fullscreen mode Exit fullscreen mode

Ideally when this is working, it will show the new value when the change is made. However, we also want the change to be made as we are making it. So we add the 'mouseover' to accomplish this.

const suffix = this.dataset.sizing ||'';
Enter fullscreen mode Exit fullscreen mode

In the handleUpdate function we need to make sure that the spacing and blur have their "px", so we do that by adding the variable above.

Found the issue! It was a really simple mistake, I forgot the "s" on "inputs" for the main variable connecting to the HTML.

  <script>
    const inputs = document.querySelectorAll('.controls input');

    function handleUpdate() {
      // console.log(this.value);
      const suffix = this.dataset.sizing ||'';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }

    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
  </script>
Enter fullscreen mode Exit fullscreen mode

Now let's break down the last line of code written.

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

This connects everything together. Setting the style/property for the name of the CSS variable and this value in addition to the suffix necessary.

Everything appears to be functioning correctly. Now, of course, I want to play with the colors a bit so the defaults are more to my taste.


    /* Attempting to update the slider colors */

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: white;
    }

    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: var(--base);
      margin-top: -1px;
    }

    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #888888;
      box-shadow: -80px 0 0 80px var(--base);
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: var(--base); 
}
input[type="range"]::-moz-range-track {  
  background-color: white;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: var(--base); 
}
input[type="range"]::-ms-fill-upper {  
  background-color: white;
}
Enter fullscreen mode Exit fullscreen mode

It required a lot of code to fully mess with the slider colors, but it was fun!

I also updated the image to one of my photographs from several years back. Enjoy!

GitHub Repo for CSS Variables

Play with the CSS Variables here!

Thoughts? Questions? Comments? HMU below!

Top comments (0)