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;
    }

: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));
    }

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);
    }

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>

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));

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 ||'';

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>

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

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

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;
}

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!