Responsive tip calculator using React

Thanks for your feedback! 👍

This made me think about breaking up components into smaller units, and practiced that. The code was rewritten using a state management library called recoil as well.

However, in the case of number 3, the greater the number of people compared to the dollar, the more 0 is displayed, but I do not think it is right to indicate more decimal places.

I haven't figured out the exact answer to this yet, so I haven't fixed it.

안녕하세요 Nari Lee,

Congrats for completing this challenge ! 🙂

I'd like to suggest :

• Add some CSS transition to make your hover animations smoother. For example It could be something like transition : all 0.3s ease where "all" is the CSS property you want to animate. This article is great also to understand how and when to use ease effects (especially ease-in and ease-out) : https://css-tricks.com/ease-out-in-ease-in-out/

• I would personally try to break down the Calculator component into smaller pieces to make it simpler to read. Here I can see multiple useEffect hooks, thus they could be separated into other components that only do only 1 thing.

• It's great that you took the time to handle non authorized values such as 0 persons or 0 dollars, but to push it even further you could handle the situation when there are too many people compared to the bill amount. If I put 3$ with 1000 persons the tip amount and total are equal to 0.

Otherwise, well done for the challenge and it's also responsive, which is great !

Have a nice day ! 🌞