Skip to content

Commit 323e877

Browse files
Eric LeeEric Lee
authored andcommitted
Completed 1st Project
1 parent 38a754c commit 323e877

1 file changed

Lines changed: 17 additions & 0 deletions

File tree

01 - JavaScript Drum Kit/index-START.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,23 @@
5959

6060
<script>
6161

62+
63+
function playSound(e) {
64+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
65+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
66+
if(!audio) return;
67+
audio.currentTime = 0;
68+
audio.play();
69+
key.classList.add('playing');
70+
}
71+
72+
function removeTransition(e) {
73+
if(e.propertyName !== 'transform') return;
74+
this.classList.remove('playing');
75+
}
76+
window.addEventListener('keydown', playSound);
77+
const keys = document.querySelectorAll('.key');
78+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
6279
</script>
6380

6481

0 commit comments

Comments
 (0)