Responsive tip calculator using React

Community feedback

• 

  Nari Lee•60

  @eenareePosted about 3 years ago

  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.

  0
• 

  Rayane•1,935

  @RayaneBengaouiPosted about 3 years ago

  안녕하세요 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 ! 🌞

  0