Mobile-first tip calculator app

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  Hey in general this looks great, the calculations work well.

  There's a few points that may be worth looking at:

  You're defaulting the inputs to empty, but the calculation is assuming an initial number of people as 1. I think having one as the default is sensible, so worth making that the initial value in the form too.

  You're using <input type="text"> but the user can only enter numbers and you're doing a bunch of validation of that in the script. If you change that to <input type="number"> you can avoid the javascript validation. Plus, for users on mobile, it will pop up the number keypad, rather than the standard text keyboard, so it will be much easier to use. It adds the challenge of how to format that number for display, but there are ways of solving that while still making the number entry user friendly.

  There are some semantic issues with the HTML. The form inputs should be labelled with <label> elements, not with <h1>. Your validation errors should only be in the DOM when there's an error, at the moment they are there all the time and just hidden with CSS. They should be linked to the input field with aria-describedby the input should have aria-invalid so that they're correctly read out by screen readers.

  Marked as helpful

  0

  ---

  

  Spencer Runde•640

  @spencerrundePosted about 3 years ago

  @AlexKMarshall Thank you very much for the feedback! I've changed the input fields type and replaced the h1 elements with labels. I'll look into the aria tags, accessibility is definitely one of my weak spots.

  0
• 

  Mariusz Olszewski•360

  @molszewski34Posted about 3 years ago

  Hey. Good solution.

  If you want you can change a bit mobile view. Right now is a bit too large for mobile devices as phone.

  0