From 03aa020a11a222bd2c5d28d2760eeb4da546a988 Mon Sep 17 00:00:00 2001 From: Thomas Truong Date: Sun, 15 Sep 2019 08:11:37 -0700 Subject: [PATCH] js drumkit --- 01 - JavaScript Drum Kit/index-FINISHED.html | 148 +++++++++---------- 01 - JavaScript Drum Kit/index-START.html | 131 ++++++++-------- 2 files changed, 146 insertions(+), 133 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index 1a16d0997c..f3d7756040 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index-FINISHED.html @@ -1,83 +1,81 @@ - - - JS Drum Kit - - - + + + JS Drum Kit + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- 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..6f0cc96b6d 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,81 @@ - - - JS Drum Kit - - - + + + JS Drum Kit + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
+ - - - + const keys = document.querySelectorAll('.key'); + keys.forEach(key => + key.addEventListener('transitionend', removeTransition) + ); + window.addEventListener('keydown', playSound); + +