From 5979bd216e5135f2a26bdc0b74e5764dfe135400 Mon Sep 17 00:00:00 2001 From: Andy Harl Date: Mon, 24 Sep 2018 22:46:53 -0600 Subject: [PATCH 1/5] Solution for Javascript Drum Kit --- 01 - JavaScript Drum Kit/index.html | 85 +++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index.html diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html new file mode 100644 index 0000000000..e8896b74dc --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,85 @@ + + + + + + JS Drum Kit + + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + + \ No newline at end of file From 29d993528b928a14518a2e7ef70ea1d25cf381db Mon Sep 17 00:00:00 2001 From: Andy Harl Date: Mon, 24 Sep 2018 22:51:53 -0600 Subject: [PATCH 2/5] Streamlining solution --- 01 - JavaScript Drum Kit/index.html | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index e8896b74dc..1e4dab45f0 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -64,18 +64,15 @@ const keyCode = ev.which; const keyEl = document.querySelector(`.key[data-key="${keyCode}"]`); const audio = document.querySelector(`audio[data-key="${keyCode}"]`); - if (keyEl !== null && audio !== null) { - keyEl.classList.remove('playing'); - audio.pause(); - audio.currentTime = 0; + if (!audio) return; + audio.currentTime = 0; - keyEl.classList.add('playing'); - audio.addEventListener('ended', () => { - audio.currentTime = 0; - keyEl.classList.remove('playing'); - }) - audio.play(); - } + keyEl.classList.add('playing'); + audio.addEventListener('ended', () => { + audio.currentTime = 0; + keyEl.classList.remove('playing'); + }) + audio.play(); }); From ac1fb6b0a205791098a083e981e9ab706a714570 Mon Sep 17 00:00:00 2001 From: Andy Harl Date: Mon, 24 Sep 2018 23:03:19 -0600 Subject: [PATCH 3/5] remove class based on transition --- 01 - JavaScript Drum Kit/index.html | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 1e4dab45f0..1c27b880de 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -62,18 +62,22 @@ From 5b2b7d01ff51142143b526bd5389477decb83519 Mon Sep 17 00:00:00 2001 From: Andy Harl Date: Mon, 24 Sep 2018 23:05:42 -0600 Subject: [PATCH 4/5] Cleaning up functions --- 01 - JavaScript Drum Kit/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 1c27b880de..dd8e2ceb07 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -60,7 +60,9 @@ + + + \ No newline at end of file