The drum machine project is not passing the test that checks if the drum can be pressed with a key that corresponds to the ID
The sound plays but for some reason the test fails, am I missing something?
here is a codepen to my project
The drum machine project is not passing the test that checks if the drum can be pressed with a key that corresponds to the ID
The sound plays but for some reason the test fails, am I missing something?
here is a codepen to my project
Explain me how this works:
click() {
document.querySelectorAll('audio#' + this.props.sound.key)[0].play();
this.props.update(this.props.sound.title);
}
bindKey(sound, callback) {
document.addEventListener('keydown', function(event) {
var key = event.key || event.keyCode;
if (key === sound.key.toLowerCase()) {
document.getElementById(sound.key).click();
}
});
}
click() {
document.querySelectorAll('audio#' + this.props.sound.key)[0].play();
this.props.update(this.props.sound.title);
}
selects the audio tag that has the id of the current component key value and plays the audio tag. The sound property has all the information connected to a sound such as title and associated key
bindKey(sound, callback) {
document.addEventListener('keydown', function(event) {
var key = event.key || event.keyCode;
if (key === sound.key.toLowerCase()) {
document.getElementById(sound.key).click();
}
});
}
takes in a sound property and a callback to the update function, if the keyboard key is pressed that matches the sounds key for that component the component then fires a click event to itself to trigger the click() and fire the sound. This was 1 line less than calling:
document.querySelectorAll('audio#' + this.props.sound.key)[0].play();
this.props.update(this.props.sound.title);
again and it achieves the same effect
the bindKey event is called here:
componentDidMount() {
this.bindKey(this.props.sound, this.props.update);
}
which takes the main app update from the components props and the sound associated with that component to make it all work
This is the definition of a spaghetti code
Add onKeyPress
handler to Drum
:
class Drum extends React.Component {
...
render() {
return (
<div
onClick={this.click.bind(this)}
onKeyPress={this.click.bind(this)} // <------- add this
className={"drum-pad"}
id={this.props.sound.key}
>
I tried that to no avail, I even tried to create just a test function that console logged the event and it never triggers for me to intercept it and figure out if the right key is pressed
Ah, I see my mistake, I took out the bindKey when I did that, which makes it still pass the test but then if I actually tried to prsss the key it failed. I had not tried seeing if it passed when I realized sound was not playing