[JavaScript 30일 챌린지] : 1일차

---

function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  if(!audio) return;
  audio.currentTime = 0;
  audio.play();
  key.classList.toggle('playing');
  //key.classList.add('playing');
  //key.classList.remove('playing');
};

function removeTransition(e) {
   if(e.propertyName !== 'transform') return;
  this.classList.remove('playing');
}

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);

JavaScript 30일 챌린지 1일차를 완료했다.

 

화면에 박스를 만들고 박스를 눌러 드럽 소리가 나면서 클릭된 박스가 빛이 나면서 커지거나 작아지는 작동을 하는 프로젝트이다.

 

오디오 자료나 사진 등 소스는 제공되고 HTML, CSS코드도 제공된다. 단순하게 JS파트만 작성하면 되는데 영어가 약해서 자세하게 알아 듣기는 어려웠고 코드를 보고 따라하면서 변형을 줘보는 식으로 진행했다.

 

  key.classList.toggle('playing');
  key.classList.add('playing');
  key.classList.remove('playing');

위 코드로 박스를 눌렀을 때 박스에 변형을 줄 수 있었는데 토글은 누르면 박스가 빛이 들어오면서 켜지는 게 고정이 되고 다시 눌렀을 때 원형으로 돌아간다. add는 한 번 누르면 계속 켜져있게 되고 remove는 눌러도 박스에 변형이 없도록 설정할 수 있다

---