Can't pass test 6 and 7 on drum machine

As far as I can tell, my project fits the bill on all counts, yet it fails test 6 and 7. I suspect the reason is that I use a common useEffect hook at the button level to handle both clicks and key presses.

Project URL: https://vigilant-shannon-f09703.netlify.app/
Github repository: GitHub - NikolaJacques/Drum-Machine: Drum machine project from Front End Libraries module on Free Code Camp

Any suggestions?

Test 6 seems to be failing because your drum machine is case sensitive. As soon as I changed your code so it would play on both “q” and “Q” then it passed.

Test 7 has to do with the lag of calling setName in the then block. Move it before element.play() and you will pass.

Bonus tip: You can use element.classList.toggle() to toggle the “highlight” class.

1 Like

Sorry for replying so late, I just noticed your response.

I had no idea the value of KeyboardEvent.key changes when CapsLock is activated, though it makes sense when you think about it. I never would have thought of testing this, though. The fix for test 7 I also never would have figured out on my own; I find it a bit strange that it takes order of events into account to pass or fail rather than just the event firing successfully. In any case, thanks for taking the time to help me figure out the issues, I really appreciate it.

Also thanks for the bonus tip, that saves a lot of code.