Build a Drum Machine - feedback please

Code Feedback
1

Hey there,

my (unstyled) Drum Machine is here : https://codepen.io/tolkadot/pen/VEYGEO
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.

Thanks.

Dee

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-drum-machine

2

Hi,
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
3

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
4

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

1 Like
5

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 e.key===this.somevar.current.id and if it is, then executethis.somevar.play();. 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 …

6

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

7

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

8

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

9

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
10

I like the sounds :slight_smile: we’re waiting for the styles, here’s my react drum app: https://codepen.io/mav1283/pen/yqpdep and my pure vanilla js version: https://my-awesome-vanilla-drum-machine.netlify.com/ if you ever want to explore more i suggest you also enroll this pure vanilla course from Wes Boss himself: https://javascript30.com/ AND IT’S TOTALLY FREE!

2 Likes