I can not pass the key test in the Drum Machine test, even though the drum machine is working perfectly on keypress

[rishi18454]

i have added a keydown event listener to the document, when a key is pressed, the corresponding audio gets selected and played. and then the audio object with the corresponding id is filtered out from the array of audio objects, and the text of the required audio is sent to the display.
Its all working on screen, but as per the tester, the required audio is never filtered out from the array correctly, so it becomes undefined.
Although the audio is getting filtered correctly as per the console logs i have tried.

Here is a codepen link to my project.

drum machine

The error is at somewhere around line 27.

I am using google chrome as the browser.

Challenge: Build a Drum Machine

Link to the challenge:

freeCodeCamp.org

[jsdisco]

This line is the problem:

const [requiredAudio] = audioClips.filter((audio) => audio.key === e.key);

The letters in your audioClips are lowercase, but e.key is uppercase.

[rishi18454]

Hey! thanks for the help. I was stuck in this for a whole day now lol.

the code worked fine normally, but the problem comes up when i try pressing the keys while the caps lock is on, since this makes e.key uppercase.

But now its solved, i just had to change it to e.key.toLowerCase().