<!--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; } });