Drum machine - feedback appreciated!

Code Feedback
1

Howdy Campers!

Feedback on my Drum Machine would be greatly appreciated:
https://codepen.io/cakeisaliegaming/full/oNzNerZ

I created this app for a freeCodeCamp Build a Drum Machine Front End Libraries Project. I went a bit beyond the user stories and attempted to include all the functionality from the demo app, which was both fun and challenging.

This is only my second React app, so any comment or tips on how I’ve managed state and passing down props would be useful.

Thanks!

1 Like
2

Hey Stevie, this is a really nice job. Much more colorful than mine. I do have some suggestions though.

  • You’ve removed the oultine property for all the buttons so that the keyboard focus indicator isn’t showing. You don’t want to do this. For accessibility, the user should be able to see where their keyboard focus is currently at.
  • When the machine is off I recommend that you change the mouse cursor back to the default (or maybe even not-allowed) when hovering over buttons. Also maybe get rid of any animations/effects on hover/click.
  • Your app is responsive to changes in view port width, but if you really want it to be responsive then you can work on making it responsive to changes in text size as well. If you don’t know how to increase the text size, using Firefox, go to the View->Zoom menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key, scroll your middle mouse button to increase the text size. It won’t take long until you see the issues. Two suggestions to help with this: 1) Do not set height on elements in px, use em instead (and same goes for width if you need it). 2) Use em for your CSS break points as well. Usually you can just divide the px value by 16 to get the em value.
  • Technically, you should have an h1 heading on the page.
1 Like
3

Thanks, that gives me plenty to think about and things to tweak over the next few days.