<div class="box">BOX</div>
.box {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  display: grid;
  place-items: center;
}
const boxEl = document.querySelector(".box");

// 이벤트(Event, 상황), 핸들러(Handler, 실행할 함수)
// click 이벤트 발생 -> 함수 실행
boxEl.addEventListener("click", function () {
  console.log("clicked!!");

  // 클래스 추가
  boxEl.classList.add("active");
  console.log(boxEl.classList.contains("active")); // true
  
  // 클래스 제거
  boxEl.classList.remove("active");
  console.log(boxEl.classList.contains("active")); // false
});


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.