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

Responsive React Tip calculator

P
Daniil 450

@DaniilGurski

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 are you most proud of, and what would you do differently next time?

This was my first project with test writing which was one of the main learnings for me. I learned how to use vitest and testing library a little bit and I think it will be useful in future, more large-scale projects.

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

I found it a bit difficult to find resources and examples in terms of testing, so mostly used AI to answer some not-so-obvious questions.

What specific areas of your project would you like help with?

I'd like to know how I can improve my tests. For this project I wrote one large unit test because it was difficult to figure out how to do it with the context provider involved.

Community feedback

P
Daniil 450

@DaniilGurski

Posted

Thank you for your feedback! I really thought my app was responsive until you pointed this out. There must be something small that breaks the layout on mobile.

0
SaakarX 320

@saakarx

Posted

Hey Daniil, Congratulations on completing the challenge

  • You should check for invalid inputs for the calculateTip function you have in your utils directory. When I tried to change the input to text and input letters it gave NaN error on the result section. Maybe add validation for the function arguments if they are not valid numbers, it should return 0 for both tip and total per person.

  • Also, on mobile devices the website does not look like the design provided for the challenge.

Hope this helps, overall your solution looks great ✌️.

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