<!--the predefined html code below can be edited.-->
<div class="circle">
click me!
</div>
/*the predefined css code below can be edited.*/
.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;
}
//the predefined javascript code below can be edited.
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;
}
});
