My Drum Machine project completed

Project Feedback
#1

Hello everyone, this is my Drum Machine Project !

Id love to hear your opinions on its appearance and if you find any crucial coding errors(or minor ones, but im sure those are there :)).

I took the functionality concept from the example project, but i managed to bring it to life using minimum reference to the example code.

Many things i learned while building it, ofc mainly the React concept and how to better utilize ES6 syntax with it, to shrink the code. Ive improved a lot my object oriented and functional programming skills.

1 Like
#2

HI @Sylvant !

I think your project looks good.

Once you complete the last two projects you should look into react hooks and getting familiar with that.

I just started reading though documentation and playing around with some of the examples. But I think it would be good to know.

Keep up the good work!

1 Like
#3

Thanks for your suggestion and for checking my project @jwilkins.oboe !
Ill certainly look into this new React approach, it does look like my cup of tea :wink:

#4

Hey, this is really nicely done. Congrats. I’ve got a few picky suggestions.

  • When using the keyboard, the sound plays as soon as I press the key down, which is exactly what I would expect. But when using the mouse the sound doesn’t play until I let up on the mouse button. I was expecting it to play as soon as I clicked down.
  • You do have keyboard focus indicators, but to be honest they are not quite prominent enough to be accessible. You have to look really hard to see them. I would make them a little more prominent.
  • You should probably have a <main> wrapping this and give it an <h1> to make it really accessible.
  • If you want to use a <button> for the toggle switch on the sound banks then you’ll need to do some work behind the scenes to make it accessible: ARIA: switch role - Accessibility | MDN. This also applies for the power button.
#5

Hey @bbsmooth , thanks for the detailed observation
Now as you mention the sound plays differently with ui button release and keyboard button down, it does make sense to make them behave similar. I stuck to the basic approach and attach the html button function event onClick , but your comment provoked me to research and discover there is onMouseDown, which is similar to the event listener i use for keyboard keydown. So i just replaced onClick with onMouseDown in my button element, which is the mother of all buttons in my app and it was sufficient to fix it! :smiley:
I have made the keyboard focus indicators more prominent. I was afraid it might look ridiculous so i didnt make it so initially.
Can you elaborate more on the effect of <main> and do you mean to add a title by giving it <h1>?
I was not familiar with the ARIA switch buttons. Ill have it in mind for future projects

EDIT: ok, i had to chance the onMouseDown because it only works with mouse, but not keyboard. Instead o changed the event keydown to keyup which isnt perfect, but at least keyboard and mouse act consistently now