Any feedback? Drum Machine 😉

Code Feedback
1

link to it: https://codepen.io/BedwardVedicci/full/eYdVeLQ

link to the freeCodeCamp project guide:

2

I’ll give you more feedback tomorrow (it’s late here) but I would definitely get rid of the pop-up that tells you to enter a valid key as that gets annoying very fast.

3

The invalid key pop-up warning is not just annoying but a huge accessibility issue as well. Just doing a completely reasonable and normal thing like tabbing through the buttons causes that message to pop up every single time. This is not a suggestion, you must get rid of that. If the user does not press a key that controls a button then your application should do nothing (i.e. ignore the key press).

2 Likes
4

thanks for your comment very appreciated, i am gonna see how to deal with it :+1:

5

How about now?
https://codepen.io/BedwardVedicci/full/eYdVeLQ

6

Much better, though I’m still not sure why you are telling me that I’m typing an invalid key? If I am a keyboard only user then I will be using a lot of other keys to legitimately navigate your page and they are not invalid to me. Again, I think you should just ignore any other keys completely.

1 Like
7

I’ve edit it so, it ignores non-Alphabet keys:
https://codepen.io/BedwardVedicci/full/eYdVeLQ

8

Much better. Now a few other things:

  • The width of the box changes as the width of the display string changes. Seems like it should stay constant.
  • As I manually increase the text size the letters on the buttons break out of their boxes. Easy fix, use em units instead of px to set the height on the buttons.
  • The buttons represent keys on a keyboard so I think it makes more sense to keep them in a 3x3 matrix at all times so that they always resemble the keyboard.
  • Props to you for having a focus indicator color on the buttons. You’d be surprised how many don’t.
1 Like
9

I didn’t get this one well, can you please explain more…

10

Can you please explain why the box gets resized when setting its height with em?

11

Because em units are relative to the font size, so as the font size gets bigger the actual height value of the button gets taller. If the height is 2em and the font size is 16px then the height of the button is 32px. If you increase the font size to 24px then the height increases to 48px. Using em units ensures that the button will always be tall enough to completely contain the letter.

Right now the height on your buttons is 60px. That might seem like a lot but I only have to increase the font size by 160% and the letters start breaking out of the buttons. Bottom line, you should never assume the font size someone is using to look at your page. Using em units for height/width allows your elements to grow proportionately for larger text sizes.

12

As I use the Tab key to navigate through your buttons the button with the current keyboard focus turns a different color. This is good because it allows me to see where my current keyboard focus is.

1 Like
13

I love the sounds! Happy coding! :smile:

1 Like
14

Thanks for explaining, so much appreciated!