JS30 Challenge Day 1 — JS Drum Kit

Drum Kit made with vanilla JS.

The first challenge of the day is: JavaScript Drum Kit. This is a drum kit made with JavaScript in which pressing the corresponding key on the screen emits their corresponding sound (This actually gives me an idea to create a piano version, but I suppose the trouble lies in finding a pack of all notes).

Upon tackling this challenge I found out that this really strengthens your knowledge of using just plain JavaScript without the help of libraries or frameworks. Not only that, you learn something new and I find this to be extremely helpful. With the use of event handlers and it was definitely a refresher with new found knowledge in ‘keydown’ and ‘transitionend’. I had some familiarity or rather a guess on ‘keydown’ being similar to ‘onclick’ events with firing when a key is pressed as opposed to clicked.

I can definitely see myself using these event handlers and possibly refactoring to reduce the line of code it took. Can’t wait to see what else is in store! You can find the link to the demo here.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store