Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip Calculator with React Typescript

@natanaelrusli

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What I find difficult? Passing props between various button, field and label components especially with typescript

Which areas of my code that I am unsure of?

  • How I handle field changes in the main CalculatorForm component, if it is already following best practices or not
  • Project folder structures and how I split the components

Please give feedback about my code regarding the best practices that I should follow

Community feedback

@azick99

Posted

Hi there! I really like it and see you did good job!! keep on, Here some advice to improve your code from my point of view.

I think It would be easier, when you make main functionality in app.tsx from there you can pass props easier to components.

handling buttons. First make button like container with children prop and create 5 buttons with different percent pass event. you can check my solution I did like I said it is easier.

I think there is problem with custom input and total. total must be tip amount value that you have overall but tip amount must divide total to number of people like this total / numPeople.

I hope you understand me if no you can check my solution although I'm not sure I did it perfectly but it was easy for me

Marked as helpful

0

@natanaelrusli

Posted

@azick99 Hi! Thanks a lot for the feedback! really appreciate it and yes it is quite tricky for me on managing props in components and your feedback would help me to improve a lot.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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