<!--HTML example-->
<div class="square">
hit me!
</div>
/* CSS example*/
.square {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
border-radius: 0%;
background: red;
margin: auto;
margin-top: 50px;
transition-duration: 100ms;
}
// example javascript
var square = document.querySelector(".square");
var bool = false;
square.addEventListener('click', function() {
if (!bool) {
square.style.background = "coral";
bool = true;
} else {
square.style.background = "crimson";
bool = false;
}
});