Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip Calculator App with Vanilla JS

@marcus-hugo

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is the most JavaScript I've written for a challenge! Should the display show NaN and Infinity or just '0.00' when the inputs aren't filled in? I think I started out with an organized approach, but by the end, felt it could be simplified! Should I have kept more variables on a global scope? Should I have had more functions?

Community feedback

Martha 510

@Mtc-21

Posted

greetings some recommendations:

  • make an effective validation of the fields, that indicates to the user a message with the errors.
  • do not allow data in negative, zeros to the left, the following 0123 is taken as a positive number
  • do not allow data like this 12-2
  • in the person field no decimals should be allowed in addition to the above
  • in the person field a number >100 should not be allowed in addition to the above
  • the number of persons should not be greater than the invoice number, invoice to 1 and persons to 50, does not make sense.

Marked as helpful

0
David Dyer 185

@davidbdyer

Posted

It doesn’t calculate. It just displays NaN and Infinity for me. Tip Amount and Total should never read NaN or Infinity. You can use an If to display the placeholder text when the calculations equal NaN or Infinity. The input fields shouldn’t allow non-numerical character input except for a comma and period.

The responsiveness breaks, and the app is clipping on iPhone 12 Mini and Galaxy S20. Both have a max-width of 360px in portrait mode. I understand is hard to know if you don't have an app that displays multiple devices for you.

Marked as helpful

0

@imparassharma

Posted

Total should give Bill amount + Tip amount

Marked as helpful

0

@marcus-hugo

Posted

@imparassharma Thanks! I wasn't too sure about that!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord