Responsive Tip Calculator using flexbox, css grid and javascript

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  I wouldn't trigger that can't be zero message until at least the people input has been touched. Use the on blur event for that. It comes across pretty aggressive to tell people they've done something wrong when they've not even reached that part of the form yet

  Marked as helpful

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Is your repo private btw? I can't see your code 😔

  Marked as helpful

  0

  

  Kofi Quist•280

  @GuyTitoPosted almost 3 years ago

  @grace-snow thank you the feedback. I've fixed that. It won't be aggressive anymore.

  1

  

  Kofi Quist•280

  @GuyTitoPosted almost 3 years ago

  @grace-snow No please. I numbered my challenges which I forgot to update their links in their respective solutions. Fixed that. You have free access to my code now.

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @GuyTito great stuff. This needs a form element and text should not be in spans.

  There will always be meaningful elements to use, in this case I think you’re missing headings or you could use a description list.

  The form element is really important - assistive tech controls and expectations change when used in a form and those users may struggle to use this without one.

  I would also recommend using a fieldset and legend for the tip amount

  Marked as helpful

  1

  

  Kofi Quist•280

  @GuyTitoPosted almost 3 years ago

  @grace-snow thank you for the feedback. I have added the form element and removed spans around text that don't need styling.

  However, I don't see how fieldset and legend works for the tip amount but I saw its use for the tip % area. Could you elaborate how i can use it for the tip amount.

  Also, the description list and headings, I don't know how I'm gonna use them in this case.

  I'm looking forward to your feedback to make the project easily accessible and well coded.

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @GuyTito you can have a fieldset containing a legend, all the buttons and the custom input.

  I would also give all the buttons an aria-pressed attribute, which gets toggled on click (setting all others to false). So that screenreader users know which one is selected.

  To be honest though, it would be more suited to change the buttons to radio inputs

  0