drunm kit learned data-keys

Author: cunnellp5

01 - JavaScript Drum Kit/app.js

@@ -0,0 +1,21 @@
+
+
+
+
+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 function from running all together
+   audio.currentTime = 0;// rewind to start
+   audio.play();
+   key.classList.add('playing');
+ }
+function removeTransition(e){
+  if(e.propertyName !== 'transform')
+  return;//skip if its not a transform
+  this.classList.remove('playing')
+}
+
+const keys = document.querySelectorAll('.key');
+keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+window.addEventListener('keydown', playSound);

01 - JavaScript Drum Kit/index-START.html

@@ -57,7 +57,8 @@
   <audio data-key="75" src="sounds/tom.wav"></audio>
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
-<script>
+
+<script type="text/javascript" src="app.js">
 
 </script>
 

01 - JavaScript Drum Kit/index.html

@@ -77,6 +77,7 @@
   keys.forEach(key => key.addEventListener('transitionend', removeTransition));
   window.addEventListener('keydown', playSound);
 
+
 </script>
 
 </body>

01 - JavaScript Drum Kit/style.css

@@ -23,7 +23,7 @@ body,html {
   margin:1rem;
   font-size: 1.5rem;
   padding:1rem .5rem;
-  transition:all .07s;
+  transition:all 0.07s;
   width:100px;
   text-align: center;
   color:white;
@@ -32,7 +32,7 @@ body,html {
 }
 
 .playing {
-  transform:scale(1.1);
+  transform:scale(2.1);
   border-color:#ffc600;
   box-shadow: 0 0 10px #ffc600;
 }