Tip calculator js

Community feedback

• 

  P

  Matt Pahuta•670

  @MattPahuta

  Posted 8 months ago

  Nicely done completing this challenge. Your solution is a close match to the design comp, your JS code is nicely concise and easy to understand, and you're using a lot of great responsive units and custom variables in your CSS. I especially like how you've used the clamp function to handle the font sizes and keep the styles simple. However, I did go ahead and flag a few areas where you might consider improving your solution:

  • Media queries should be defined using rem or em units. Also, I think you could probably get away with just a single media query for this particular project.
  • On larger screens, your app is stretching awkwardly wide. Rather than setting a width property in percentages at different breakpoints, a better practice is to use a max-width using rem units.
  • Your app functions well, but for me, this is one big form, especially since we have input elements involved. A future revision would be to organize the html within a form element and allow for some of the native form behavior to assist in collecting the data and more gracefully rendering and announcing errors.
  • You might consider adding the 'step' attribute to your bill input field so that the spin buttons can increment/decrement the amount accurately. As it is now, you can only go up and down by whole numbers.
  • I'm confused about the label element you have for the 'select tip' section. labels should be paired with an input but this one is standing alone. It will return an error using an online validation tool like this one. This section is a good use case for a fieldset element with a legend instead of a label. The buttons could be radio inputs styled as buttons.
  • After entering values and calculating the amounts, using the reset button triggers the 'number of people' error to render. You should be able to fix this with some simple logic added to your JavaScript.

  Again, well done completing the challenge!

  11

  Marked as helpful