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

https://codepen.io/shugyoza/pen/bGrMXaj

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
      this.display(audio.parentNode.id);
      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
      audio.play()
      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.