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

@Akash13112003

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@KaustubhMaladkar

Posted

Nice work! I just have some suggestions on how this could be done better-

  1. According to the design, you had to remove the counter from the number inputs
  2. You can performs checks to see that the output you get is not NaN, so that you only display a valid answer
  3. You were supposed to use a "calculate" button, which would be disabled until the user inputs were found to be appropriate
  4. Inputs with inappropriate values (including bill amount), would have looked better with a red border, and appropriate ones with a green border

Accessibility issues (Check your accessibility report for more information):

  1. Always add a "for" attribute for label elements, matching with id of the input the label is bound to
  2. Never have attributes with the value of empty string

Code structure:

  1. Try and use callback functions in event calls instead of declaring functions outside and calling them when an event is fired
  2. Give functions better names, instead of "peopleInputFun". It took me a while to understand what it meant
  3. Use Intl.NumberFormat, instead of appending dollar manually
  4. Try to incorporate ES6 syntax in your code(arrow functions, template literals, etc.)

Don't be discouraged you did a pretty fine job! You can checkout my solution at: https://github.com/KaustubhMaladkar/Tip-Calculator

Marked as helpful

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