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
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.