diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..a5c3c8921a 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,8 +59,21 @@ - + window.addEventListener("keydown", function (event){ + var sound = document.querySelector(`audio[data-key="${event.keyCode}"]`); + var key = document.querySelector(`.key[data-key="${event.keyCode}"]`) + if(!sound) return; + sound.currentTime = 0; + sound.play(); + key.classList.add('playing'); + }); + var keys = document.querySelectorAll('.key'); + keys.forEach(key => key.addEventListener('transitionend', function(event){ + if(event.propertyName !== 'transform') return; + this.classList.remove('playing'); + })); + + diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 246639f990..e2284b8ec4 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -1,4 +1,4 @@ - +a diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..162196088d 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -1,4 +1,4 @@ - +\ @@ -11,7 +11,10 @@
-
+
@@ -61,13 +64,34 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.5s; }