01 done

Stefan Bauckmeier · Stefan Bauckmeier · commit 92b6307293ef · 2016-12-10T18:33:09.000+01:00
diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html
@@ -6,77 +6,85 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
-
   <div class="keys">
     <div data-key="65" class="key">
       <kbd>A</kbd>
       <span class="sound">clap</span>
+      <audio src="sounds/clap.wav"></audio>
     </div>
     <div data-key="83" class="key">
       <kbd>S</kbd>
       <span class="sound">hihat</span>
+      <audio src="sounds/hihat.wav"></audio>
     </div>
     <div data-key="68" class="key">
       <kbd>D</kbd>
       <span class="sound">kick</span>
+      <audio src="sounds/kick.wav"></audio>
     </div>
     <div data-key="70" class="key">
       <kbd>F</kbd>
       <span class="sound">openhat</span>
+      <audio src="sounds/openhat.wav"></audio>
     </div>
     <div data-key="71" class="key">
       <kbd>G</kbd>
       <span class="sound">boom</span>
+      <audio src="sounds/boom.wav"></audio>
     </div>
     <div data-key="72" class="key">
       <kbd>H</kbd>
       <span class="sound">ride</span>
+      <audio src="sounds/ride.wav"></audio>
     </div>
     <div data-key="74" class="key">
       <kbd>J</kbd>
       <span class="sound">snare</span>
+      <audio src="sounds/snare.wav"></audio>
     </div>
     <div data-key="75" class="key">
       <kbd>K</kbd>
       <span class="sound">tom</span>
+      <audio src="sounds/tom.wav"></audio>
     </div>
     <div data-key="76" class="key">
       <kbd>L</kbd>
       <span class="sound">tink</span>
+      <audio src="sounds/tink.wav"></audio>
     </div>
   </div>
 
-  <audio data-key="65" src="sounds/clap.wav"></audio>
-  <audio data-key="83" src="sounds/hihat.wav"></audio>
-  <audio data-key="68" src="sounds/kick.wav"></audio>
-  <audio data-key="70" src="sounds/openhat.wav"></audio>
-  <audio data-key="71" src="sounds/boom.wav"></audio>
-  <audio data-key="72" src="sounds/ride.wav"></audio>
-  <audio data-key="74" src="sounds/snare.wav"></audio>
-  <audio data-key="75" src="sounds/tom.wav"></audio>
-  <audio data-key="76" src="sounds/tink.wav"></audio>
-
 <script>
 
+let keySounds = [];
+const soundElements = document.getElementsByClassName('key');
+Array.prototype.forEach.call(soundElements, function(element) {
+  keySounds[element.dataset.key] = element;
+});
+
+window.addEventListener('keydown', function(event){
+  const soundElement = keySounds[event.keyCode];
+  if (!soundElement) { return };
+
+  const audioElement = soundElement.getElementsByTagName('audio')[0];
+  if (!audioElement) { return };
 
-  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 function from running all together
-    audio.currentTime = 0; // rewind to the start
-    audio.play();
-    key.classList.add('playing');
-  }
-  function removeTransition(e) {
-    if (e.propertyName !== 'transform') return; // skip it if it's not a transform
-    this.classList.remove('playing');
-  }
+  showSoundIsPlayingOn(soundElement);
+  playAudioElement(audioElement)
+});
 
-  const keys = document.querySelectorAll('.key');
-  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
-  window.addEventListener('keydown', playSound);
+function showSoundIsPlayingOn(soundElement) {
+  soundElement.classList.add('playing');
+  soundElement.addEventListener('transitionend', function(event) {
+    if (event.propertyName == 'transform') { return; }
+    event.currentTarget.classList.remove('playing');
+  });
+}
 
+function playAudioElement(audioElement) {
+  audioElement.currentTime = 0;
+  audioElement.play();
+}
 </script>
 
 </body>
