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

In the last installment, we finished up by adding a toggle button that allows the user to choose if they would like to lighten or darken the color when they change it. Now it is time to add in that functionality and wrap up the project!

We want our code to address two things when the button is toggled: we want to think about what numerical value the user has in the slider and if the user has chosen to lighten or darken the color. To do this, we want our values (where we have slider.value in our code) to be positive or negative where a positive number darkens it and a negative lightens it. One way of doing this is to use a ternary that says if the state is toggled, then make it a negative but if it is not, then make it positive. Now when we use our button, it actually works!

The final piece of this project is a reset when the button is toggled so that when a user makes changes they are being appropriately implemented throughout. To address this, we are going to create a function called reset. Within reset, we are essentially going to redefine all of our values so that they show at 0%, have the current color, etc. First, we want to look at our slider value and change it so that slider.value is 0 and sliderText.innerText is 0%, resetting us to a 0% change. Next, we want to set the background color to whatever the currently selected color is and ensure the label accurately reflects it by setting alteredColor.style.backgroundColor to hexInput.value and alteredColorText.innerText to Altered Color ${hexInput.value}.

However at this point, if we were to change the hex code input, it would only change the input color and not the altered color. To fix this, we simply call the reset() function from above within our function that handles the hex input.

And with that, the project is complete!