JS Drum Kit

diff --git a/01 - JavaScript Drum Kit/app.js b/01 - JavaScript Drum Kit/app.js new file mode 100644 index 0000000000..38547e64b9 --- /dev/null +++ b/01 - JavaScript Drum Kit/app.js @@ -0,0 +1,30 @@ +"use strict"; +console.log('JS30 Day 1'); +function keyPressHandler(e) { + var audio = document.querySelector("audio[data-key=\"" + e.keyCode + "\""); + var key = document.querySelector(".key[data-key=\"" + e.keyCode + "\""); + playSound(audio); + addTransition(key); +} +function playSound(audio) { + if (!audio) { + return; + } + audio.currentTime = 0; // rewind the audio to the beginning before playing + audio.play(); +} +function addTransition(key) { + if (!key) { + return; + } + key.classList.add('playing'); +} +function removeTransitionHandler(e) { + if (e.propertyName !== 'transform') { + return; + } + this.classList.remove('playing'); +} +window.addEventListener('keydown', keyPressHandler); +var keys = document.querySelectorAll('.key'); +keys.forEach(function (key) { return key.addEventListener('transitionend', removeTransitionHandler); }); diff --git a/01 - JavaScript Drum Kit/app.ts b/01 - JavaScript Drum Kit/app.ts new file mode 100644 index 0000000000..95ab1fdaad --- /dev/null +++ b/01 - JavaScript Drum Kit/app.ts @@ -0,0 +1,41 @@ +"use strict"; + +console.log('JS30 Day 1'); + +interface NodeList { + forEach: (handler: Function) => void; +} + +function keyPressHandler(e) { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"`); + const key = document.querySelector(`.key[data-key="${e.keyCode}"`); + + playSound(audio); + addTransition(key); +} + + +function playSound(audio) { + if (!audio) { return; } + + audio.currentTime = 0; // rewind the audio to the beginning before playing + audio.play(); +} + + +function addTransition(key) { + if (!key) { return; } + + key.classList.add('playing'); +} + + +function removeTransitionHandler(e) { + if (e.propertyName !== 'transform') { return; } + this.classList.remove('playing'); +} + + +window.addEventListener('keydown', keyPressHandler); +const keys: NodeList = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransitionHandler)); diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html deleted file mode 100644 index 1a16d0997c..0000000000 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - JS Drum Kit - - - - - -

- A - clap -

- S - hihat -

- D - kick -

- F - openhat -

- G - boom -

- H - ride -

- J - snare -

- K - tom -

- L - tink -

- -

- - - - - - diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html deleted file mode 100644 index 4070d32767..0000000000 --- a/01 - JavaScript Drum Kit/index-START.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - JS Drum Kit - - - - - -