Day 1: JS 30

Yo! whatsup guys
So from this very day I am learning myself and doing Js 30 tutorials where You can build different Js apps every day for 30 days and I will be covering every tutorial in more details as much as possible.

Here is the source: Link

Lets start
So First app is the "Drum kit" App where You can build musical App You can hit on keyboard and associated sound(kick/drum etc) will come.

For this We need to have a little bit understanding of HTML/CSS/JavaScript before hand

1. Data-* attribute
2. Manipulation of DOM elements
3. Loops(loop through nodes)
4. Event listeners

Note: For this tutorial I am focusing only on the JS part. So You can setup your HTML by getting your files from here

Steps Required:

1. Listen to keys.
2. Attach the Event-listener and play the audio associated with each keys (using data-* attribute).
3. Add the box-animation (class) to the selected div.
4. Remove the box-animation (class) when done.

1. Listen to keys.

window.addEventListener("keydown", function(e){
console.log("Key is pressed);
})

By using above code You can verify whether your keyboard keys are getting captured or not.

2. Attach the Event-listener and play the audio associated with each keys (using data-* attribute)

window.addEventListener("keydown", function(e){
 const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
audio.play(); //this will play the audio
}

But wait 🤨 Try the above code now and then try to repeatedly press the same key. its only playing it once after 2 or 3 seconds.

So to make it work like a real musical app we have to play the music whenever the keys get hit.

To do that We just need to add this line

audio.currentTime = 0; //this will set the timeline to 0 whenever you press they key.

Dang, it worked 🤩 Half the work is done.

Now lets move on to the other half which is adding border and animation to the box.

3. Add the box-animation (class) to the selected div.
If we look into style.css we can see .playing class which has the properties outline, transform and transition already defined.
Our objective is to add the .playing class to the container (only with the js code)

 <container data-key="71" class="key playing"> //only through the JS code ofcourse

 </container>

Now we need to listen for the keys again to add the animation on boxes (for that)

 window.addEventListener("keydown",function (e){
const key = document.querySelector(`container[data-key="${e.keyCode}`];
}

Now All we have to do is

key.classList.add("playing"); //add class - playing to the <container>

so far we are using 2 listeners

1. Listener for key and playing audio (i.e. audio[data-type="${e.keyCode}"] )
2. Listener for key and adding animation to box (i.e. container[data-type="${e.keyCode}"] ) in both the case data-key is same so data-key is the one which is linking both.

4. Remove the box-animation (class) when done.

So far so good.

But We have one problem, we have added the animation but what about removing it? it suppose to flash the border (with yellow color) along with the increasing size of the box.

Note: We can also set the setTimeout for .playing class but the best way is get it done by listening to the transitioned

Now We have to listen for 'transitionend' event.

So that means we have to listen for another event. Lets do it 🏍

const keys = document.querySelectorAll('.key) //targeting the class key

Now we have all the nodes in keys. Now we have to attach 'transitionend' to each node and listen and whenever it sense trasitionend we will just add our class that i.e. _.classList.remove("playing")

key.forEach(key => key.addEventListener('transitionend', removeanimation);

All set but we are listening after what will happen after we listen?

So lets go ahead and define the function - removeanimation

function removeanimation(e){
this.classList.remove("playing");

🙌 cheers we made it till end.
Remember whenever you are in doubt just throw console.log(Your doubts), it will help you to dive you deep.

Any type of feedback will be appreciated till then

Keep rolling :D