I recently wrapped up the initial iteration of my very first JS web application. While I found the crossover between my backend database and my frontend display to be powerful and intriguing, what really excited me was the styling and interactivity of the application. I wanted everything to be sleek, simple, and responsive. One such example can be found in the buttons I included in the header of the application, seen in the top-left and top-right here:

The leaf button and door button, when clicked, render a form for creating a new plant or new room, respectively. My goal was to have the icon change from its initial green color to a contrasting orange when the mouse is hovering over the icon and also when the corresponding form is open, like this:

Accomplishing this is actually quite simple. Since I already had functional buttons rendering their matching form, all I had to do was find a way to change the image displayed upon certain DOM events, specifically on mouse click and on mouse hover.

My first step was to add both green and orange versions of my button icons into my application's local file structure. An external source can also work for this.

In my .html file, I added a <div> with a class green-leaf to the leaf's <button> tag and a <div> with a class green-door to the door's <button> tag.

<button id="leaf-button"><div class="green-leaf"></div></button>

The green- classes would act a sort of default state for the divs within the buttons.

In my .css file, I add the following lines:

.green-leaf {
  content: url("../images/green-leaf.png");
}

.orange-leaf {
  content: url("../images/orange-leaf.png");
}

.green-leaf:hover {
  content: url("../images/orange-leaf.png");
}

.green-door {
  content: url("../images/green-door.png");
}

.orange-door {
  content: url("../images/orange-door.png");
}

.green-door:hover {
  content: url("../images/orange-door.png");
}

Now, when an element has a class of green-leaf, its content will be sourced from the corresponding url which directs to the local image file of a green leaf. When the class is changed to orange-leaf, the content will be changed to the url directing to the local image file of an orange leaf. This content change also takes place when the button for a unopened form (depicted by a green icon) is hovered over with the mouse.

Now all that's left would be to add JS event listeners onto the elements in question. This is also very straight-forward. A very basic example would be as such:

//grab the div containing the image

let leaf = document.querySelector("#leaf-button div")


//add an event listener to the leaf with an anonymous function

leaf.addEventListener("click", function(){
  leaf.classList.toggle("green-leaf")
  leaf.classList.toggle("orange-leaf")
}

Now every time the button is clicked, it will alternate between having a class of green-leaf or orange-leaf, applying different CSS rules in the process.