Feedback of drum machine

Code Feedback
1

Here is my project on codepen

Check it out and tell me how it is.

2

It looks awesome! The only issue as far as I can tell is that the screen says “drum” when in electric mode, and “electric” when in drum mode. Unfortunately I have no idea how to help you with that because I am still finishing up my responsive web design projects and haven’t gotten into javascript yet.

3

Oops that was my mistake. I fixed it right away.

4

Overall this is a very nice job, but I do have a few suggestions:

  • There is no keyboard focus indicator showing on any of the buttons or volume input. Use the CSS outline property to add the focus indicator. Make sure it stands out enough to be easily seen.
  • The volume control is a slider but it just appears as one small red button to me (i.e. I can’t actually slide it). I can use the mouse scroll to change the volume but I’m not sure everyone is going to know what to do with that.
  • When I press a sound key down and hold it down I get the sound and then when I let the key up I get the sound again. So it is playing on both the keydown and keyup events. If I continually tap a sound key at just the right speed it doubles up on the sound (plays it twice when I really only want it to play the sound once). I think you need to choose either keyup or keydown to trigger the sound (personally, I would choose keydown).
  • Your drum machine is responsive to changes in the view port width but it has some issues with increases in the text size. 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’. Then while holding down the Ctrl key scroll your middle mouse button. You’ll eventually see the text start to break out of the buttons and some of the sound buttons will actually jump to other rows. Also, make sure to narrow your browser as far in as it will go and increase the text size as well to make sure it looks OK. As a shameless plug I’ll link to my drum machine as an example of responsiveness to both changes in width and text size.
5

Hey there,

great work so far!

My ideas:

  • on my wide screen, I’m having a hard time to use it, because it’s too small for me

Having the same problem on Firefox.
On Chrome it works as expected.

Keep us posted!

7

That issue is fixed.

1 Like