-
- A
- clap
-
-
- S
- hihat
-
-
- D
- kick
-
-
- F
- openhat
-
-
-
G
-
boom
+
+
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
-
- H
- ride
-
-
- J
- snare
-
-
- K
- tom
-
-
- L
- tink
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+ const keys = Array.from(document.querySelectorAll('.key'));
+ keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+ window.addEventListener('keydown', playSound);
+
+
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..6099471b80 100644
--- a/01 - JavaScript Drum Kit/index-START.html
+++ b/01 - JavaScript Drum Kit/index-START.html
@@ -1,66 +1,90 @@
+
-
-
JS Drum Kit
-
+
+
JS Drum Kit
+
+
-
-
- A
- clap
-
-
- S
- hihat
-
-
- D
- kick
-
-
- F
- openhat
-
-
-
G
-
boom
+
+
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
-
- H
- ride
-
-
- J
- snare
-
-
- K
- tom
-
-
- L
- tink
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ function removeTransition(e) {
+ if (e.propertyName !== 'transform') return;
+ e.target.classList.remove('playing');
+ }
+ 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');
+ }
+ const keys = Array.from(document.querySelectorAll('.key'));
+ keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+ window.addEventListener('keydown', playSound);
+
+