javascript30-01.

 

index.html

⭐️ Point

- 키보드 하나하나마다 고유한 keyCode가 존재한다.(ex. A = 65) 그래서 이 keyCode를 각각의 고유한 data-key로 해당 태그에 지정하게 되면 키보드가 입력 될 때 audio를 play하면 된다.

- window.addEventListener('keydown', function) : 키보드가 입력될때 Event Listener는 window에다가 설정하면 된다.

- 이벤트가 실행될때마다 소리가 재생되게 하고 싶다면  play전에 audio.currentTime = 0을 지정해주면 된다!

- classList : 키보드가 선택될때마다 classList.add로 스타일변화를 주면 된다. 이러한 변화를 키에서 손을 떼면서 사라지게 하고 싶다면 key에 querySelectorAll을 설정하고 key각각에 transitionend라는 이벤트 리스너를 설정하면 된다. 

- key.addEventListener('transitionend' function) : transitionend 이벤트에는 propertyName이라는 속성이 있는데 이는 transition의 이름을 의미한다. 그래서 이 이름일 때, transition이 끝났다고 이벤트가 전달되면 classList.remove()하면 된다.