Skip to content
Submitted 2 months ago

Responsive React Tip calculator

Daniil•520
@DaniilGurski
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

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

  • Daniil•520
    @DaniilGurskiPosted about 2 months ago

    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
    @saakarxPosted about 2 months ago

    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

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