Claire McCleskey

Sep 8, 2021

2 min read

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

In the previous installment of this series, we created our toggle button. This week, we will address adding the button’s ability to change when toggled and updating a few design elements.

One of the main purposes of a toggle button is that the button should be able to transform when toggled to show the selected state. As of right now, we only have one form of the toggle button created. To do this, we will add some styles to the inner-circlethat will only take effect if the toggle-btn has a class of toggled.

While this is great, it doesn't actually mean our button works. To make it work, we head back to our trust JavaScript file. Our first step will be to give ourselves the ability to grab the elements we will be working with — lightenText, darkenText, and toggleBtn — by their id using document.getElementById. Then, we will add an event listener that will listen for a click on the toggle button. Within this event listener, we tell it that if the class list contains the class toggled, we want to remove it from the list. And if it does not contain the class toggled, we will add it to the list.

I also added some JS to emphasize the selected state’s text.