Drum Machine Project works as intended but fails test #6

JavaScript
1

Tell us what’s happening:
Like title says, I can click on any div and the sound plays, and I can click hit the associated keys and the sound plays, but I still fail test number 6 related to the key-sound event. Any idea? I tried replaced the audio sourced to all point to the same one, thinking it might be network related, as one forum post concluded; but it did not help.

Your code so far
https://codepen.io/crajun/pen/gOPKMpd?editors=0010

Your browser information:
Tried on both Chrome (normal and incognito mode), Firefox latest. Same result.

Challenge:
Front End Libraries Challenge: Build a Drum Machine

Link to the challenge:

2

To answer my own question: found out that it works if I reverse the string case comparison like this:

 handleKeys(e) {
    if (e.key.toUpperCase() === this.props.letter) { ...      
    }
  }

But the test does not like when you do this, instead:

handleKeys(e) {
  if (e.key === this.props.letter.toLowerCase()) { ...
  }
}

Functionally, the second way will work locally, it just won’t pass the tests!

3 Likes
3

You glorious person you! Thank you!

I lost two days and a lot of brain cells trying to figure this out. Turns out the event.key input from your keyboard is in lowercase and the tests provide an input in uppercase. Next time I’ll remember to follow the strict rules of always equating both terms. Like so:

event.key.toLowerCase() === text.toLowerCase()
2 Likes