From a99663c0d140c49fc13f560822a425277447badb Mon Sep 17 00:00:00 2001 From: Aaron Harris Date: Mon, 28 Jan 2019 17:06:30 -0600 Subject: [PATCH] finish day 1 - my implementation --- 01 - JavaScript Drum Kit/index-START.html | 135 +++++++++++++--------- 1 file changed, 78 insertions(+), 57 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..91fe6eb6de 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,87 @@ - - - JS Drum Kit - - - - - -
-
- 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 +
-
- - - - - - - - - + + + + + + + + + - + var keys = document.getElementsByClassName("key"); + for (var i = 0; i < keys.length; i++) { + keys[i].addEventListener('transitionend', function(e) { + e.target.classList.remove('playing'); + }); + keys[i].addEventListener('click', function(e){ + var keyCode = e.currentTarget.getAttribute("data-key") + playSound(keyCode); + }) + } - + function playSound(keyCode){ + var key = document.querySelector(`.key[data-key="${keyCode}"]`); + var soundClip = document.querySelector(`audio[data-key="${keyCode}"]`); + if (key !== null && soundClip !== null){ + key.classList.add('playing'); + soundClip.currentTime = 0; + soundClip.play(); + } + } + +