Day 12: #100DaysofCode and Day 1 of #Javascript30

Song of the Day

Today I wanted to code something different and fun and I came across #Javascript30 .

Day 1 of #Javascript30 consist of building a Drum Kit using vanilla Javascript. The lesson was very informative and it helped to refresh my memory on some Javascript after working in Ruby for a while. In addition, I wanted to see if I could find any similarities between Ruby and Javascript. My final javascript code after the lesson looked like this:

<script>
  window.addEventListener('keydown', function(e){
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
    if (!audio) return;
      audio.currentTime = 0; 
      audio.play();
      key.classList.add('playing'); 
  })

    function removeTransition(e){
     if(e.propertyName !== 'transform') return; 
     this.classList.remove('playing');

    }

    const keys = document.querySelectorAll('.key');
    keys.forEach(key => key.addEventListener('transitionend', removeTransition)); 

</script>

I will go over each line and review the parts that I had an "aha" moment with.

window.addEventListener('keydown', function(e){
}

Adds an event listener to the window. I needed a reminder on the keydown addEventListener method and discovered that the event takes two arguments. The first one keydown provides a code indicating which key is pressed. We have to remember that computers only talk in numbers. So, for every key on your keyboard there is a number associated with it. A website was provided during the tutorial that I found very helpful to view -- keycode.info

The second argument that the keydown takes is the event function as seen below.

eventTarget.addEventListener("keydown", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

The next two lines:

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);

First we create two variables one with the name audio and one with the name key and use the queryselector to select the audio tag and key class where it has a data-key.

The following line of code: if (!audio) return; is straight forward, if there is no audio it will stop running.

However, audio.play(); will call the .play the audio on the audio element, but you should note that when .play() is ran, it will play that audio once and not play it again, so we must create a way so that the start time is restarted/rewinded by running audio.currentTime = 0; which tells the function every time that the audio is clicked it, the currentTime should be zero before running audio.play() again.

The next line adds a class to the div, but doesn't remove it:

key.classList.add('playing'); 

In order to remove it we must first search the document to find all elements with the class key, like so const keys = document.querySelectorAll('.key');

Then we must iterate over those keys and for each key we should find the 'transitioned' and run the removeTransition function.

    const keys = document.querySelectorAll('.key');

    keys.forEach(key => key.addEventListener('transitioned', removeTransition));

The removeTransition function checks all of the transitions to see if the property name is 'tranform' and skips it if it is not. If the property name is tranform, then it removes the class name 'playing' from the element.

    function removeTransition(e){
     if(e.propertyName !== 'transform') r
     this.classList.remove('playing');

    }

I noticed many similarities between Javascript and Ruby in this lesson. I noticed that functions in Javascript are simply methods in Ruby and that the this is the same as self in Ruby.