Passing test 6 on drum machine

JavaScript
#1

I have completed the Drum Machine project and it seems as if I have done all of the tests. Whenever I click on the buttons required it plays the corresponding sound and displays message. However, I still continue to fail test 6 and am not sure why. I decided to use hooks and functional components as that is what I was told to do now that it is the common practice. I am not sure if that is why or if it is because I used a for loop inside the handleKeyPress() function as I could not find a more elegant way.

Your code so far
here is a link to my code https://codepen.io/lace1010/pen/KKgexVq

Thank you for the help in advance!

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.3 Safari/605.1.15.

Challenge: Build a Drum Machine

Link to the challenge:

#2

Well, it seems to be working now, so I assume you’re good now?

I decided to use hooks and functional components as that is what I was told to do now that it is the common practice.

I will say that there are probably over 100 people that have built this with hooks and functional components, so those couldn’t be the source of the problem.

I would agree that that is probably common practice now. There will still be a lot of class components out there in legacy code, but going forward, the trend is going to be towards hooks and FCs.

1 Like
#3

I don’t think the for loop is the problem. That being said, I think this would have been cleaner:

    const key = e.key.toUpperCase();
    const pressedBank = bank.find(k => k.keyTrigger === key);
    playSound(pressedBank);

It’s also a hair more efficient because it will stop iterating once it finds the correct match. Of course, you could have accomplished that by putting a break at the end of the if clause. But still this is cleaner. I think better still would have been to just use keyTriggers as the keys in an object (instead of an array) so you could have just done something like:

    const key = e.key.toUpperCase();
    playSound(bank[key]);
1 Like
#4

I have tried it 10 different times now and it always comes back saying I failed test 6 still sadly.

Yes looking back at it now, it makes much more sense using keyTriggers as the keys in an object. Would have made my life a lot easier in this project! Thank you for the feedback.

#5

It just passed all 8 tests for me. Did you do something?

Also, now that you have the basics working and passed all the tests, I would challenge yourself a little more by adding a second bank of sounds and a volume control.

1 Like
#6

I don’t believe I did anything. However, I just exited out of codepen and reloaded it. It just passed! I have found that after I click save after clicking on the link for some reason it doesn’t pass, but if I reload the page it will work again. So odd.

Yes, after getting the basics done I want to add another bank of more silly sounds to have some fun and add a volume bar to help learn more. Thank you for the advise!

#7

Yeah, the “oh crap, I should have …” is a common feeling in coding. Sometimes small decisions can make a big difference down the line. It’s like the old programming adage, “Weeks of programming can save you hours of planning.” And of course, as you get more experienced, you also kind of develop a spidey-sense about these things.

1 Like