Responsive tip-calculator

Community feedback

• 

  Arash Asghari•220

  @AriArash44

  Posted 25 days ago

  I checked out your project, and overall, it's really well-executed! The UI closely follows the original design, and the tip calculation works perfectly. Using Tailwind CSS, TypeScript, and React is a great choice for this kind of project—your tech stack is solid!

  A Few Suggestions for Improvement:

  • Restricting Alphabetical Input: To enhance usability, you might want to prevent users from entering non-numeric characters in the input fields. A simple regex like .replace(/[^0-9]/g, "") would help.
  • Custom Error Messages: If you don't like to restricting alphabetical inputs, Instead of the generic “Can't be zero” error message for all scenarios, consider providing more context-aware validation messages to improve the user experience.
  • Disabled Button Styling: You could use Tailwind’s disabled: modifier to change the reset button’s appearance when the user hasn’t filled the inputs yet. This would offer a clearer visual cue.
  • Tablet Screen Handling: I appreciate that you accounted for middle screen sizes, but the higher breakpoint seems a bit large for standard tablet dimensions. At those sizes, using the desktop UI might provide a better experience.

  Overall, great work! Keep it up.

  Cheers!

  00

  Marked as helpful