Tip Calculator App using SvelteKit and Tailwind CSS

Community feedback

• 

  maricastroc•510

  @maricastrocPosted about 1 month ago

  Your solution is really well thought out! I loved the effect you added to the tip amount/total and tip amount/person counters. A few small suggestions:

  • It would be interesting to set a maximum value for the tip amount. This prevents the application’s design from breaking if I enter an extremely high number.
  • In the custom tip field, it would be interesting to block the input of negative values;
  • For the "tip percentage" section, it might be useful to add more aria-* attributes, such as aria-checked for the radio input fields. This improves the user experience for those using screen readers.

  Other than that, I think your solution is excellent, and the code is very well organized! Great job!

  Marked as helpful

  1

  ---

  

  P

  Jaylen Baxter•340

  @JYLNPosted about 1 month ago

  @maricastroc Thank you for your input! I will work on adding maximum constraints as well as more accessible aria properties to the form elements. I do have an onchange handler on all the inputs to disallow negative numbers, but it appears it still does the calculation if the user does not unfocus the input. Do you have suggestions for which handler to use? I tried an oninput handler while coding the project, but it was causing weird behavior where it wouldn't give the correct calculation while on input, and I believe it was causing lag within the browser if I remember correctly, which is why I settled on the onchange handler. I may have to try it again so that it happens more in real time rather than after the element is unfocused.

  0