Drum Machine Feedback [React, SCSS]

Hello,

Please provide a feedback on my drum machine. Feel free to critique my code and if you find any errors or problems with responsiveness please let me know :slight_smile:

Here is the pen.

Best regards,
Konstantin

I loved it. All I can say…yet would be perfect to download my hit :eyes: now

The code is… Z Z C Z Z C X
and loop forever.

1 Like

Overall, very nice job. This is one of the projects I completed so I’m going to be a little more critical here than usual just because I am familiar with it. Nothing personal.

  • As I tab through this with my keyboard I can’t see the keyboard focus indicator on the drum pads so I don’t know which button currently has focus by looking at the page. I can see the focus indicator on the controls but in my opinion the indicator could be more pronounced.
  • When using the keyboard to play a sound I’m noticing some irregularities. When the bank is set to the right position (so it is blue) and the keyboard focus is on ‘Q’:
    • When pressing the space bar, the sound does not play until I let up on the space bar. I think with a drum machine most people will want the sound to play immediately when the key is pressed, not when it is released.
    • When pressing the enter key, the sound plays very quickly and is cut off when I initially press the enter key and then it plays correctly when I let off the enter key. Again , I think most people would want the sound to play correctly when the key is initially pressed.
    • When using either the enter key or space bar the button does not turn orange when the key is pressed as it does when it is clicked with the mouse.
  • When I manually increase the text size the control panel breaks out of its container. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. While holding down the Ctrl key scroll your middle mouse button to increase the text size. You’ve made your app responsive to changes in the view port width now you need to do the same for changes in text size.
  • When the power is turned off I would disable the buttons so that they don’t turn orange when clicked.
  • The black on orange text and orange and black text does not quite have enough color contrast. Use the following to check for color contrast accessibility:
    https://webaim.org/resources/contrastchecker/
2 Likes

Thank you! :slight_smile:

Cheers,
Konstantin

Thank you for such extensive feedback!

I’ll definitely look into fixing those issues.

Cheers,
Konstantin