Day 1 of JavaScript30

Solved the first challenge from Wes Bos “JavaScript30”.

I tried to solve it my own way first and then I looked at Wes Bos solution and refactored it a bit in a similar style.
However I didn’t implement his solution and kept mine as I think its interesting with different approaches to the same problem and also compare which solution are the cleanest and best performing.

Alternative Solution:
I made this alternative solution after I made my first solution just to check if it would make the code cleaner/better performing but I decided that I prefer my original solution you will find at the bottom of this article.

  var audioTags = document.querySelectorAll("audio");
  var keyTags = document.querySelectorAll(".key");
  function playSound(e){
    // borrowing methods from the Array prototype and send in our nodelist as a argument.
    Array.prototype.forEach.call(audioTags,function(audioTag){
      if (audioTag.getAttribute("data-key") == e.keyCode){
        audioTag.currentTime = 0;
        audioTag.play();
      }
    });
    // borrowing methods from the Array prototype and send in our nodelist as a argument.
    Array.prototype.forEach.call(keyTags,function(keyTag){
      if (keyTag.getAttribute("data-key") == e.keyCode){
        keyTag.classList.add('playing');
        keyTag.addEventListener("transitionend", removeTransition);
      }
    });
  }
  function removeTransition(event){
    event.target.classList.remove('playing');
  }
  window.addEventListener("keydown", playSound);

My final solution.
This solution avoid setting an event listener on every single key. This solution would therefor make a big difference if it was piano instead of a drumkit as it would make a big difference to have event 88 eventlisteners vs 1 for removing the transition effect.
I instead listen to the container div for “transitionend”, at first I had check whether it was the child node or not, but as I won’t transition the parent node I find that check more bloat than useful so I removed it for optimization.

  var audioTags = document.querySelectorAll("audio");
  var keysContainer = document.querySelector(".keys");
  var keyTags = keysContainer.querySelectorAll("div");

  function playSound(e){
    // borrowing methods from the Array prototype and send in our nodelist as a argument.
    Array.prototype.forEach.call(audioTags,function(audioTag){
      if (audioTag.getAttribute("data-key") == e.keyCode){
        audioTag.currentTime = 0;
        audioTag.play();
      }
    });
    // borrowing methods from the Array prototype and send in our nodelist as a argument.
    Array.prototype.forEach.call(keyTags,function(keyTag){
      if (keyTag.getAttribute("data-key") == e.keyCode){
        keyTag.classList.add('playing');
      }
    });
  }
  function removeTransition(event){
    event.target.classList.remove('playing');
  }
  window.addEventListener("keydown", playSound);
  keysContainer.addEventListener("transitionend", removeTransition);

Add your comment