Day 1/30: JavaScript Drum Kit #JavaScript30
Overview of the challenge
Wes Bos gives out a bunch of code and I'm supposed to make everything work by the end of the month?
Being December 1st, I decided to start with the JavaScript Drum Kit:
Basically, this exercise consist of taking the start HTML and CSS files, and link every single one of the buttons shown on the page to their assigned audio file, so it plays a sound everytime the user presses one of the keys. I'll also have to link every button to a custom CSS class so they do a little animation, and look cute, when pressed. So, let's do this.
Train of thought...
Drum Kit
Make an event listener that adds the ".playing" class every time one of the keys on screen gets pressed.
Try to make it so each key case plays it's assigned tune. Maybe make another function for that, then call it inside getKeys. Make it so every tune can get pressed again and again without a delay.
Add another function that removes the class ".playing" once the key is up.
What I learned
I went a bit deeper with my knowledge of DOM Manipulation and called the
.addEventListener()method on the window object, which you can really only ever call on this particular object if you need to listen for a key press.The
data-keyattribute and how to use it as a reference between elements in an HTML document.
And it's done!
You can find my solution to this challenge in its repository. You can also try it out live on CodePen!