-
- A
- clap
-
-
- S
- hihat
-
-
- D
- kick
-
-
- F
- openhat
-
-
- G
- boom
-
-
- H
- ride
-
-
- J
- snare
-
-
- K
- tom
-
-
-
L
-
tink
+
+
+
JS Drum Kit
+
+
+
+
+
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+ document.addEventListener('keyup', pressButton, false);
+ function pressButton(keyEvent) {
+ const keyCode = keyEvent.keyCode;
+ const selectedAudio = allSounds.find((audio) => {
+ return audio.getAttribute('data-key') == keyCode;
+ });
+ const selectedKeys = allKeys.find((key) => {
+ return key.getAttribute('data-key') == keyCode;
+ });
-
+ if (selectedAudio && selectedKeys) {
+ playAudio(selectedAudio, selectedKeys);
+ }
+ }
+
+ function playAudio(audio, key) {
+ audio.currentTime = 0;
+ audio.play();
+ toggleButton(key);
+ }
+
+ function toggleButton(button) {
+ button.classList.add('playing');
+ setTimeout(() => {
+ button.classList.remove('playing');
+ }, 50);
+ }
+ })(window, document);
+
+
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 7a6d27d5bd..6a2a778be7 100644
--- a/02 - JS and CSS Clock/index-START.html
+++ b/02 - JS and CSS Clock/index-START.html
@@ -1,12 +1,10 @@
-
-
-
JS + CSS Clock
-
-
-
-
+
+
+
JS + CSS Clock
+
+
+
- .hand {
- width: 50%;
- height: 6px;
- background: black;
- position: absolute;
- top: 50%;
- }
+
-
+ setInterval(setTime, 1000);
+ setTime();
+ })(window, document);
+
+