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

This week I started a tutorial that taught me how to use HTML, CSS, and JavaScript to build a tool that will take a color and either darken it or lighten it depending on the user’s choice. At the beginning of the tutorial, we are given an idea of what we will be building:

The meat of this project is the JavaScript, so I won’t get into too much detail about the HTML and CSS. Both the layout and styling utilized basics in their respective languages to build the form. The form consists of a few classes, such as an input and a container, and styles (such as colors, fonts, padding, and margins) to make them look a bit better. After that, it looked like this:

From there, it was time to move to the JavaScript. The first function written was one that checks to see if the input from the user is a valid hex color. This means we need to check if the user’s input has either three or six numerals, and possibly a “#”. Once we make sure that the hex is valid, we add a keyup event listener so that our project will reassess if a valid hex is present every time we lift a key while typing, and display the color if it is.

Next, we need to convert hex values to RGB values. Since hex values can be only 3 numbers (but represent duplicates of each number), we need to write a function that turns “123” into “112233” for example.

So far, it’s looking pretty good! However, that “0%” is not operational, and it should be. In the code, the 0% lives inside a label with an id of sliderText. The slider itself is an input with slider as its name, id, and class. We will use those ids, because we will be using document.getElementById to get those elements and set those to consts that we will use in later functions. Specifically, an event listener that changes the text of the slider text to the value of the slider.

Next week, I’ll tackle the second half of the project: the color-changing functionality!