Drum Machine - Activate a button with keydown event?

Hello, freeCodeCampers,

I have completed the Drum Machine Project, but not the way I wanted.

Although I pass all the test, I have some issues that I would like to solve.

When I click a button with my mouse, I trigger some visual effects on the button, but when I press a key from my keyboard, a sound is played, the display is updated, but the visual effect of the button being pressed isn’t activated.


Somehow .click() isn’t working or maybe I don’t understand how my CSS code works.

CSS code responsible for the visual effect:

.drum-pad:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;

When I press a key, does the div element become active? Or do I need another pseudo class?

Github Code and Netlify Live Preview

The .click() function is in my App component and the CSS is in the public folder.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.