Make a JavaScript Drum Kit in Vanilla JS! #JavaScript30 1/30

[moonfireknight]

To those following along with this as part of the Odin Project. If you are confused about updating the keyCode and data-key instructions.

1) Ctrl + F in code - search for "e.keyCode" -> replace with e.code
2) Ctr + F in code - search "data-keys" -> In the HTML body, replace numerical numbers in the classes for both audio and div with KeyA, Key D, etc. example: <div data-key="68"> would become <div data-key="KeyA">

Took me a sec to figure out. Hope that helps

[alehunter]

All hail The Odin Project WEB Development 101 ;)

[christosbinos]

13:27

I find the following is better for removing the "playing" class:

window.addEventListener('keyup', function(e) {
const key = = "${e.keyCode}"]`);



Not only is the code more readable, but it ensures that the transition effect stays in place as long as the user holds down the key. The key returns back to "key" class when the button is released.

[erikhendin]

Really cool tutorial, grateful for Wes' videos. I found that if you are willing to code along, then go through the video several times and really break down each step, and make it a goal to add verbose comments to each section of the code, explaining everything that is happening - it will do a lot to bring home understanding how everything works here. Having done front-end development in 1999-2008 it blows my mind all of the efficiencies and improvements that are baked into the language now that were not before. Guys like Wes give me hope to learn and really understand the stuff that always seemed to elude me before.

[ryanvb]

06:25
For the es6 template string make sure you are using the ` apostrophe/backtick and not the single quote '

[tropicalennui]

found from The Odin Project - nice content. looking forward to looking at the other 29 :)

[cypher]

I understood this perfectly after checking some things I forgot or didn't learn properly.

Thanks Wes and Odin!

[BobbyBundlez]

man I've been coding for 5 months now and mainly just use treehouse... but they don't teach stuff like this on there and as an electronic music producer as well it is really great to see this video! got my mind realizing how many possible things there are... also made me really happy that i understood a majority of what he was teaching! the ES6 stuff i have to go over a few times again especially for concatenating but man! this was great! thanks!

[RussellBeattie]

The transitionend event will bubble up (like any other DOM event). You could have a single event listener on the ".keys" DIV which listens for transitionend, and then use the event.target object to determine the key DIV and remove the ".playing" class.

[mitri-dvp]

I have finished this series, I've learn so much about JS and even ES6 from this coding challenge, thanks Wes Bos!

[SongMachina]

It was nice seeing an interesting web project that didn't need any dev tools or extra libraries to work. Thanks for the vid :)

[dustinpoissant]

You should have watched for a keyup instead of a transition end to remove the class, that way if they press and hold it will stay yellow

[artusabraham]

If you have a "null" message even though you are copying everything right...It might be because you have to use a backtick, here's one for free : `

[anyalauria]

5 minutes in and when you broke down the data structure that holds all the data for key down event, a lightbulb just went off in my head and all these other ideas for apps started rushing into my head. What a great video.

[arturdomanski]

I'm surprised how many new things I've learned from this vid.

[MrSweppy]

I've found a bug - if you hold key for more than 5 second, gold border becomes permanent. So I think it's better to implement keyup and keydown even. Also your function playsound adds class. As I heard it's hardly recommended to make functions to implement 1 action. Thank you a lot for your lessons!

[yinonelbaz]

As someone who studies JS I want to tell you that I can not thank you enough for this series
It's just a treasure trove for JS students

[thecoasterfollower]

Truly don’t understand the huge credit Odin gets sometimes. This doesn’t have much that was taught throughout the curriculum yet it’s sending me here to do as an exercise. I have gotten to the point of LITERALLY copy and pasting what he has and the best I got is “null” for every console.log. I always get confident until the exercises on the site come and you have to use something that you know nothing of because you weren’t taught.

[soupednym]

Hey, instead of finding and looping through all the keys and listening for transition ends on all of them, you can just add the event listener at the end of the playSound() function since we've already gone through the trouble of finding the key being pressed down.

function playSound(e) {
const audio =
const key =
if (!audio) return;
audio.currentTime = 0;
audio.play();
key.classList.add('playing');
key.addEventListener('transitionend', removeTransition);
};

Greetings from TOP, and thanks for the tutorial, i think i learned a lot!

[FateMasterBGB]

For the people trying this exercise with e.key since e.keyCode is deprecated, you are probably getting "null" at the console. That's because e.key returns a letter not the key-code number so it won't find the audio file element. Think of a way of going around this.