Skip to content
Submitted 6 months ago

Tip calculator app using React & Tailwind

tailwind-css, vite, react
Specro•270
@Specro
A solution to the Tip calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Read a bit about useMemo and was able to overcome all NaN cases (I think) :)

What challenges did you encounter, and how did you overcome them?

At first I thought I could hold the tip percent state in the tip input component but the reset button made me lift it up. Also I kind of hate how the input with an icon in front requires that much HTML but it seems like all other solutions are pretty hacky.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Serhii Orlenko•415
    @grifano

    Hi Specro,

    Congratulations on completing the Tip Calculator challenge! 🎉 I really like your approach to handling the “value not zero” validation—it’s super clean and efficient. I don’t know why I didn’t think of using a utility function for that myself!

    I also had to dig into useMemo recently, especially when I ran into warnings while using useEffect. After exploring it further, I realized it’s a great best practice to avoid unnecessary re-renders—so it’s awesome to see you using it here.

    Overall, you did a fantastic job! 👏 The only thing I noticed is that the Custom field seems to be missing characters in its placeholder. Fixing that would make it look more polished. I’d also suggest adding a red outline to the field when the error message (“Can’t be a zero”) appears. If you want to take it a step further, you could include a notification or toast for a better user experience.

    Great work! Keep up the amazing effort, and happy coding as you take on new challenges! 🚀

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