Drum Machine: Hint to Pass Spec #6

Can anyone give me a hint on how to pass the sixth spec of the Drum Machine project? Function-wise I fulfilled that story. I have no idea what kind of format is being expected here. Thank y


Tell us what’s happening:
Describe your issue in detail here.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36

Challenge: Build a Drum Machine

Link to the challenge:

Hey there,

The wording here might be a bit confusing, but when it asks for the sound to play when the “trigger key” is pressed, the trigger key is the key on the keyboard.

In other words, if I am visiting your page and I press the Q button on my keyboard, the same sound should play as if I clicked the Q button on your drum pad.

1 Like

Ooh! Ok. Thank you so much!

Sorry, it works the way I wrote below, but if I narrow down the if else statement (like the one commented out, even with if (event.key && event.key ==='q' ...), it does not pass the spec, do you know why? Thank you!

play(event) {
    // if pressed key in keyboard, get the event.key through listener
    // if (event.key === 'q' ||
    //     event.key === 'w' ||
    //     event.key === 'e' ||
    //     event.key === 'a' ||
    //     event.key === 's' ||
    //     event.key === 'd' ||
    //     event.key === 'z' ||
    //     event.key === 'x' ||
    //     event.key === 'c') {
    if (event.key) {
      let id = event.key.toUpperCase(); // extract to grab id
      let audio = document.getElementById(id); // grab id
      audio.volume = this.state.volume / 100; // set volume
      return audio.play();  // play the tone
    } else if (event.key === undefined) {
      // extracting div's innerText that is the same with target audio's id
      let id = event.target.innerText;
      // grab the targeted audio element by its id
      let audio = document.getElementById(id);
      // set the volume. volume unit is in percent, thus /100
      audio.volume = this.state.volume / 100;
      // play the sound
      return this.display(event.target.id)
   else {
      // log message to the console for no tone
     console.error("The key has no associated drum-pad and tone");

Because your if conditions look for event.key === 'q', but the test mocks an event where event.key is Q. :slight_smile:

1 Like

Ok. Thank you. So I’ll leave it the way it is now then.

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