Tip Calculator App using SvelteKit and Tailwind CSS

Solution retrospective
I originally built the tip selection portion of this project using regular button elements instead of any general form selection elements, but after learning more, I found it is better semantically and for accessibility to use the form selection elements. I decided to refactor the regular buttons to use radio buttons instead.
What specific areas of your project would you like help with?Any and all feedback is welcome!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @maricastroc
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
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