Building a Color Tool With Vanilla HTML, CSS, and JavaScript: Part Two

(You can find part one of this project here.)

Now that we’ve got the basic layout formatted and the slider has the ability to display the change in percentages, it’s time to add the color-changing functionality! Specifically, we want to change the color based on the percentage selected with the slider we just built. To do this, we are going to take in two parameters from the user: the hex code they provide and the percentage from the slider. From there, we will convert our hex value to an RGB value using the convertHexToRGB() function we previously created. Then, we will create a function that will calculate how much we need to add to each R, G, and B value. Once we have that new value, we will convert it back to a hex code by using our previously written convertRGBToHex() function.

However, we need to ensure that any value we get is a valid one. The challenge here is to create a function that makes it so that if a number tries to go above 255 it stays at 255 and if it tries to go below 0 it stays at 0. if statements come in handy here — we can say that if our newHex (the hex + amount) is greater than 255 to return 255, if it is less than 0 to return 0, otherwise, just return the newHex. Alternatively, one could use Math.min and Math.max.

Now that we have made sure our program can figure out how much to change the colors by as well as ensure that these will be valid values regardless of the changes made, it’s time to see it in action and show the altered color! We need to take a few steps to do so: check if the hex is valid, get the altered hex value by calling the alteredColor function we previously wrote, and display the altered hex value in the appropriate box. Now, we can do this!

Next week, I’ll be working on a toggle feature that allows the user to choose if their change is to lighten or darken the color.