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

The next element to tackle is a button that allows a user to toggle between darkening and lightening the color. The first thing we’ll need is a container div with a class name of toggle. Within that, we will separate <p>tags for both lightening and darkening. These will both have a class name of toggle-text so that we can style them the same, but they will have different ids so that we can work with them separately with JavaScript: lightenText and darkenText. In between these two divs we will have another div named toggleBtn that contains a div named inner-circle.

Now that the skeletal layout for our toggle tool exists, it’s time to style it into something more recognizable, functional, and user-friendly. Right now, it looks like the image on the left when we want it to look closer to the image on the right.

To accomplish this, we are going to write some CSS for the classes we defined in our last step. One of the most simple but important lines of code we will write is giving our toggle class a display of flex. This makes it so that instead of “Lighten” and “Darken” sitting on top of one another, they will be next to each other horizontally. To “draw” our actual button, we assign properties to the toggle-btn and inner-circle classes, such as a border radius to create their rounded shapes and background color to give assign the contrasting colors. I personally thought the height and width numbers given in the tutorial made a disproportionately large toggle button next to the text, so I customized mine to make it a bit smaller. Now, we have something much closer to what we want our final product to look like.