Hi all, I keep facing the errors for User Story #5 (AssertionError: The
HTML:
JS:
sounds = [{
id: ‘Q’,
audiokey: ‘Heater-1’,
url: ‘…’
},
{
id: ‘W’,
audiokey: ‘Heater-2’,
url: ‘…’
},
{
id: ‘E’,
audiokey: ‘Heater-3’,
url: ‘…’
},
{
id: ‘A’,
audiokey: ‘Heater-4’,
url: ‘…’
},
{
id: ‘S’,
audiokey: ‘Clap’,
url: ‘…’
},
{
id: ‘D’,
audiokey: ‘Open-HH’,
url: ‘…’
},
{
id: ‘Z’,
audiokey: “Kick-n’-Hat”,
url: ‘…’
},
{
id: ‘X’,
audiokey: ‘Kick’,
url: ‘…’
},
{
id: ‘C’,
audiokey: ‘Closed-HH’,
url: ‘…’
}];
class Machine extends React.Component {
constructor(props) {
super(props);
this.state = {
display: ‘Play a sound’,
}
};
updateDisplay = (display) => {
this.setState({display});
}
render() {
return (
<div id="drum-machine">
<div id="display">{this.state.display}</div>
{sounds.map((sound, idx) => (
<Drumpad audiokey={sound.audiokey} id={sound.id} url={sound.url} updateDisplay={this.updateDisplay} />
))}
</div>)
}
}
class Drumpad extends React.Component {
constructor(props) {
super(props);
this.playSound = this.playSound.bind(this);
}
playSound() {
const sound = document.getElementById(this.props.id);
sound.play();
this.props.updateDisplay(this.props.audiokey);
}
componentDidMount() {
document.addEventListener("keydown", (event) => {
const keypress = event.key.toUpperCase();
if (keypress === this.props.id){
this.playSound();
}
})
}
render() {
return (
<button onClick={this.playSound} className="drum-pad" id={this.props.audiokey}>{this.props.id}<audio className="clip" id={this.props.id} src={this.props.url}></audio></button>
);
}
}
ReactDOM.render(, document.getElementById(“root”));
Any help would be greatly appreciated!
