Drum Machine - Activate a button with keydown event?

Code Feedback
1

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.

document.getElementById(keyCodeArray.indexOf(clipName)).click();

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.

2

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