Feedback for Build a Drum Machine

Code Feedback
1

Hi,
I would like to know the community’s feedback on this project.

Problem statement: https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-drum-machine

Source code: https://github.com/vipulchodankar/react-drumpad
Hosted at: https://react-drumpad.netlify.app/

I also had a question, which link should i submit? (The github link or the netlify link) I usually submit the codepen link, but i wanted to try something different this time.

Thank you!

1 Like
2

Hey, I just completed my drum machine project recently so yours caught my eye. I’d like to offer some suggestions for improvement.

  • Increasing the font size causes the letters to break out of their containers. Don’t use px to set height, use em. Also, if you want these to continue to look like square buttons as the text size increases then put a width on them as well (with the same em value as for the height).
  • If I hold down a sound key the background color starts flashing like crazy with different colors, and for some of the sounds nothing is played after the initial sound. Personally, I would prevent repeat key down events.
    https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
  • The display at the top of the page just repeats the key that is being pressed. I think it might be nice if it gave the name of the sound instead.
  • You should probably have an h1 heading on the page. Perhaps some intro text describing what this is and how to use it? The reason I mention this is because if someone can’t see this page and is using a screen reader then they will have no idea what this page is about or how to use it.
1 Like
3

I would submit the netlify link.

  • Add cursor: pointer to the buttons.

  • The duration value for the transition needs a unit

transition: all 0.3 ease-in-out;

transition: all 0.3s ease-in-out;
1 Like
4

That’s some great feedback, thank you!

I had not tried holding down a key, that’s great to know.
I’ll try to add these changes soon.

5

Thanks! I submitted the netlify link.
I guess i forgot to add the units :stuck_out_tongue: