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
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.
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");
}
}
