Event Handler

classList

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnsOpenModal = document.querySelectorAll('.show-modal');

const openModal = function () {
  console.log('button clicked');
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};

const closeModal = function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

for (let i = 0; i < btnsOpenModal.length; i++) {
  btnsOpenModal[i].addEventListener('click', openModal);
}

btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);

classList : toggle

player0El.classList.toggle('player--active');
    player1El.classList.toggle('player--active');
    // toggle : it adds the class if it's not there (cf. remove, add)

• 해당 요소가 있으면 없게, 없으면 있게 하는 메서드.
• 예를 들어서, html 파일에 처음 클래스명 설정이 class = 'player01 player-active' / class = 'player00' 이라면, 어떤 이벤트 발생마다 player-active가 있던 곳에는 사라지고 없던 곳에는 붙으면서 css 효과의 전환 등이 발생할 수 있다.

key press

document.addEventListener('keydown', function (e) {
  //console.log(e.key);
  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
    closeModal();
  }
});

템플릿 리터럴

• 백틱 + ${} => 변수

// 템플릿 리터럴
console.log(`I am ${age} years old and currently living in ${city}`);

document.getElementById(`current--${activePlayer}`).textContent =
      currentScore;

비교 연산자로 변수 할당

activePlayer = activePlayer === 0 ? 1 : 0;
    // if the active player is 0, then we want a new active player 1.