<!--predefined html, but editable-->
<div class="circle">
click me!
</div>
/*predefined CSS, but editable*/
.circle {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
border-radius: 50%;
background: crimson;
margin: auto;
margin-top: 50px;
transition-duration: 300ms;
}
//predefined JavaScript, but editable
var circle = document.querySelector(".circle");
var bool = false;
circle.addEventListener('click', function() {
if (!bool) {
circle.style.background = "coral";
bool = true;
} else {
circle.style.background = "crimson";
bool = false;
}
});