diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..17a1dd2b6d 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,9 +57,7 @@ - +
@@ -15,60 +16,7 @@ + - - -diff --git a/01 - JavaScript Drum Kit/script.js b/01 - JavaScript Drum Kit/script.js new file mode 100644 index 0000000000..1d7bac3c31 --- /dev/null +++ b/01 - JavaScript Drum Kit/script.js @@ -0,0 +1,16 @@ +window.addEventListener('keydown', (e) => { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); + if(!audio) return; // no audio found stop function + audio.currentTime = 0; // rewind to start + audio.play(); + key.classList.add("playing"); +}); + +function removeTransition(e) { + if(e.propertyName !== "transform") return; //skip if it's not transform + this.classList.remove("playing"); +} + +const keys = document.querySelectorAll(".key"); +keys.forEach(key => key.addEventListener("transitionend", removeTransition)); \ No newline at end of file diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..38958ae288 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -3,6 +3,7 @@
+