Day 1: JS 30
Tags: javascript, webdev, tutorial
Published: 2022-02-26 04:12:49

Yo! whatsup guys
So from this very day I am learning myself and doing [Js 30](https://javascript30.com/) 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](https://github.com/wesbos/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit)

**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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)
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](https://github.com/wesbos/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit)

**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.**

```javascript
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)**

```javascript
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

```javascript
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)

```html
 <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)


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

Now All we have to do is 

```javascript
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 🏍

```javascript
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")

```javascript
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

```javascript
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