Handy Tip Calculator

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. The layout in desktop is fine, mobile is fine as well, but I agree with Teegamtee about the responsiveness. You need to make the layout scalable to screen changes.

  Some other suggestions would be:

  • nav element on this one is not advisable, since there aren't any navigational links being used. Use a div or header on the website logo.
  • The website logo should also have alt="splitter" as the value. Avoid using words that relates to "graphic" like "logo, image, icon.." as the value for alt attribute. Assistive tech will handle those for you.
  • I wouldn't nest all the layout inside a form I would nest only the left part of the layout but not the right part.
  • Avoid using multiple h1 on a webpage. Only use 1, on this challenge, the h1 would be a lot better if this was a screen-reader only h1. You might want to search about screen-reader only text.
  • The label elements are good, but you forgot to add the id attribute on the input element where the label points to.
  • The dollar-icon and the person-icon should have used alt="" on them, since those images only acts as a decoration. If an image is used only for decoration, use alt=""on it, if the image adds to the content, then use a descriptive alt.
  • It would be great to have a visual indicator for each input element, an outline or border would be really great in their :focus-visible state. This way users would know where they are currently at when navigating your website. Also on the radio buttons, it would be a lot better if those were nested inside a fieldset element along with legend. This way users would know what these set of radio buttons are for. A hint as well for making a visual indicator on the input that is nested inside a label:

  label:focus-within {  # use the class for the label that nest the `input`
    apply the visual indicators
  }
  

  • You are missing a label for the people input.
  • The result numbers should have just used a p tag on it and not a heading, especially not h1.

  Also, I find this challenge quite hard especially accessibility, since data changes for every keypress.

  Lastly, just adjust the mobile breakpoint, the 375px is just design, it is not the mobile breakpoint.

  Aside from those, great work.

  Marked as helpful

  1

  ---

  

  Andre Rodrigues•255

  @aanacifPosted about 3 years ago

  @pikamart Wow dude, Thank you so much for taking the time and going through all those details. Such good info.

  I did some adjusting, went through most of it.. Only thing I left out was the fieldset part, as that would require more deep adjustments, so I'll either do it later or keep that in mind for my next project....

  Again, thank you so much, see you around ;)

  1
• Account deleted

  I shouldn't be able to enter a negative number on all of the fields because it just doesn't make sense.

  And you solution is not responsive, well not until you reach 375px, so basically it's not responsive and that should be fixed.

  Marked as helpful

  1

  ---

  

  Andre Rodrigues•255

  @aanacifPosted about 3 years ago

  @thulanigamtee You're right, buddy. Thanks for the heads-up. I fixed some of it ;)

  0