Build a Drum Machine - feedback please

Hey there,

my (unstyled) Drum Machine is here :
I would really appreciate some constructive criticism :slight_smile:
If you have any advice/suggestions on how to improve my code I’d love to hear it.



Link to the challenge:

I like it so far. And it will be great once it is styled.

However, I do think there will be an issue with User Story #4, calling the audio and src with className clip.

1 Like

Hey there tolkadot,

I didnt really look through the code. I did jam out for a a couple minutes and enjoyed the sounds tho. Looking forward to seeing the final product.

Happy coding!

1 Like

Check out this bit of advice. I think it will help:

1 Like

Avoid using document.getElementById(keyPressed).play();, use refs instead. That’s advice i got. How to set up refs:
Put in audio tag ref={this.Q}, then in constructor this.Q = React.createRef();, then in componentDidMount() put this.somevar = ReactDOM.findDOMNode(this.Q.current) then in componentWillUnmount() put this.somevar = ReactDOM.findDOMNode(this.Q.current). So when you call function watchKeyboard and compare if and if it is, then;. Of course since there a many sounds, you better put it inside a object or an array and use switch/case instead of bunch of if’s …

Thanks for that - I hadn’t run it through the test yet :slight_smile:

I am about where you are right now. I’m hoping this will save us both a lot of pain :wink:

Thanks @codename11 - this is what I was looking for. Did you get a reason to avoid using
document.getElementById(keyPressed).play(); ??

I was told that is react way of using refs. And in documentation of react says it’s too avoid them, except in some specific circumstances:

  • Managing focus, text selection, or media playback.
  • Triggering imperative animations.
  • Integrating with third-party DOM libraries.).
    I also googled “document get element by id vs refs in react” to get bigger picture of “why not”.
1 Like

I like the sounds :slight_smile: we’re waiting for the styles, here’s my react drum app: and my pure vanilla js version: if you ever want to explore more i suggest you also enroll this pure vanilla course from Wes Boss himself: AND IT’S TOTALLY FREE!