JavaScript Project - Drum Kit.

Being a student and a developer, it is important for one to learn and grow constantly. A while back, I started learning JavaScript and found it a little tricky for my C++ hard-wired brain to grasp on. Since then, I decided to learn JavaScript concepts while building simple projects and this is where the JavaScript30 by Wes Bos showed up.

So, let's build the first project !

Getting Started

The HTML and the CSS part in all are fairly easy to understand. I like the layout and simplicity of the UI that the video presented, so I decided to stick with it.

Some Key Points :

• data-* Attribute : This attribute is used to store custom data private to the page or application. Every HTML element may have any number of custom data attributes specified, with any value. JavaScript then accesses this data using the 'getAttribute' method. In this project, the data-key is hooked up with the data-key to play audio

• The transition element in CSS will change the class of playing and scale it up and change the border color and the background color.

The JavaScript

• The keyUp or keyDown event will be associated with a keyCode, you can check them out on the website , we will be listening to the keyDown event in this project.

• The idea is- whenever the key is pressed, the audio associated with the keyCode plays. This can be done withdocument.querySelector() to select the attribute. Since we have u play different sounds for each key, we have not used queryselectorAll here.

• Another thing to note is that, if we want to play the audio element again and again when pressed, we need to rewind it to the start. This can be done with audio.currentTime=0;

• Now, we also want to select the corresponding key and add the animation to it. So, we select the data-key and the key class and add the class 'playing' to the key.

• Try and not add a setTimeout function in the JavaScript code since we already have a timeout in our CSS code as they might start to get out of sync. What we can do is listen on each key for when the transition happens. We also cannot use addEventListener to listen to transitionend event as it is a node list and not an array. So, we use "keys.forEach" and remove the transition and the class, 'playing'

What we learnt is - DOM Manipulation, Control Structures, HTML Audio attribute, JavaScript CSS Manipulation and EventListeners

Know what you know

This was not a hard project, but of course, there is always space to learn things in JavaScript! I also added the unsplash randomized API in the background to give it a cooler look :P PS : If you're stuck console.log() your code and check it!

Your feedback is valuable to me, do let me know what you think!