Tip calculator app

Community feedback

• 

  P

  Darkstar•1,440

  @DarkstarXDD

  Posted 8 months ago

  Hey, your solution looks good, however i have few suggestions.

  • Instead of input type="text", you can use input type="number" for the bill, custom and people count. That way the user won't be able to enter any text entries at all. You can still do your validation in JS, but as a first layer of filtering i think it's far better to limit what the user can enter into the input fields.
  • The inputs needs labels. The elements bill, number of people should actually be label elements and their for attributes should point to the input element they are labelling. Currently you have them as p elements.
  • The icon images needs empty alt attributes. alt="". They are decorative images so no need any descriptive alt text but still the alt attribute needs to be their with an empty string. Otherwise some screen readers may read the file path of the icon as the alt text.
  • The error elements should have aria-live attributes. So when that element is populated with the error message it will be announced to screen reader users.
  • Ideally the tip buttons should be radio buttons (input type="radio") rather than normal buttons. For this design you will need to custom style the radio buttons if you went that way. There are few ways you can do that. How i have done it is visually hide the radio button and style the label to look like radio buttons and based on the checked and focus states of the radio button i styled the label.
  • I would put the logo image inside the main as well. Usually the logo image along with a navbar lives in the header landmark element but in this design i think it's fine to have it inside the main. Either way it should be inside an landmark element. Be it a header or the main. Currently it's not inside any.

  00