diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..7203b49288 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -5,6 +5,7 @@ JS Drum Kit + diff --git a/01 - JavaScript Drum Kit/myattempt.js b/01 - JavaScript Drum Kit/myattempt.js new file mode 100644 index 0000000000..ae465e80c3 --- /dev/null +++ b/01 - JavaScript Drum Kit/myattempt.js @@ -0,0 +1,30 @@ +function setUpKeys() { + const keylist = document.querySelectorAll(".key"); + + keylist.forEach((key) => { + key.addEventListener('transitionend', removeTransition); + }); + +} + +function removeTransition(e) { + if (e.propertyName !== 'transform') + return; + + + this.classList.remove('playing'); +} + +function playSound(e) { + const audio = this.document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = this.document.querySelector(`.key[data-key="${e.keyCode}"]`); + + if (!audio) return; + audio.currentTime = 0; + audio.play(); + + key.classList.add('playing'); +} + +setUpKeys(); +window.addEventListener('keydown', playSound); diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 0dcfd00f40..f5b6c1f133 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -38,6 +38,7 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + inventors.filter(item => item.year >= 1500 && item.year < 1600); // Array.prototype.map() // 2. Give us an array of the inventors first and last names diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html index 35783bff72..360982e041 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html @@ -43,6 +43,14 @@