From e647442f4a2183f04864cbf45083518fcee978c0 Mon Sep 17 00:00:00 2001 From: DevOM Date: Mon, 31 May 2021 00:00:39 +0530 Subject: [PATCH] After solving click continuous bug in Lesson 1 --- 01 - JavaScript Drum Kit/index-FINISHED.html | 146 +++++++++---------- 01 - JavaScript Drum Kit/index-START.html | 114 +++++++-------- 2 files changed, 126 insertions(+), 134 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index 1a16d0997c..c9ca2fbd49 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index-FINISHED.html @@ -1,83 +1,81 @@ - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom + + + JS Drum Kit + + + +
+
+ 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 playSound(e) { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`div[data-key="${e.keyCode}"]`); + if (!audio) return; + key.classList.add("playing"); + audio.currentTime = 0; + audio.play(); + } - + const keys = Array.from(document.querySelectorAll(".key")); + keys.forEach((key) => + key.addEventListener("transitionend", removeTransition) + ); + window.addEventListener("keyup", playSound); + + diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..4f2b8ebfc2 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,60 @@ - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride + + + JS Drum Kit + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - + + + + + + + + + - + +