commit

vanessamclendon1 · Apr 19, 2019 · b637f3a · b637f3a
1 parent 63775de
commit b637f3a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 85 deletions.
diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -58,7 +58,25 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+function playSound(e){
+  const audio = document.querySelector(`audio[data-key='${e.keyCode}']`);
+  const key = document.querySelector(`.key[data-key='${e.keyCode}']`);
+  if(!audio)
+  return;// stop the program from running
+  audio.currentTime = 0; // rewind to start
+  audio.play();
+  key.classList.add('playing');
+}
 
+function removeTransition(e){
+  if(e.propertyName !== 'transform')
+  retrun;
+  console.log(e.propertyName);
+  this.classList.remove('playing');
+}
+const keys = document.querySelectorAll('.key');
+keys.forEach(key => key.addEventListener('transitioned', removeTransition));
+document.addEventListener('keydown',playSound);
 </script>
 
 

diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
@@ -24,7 +24,7 @@ body,html {
   margin: 1rem;
   font-size: 1.5rem;
   padding: 1rem .5rem;
-  transition: all .07s ease;
+  transition: all .0s ease;
   width: 10rem;
   text-align: center;
   color: white;
@@ -33,7 +33,7 @@ body,html {
 }
 
 .playing {
-  transform: scale(1.1);
+  transform: scale(0.5);
   border-color: #ffc600;
   box-shadow: 0 0 1rem #ffc600;
 }