Build a Drum Machine Project

JavaScript
1

Link to my project: https://codepen.io/acxdc/pen/yLvyXam

UPDATE: Thank you to @bbsmooth for pointing out my audio issue. Now my current issue is that it is failing the display test, even though my element with id=“display” does actually display a unique string for each drum-pad trigger.

UPDATE 2: Thanks to @lasjorg for recognizing my display issue with the current version of React. All tests are now passing.

I am not sure why my project is not passing all tests. It says the audio clips aren’t being triggered when the parent element is clicked or the corresponding key is pressed, but if you try it yourself, you will find that it does in fact trigger the audio on click and key press.

I am painfully aware that there are probably better ways to do a lot of things in this project, but I can always go back and clean up. This project was a huge learning experience for me. Please help me figure out why it’s not passing. Thanks in advance.

2

I don’t think the tests want you to create a new Audio object each time you play a sound. I think they want you call play directly on the <audio> element for the sound.

3

Hello, and welcome to the forum.

I don’t have a lot of time to do a deep review, but just reviewing the layout, one thing I noticed that might be an issue is your “display” item.

When a sound is played, the name of the sound is to be displayed in an object with an id of “display”… but in reviewing your code, “display” seems to be a main DIV containing other components of your drumkit. “display” needs to be the id of the object containing the text of your audio sounds.

Not sure if that’s causing some of the other tests to fail, but thats the first thing that caught my eye.

4

This seemed to be the problem. I fixed it, but now it’s failing on the display test, even though it displays a unique string on drum-pad trigger.

5

This didn’t affect the audio tests failing, but after I got those passing, the display test isn’t passing even after giving the Display component the id “display”. It is displaying a unique string on each drum-pad trigger, which is what the test requires, yet it’s failing.

6

It is a known issue with React 18 and the tests.

You can use flushSync

handleDisplay(text) {
  ReactDOM.flushSync(() => {
    this.setState({
      display: text
    });
  });
}

Or if you switch back to ReactDOM.render (basically going back to 17) it will pass the tests as well (put it below your arrays and comment out the other ReactDOM code)

ReactDOM.render(<App />, document.getElementById('react-drum-app'));

1 Like
7

Thank you so much! I was losing my mind. I wish I could choose 2 solutions, but I hope a heart will suffice. :slight_smile:

8

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