From 8d5fc74771447222d31852dc13aad2f80463e2cf Mon Sep 17 00:00:00 2001 From: Kyle McKee Date: Wed, 15 Nov 2017 22:07:41 -0500 Subject: [PATCH] First exercise completed --- 01 - JavaScript Drum Kit/index-START.html | 31 ++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..a350ccd9d6 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -6,8 +6,6 @@ - -
A @@ -59,8 +57,35 @@ + window.addEventListener('keydown', onKeyPress); + + function onKeypress(e) { + const keycode = e.keyCode; + playAudio(keycode); + animateKey(keycode); + } + function playAudio(keycode) { + const audio = document.querySelector(`audio[data-key='${keycode}'`); + if (!audio) return; + audio.currentTime = 0; + audio.play(); + } + function animateKey(keycode) { + const key = document.querySelector(`.key[data-key='${keycode}'`); + key.classList.add('playing'); + } + + const keys = document.querySelectorAll('.key'); + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + + function removeTransition(e) { + if (e.propertyName !== 'transform') return; + const key = e.target; + key.classList.remove('playing'); + } + +