이 작은 프로젝트들은 자바스크립트 30이라는 사이트에서 자료를 얻을 수 있고 그대로 실행할 수 있습니다!
JavaScript 30
Build 30 things with vanilla JS in 30 days with 30 tutorials
javascript30.com
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.add("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);사용된 자바 스크립트 코드 블럭이다.
이번 프로젝트의 목적은
1. 키보드를 입력했을 때 드럼 소리가 나오게 하는 것!
2. 각자의 키보드를 입력할 때는 고유의 키코드라는게 있고 숫자로 반환된다.
3. 키보드를 클릭하면 키코드 값을 받고, 그것을 audio와 key라는 변수에 저장한다.
4. 만약에 audio 태그에 없는 data-key값일 경우 return으로 반환한다.
5. 그리고 key라는 태그에 playing이라는 class를 추가한다.
6. e.propertyName이 transform
7. 키라는 클래스의 모든 값들을 keys라는 변수에 담고
8. e.propertyName이 "transform"을 반환할 때, playing이라는 classList를 삭제한다.
9. 그 후에 클래스에 remove함수를 이용해서 playing을 삭제한다.
10. keys라는 변수에 key라는 클래스를 가지고 있는 모든 태그를 담고
11. 키를 눌렀을 경우 transitionend라는 이름을 가진 태그를 removeTransition 합니다.
12. 화면에서 key down을 했을 때 플레이 사운드를 가진다.
- 내가 잘 모르는 것들.
currentTime, play, propertyName, querySelectorAll, forEach문의 애로우 펑션, addEventListener
정리하자!!!
으아 프로세스를 정리해봤는데 정신없다.