Not Found
Not Found
Not Found
Request failed with status code 502
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 (react, redux toolkit, tailwind, typescript, storybook)

@wesen

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


I used storybook and chromatic for developing this, as well as redux-toolkit which was new to me. It was very fun.

Check out the chromatic site: https://www.chromatic.com/builds?appId=61cf2a6d365cb1003a3025d6

And the latest storybook: https://61cf2a6d365cb1003a3025d6-twxzrloogl.chromatic.com/

Community feedback

dewslyse 3,025

@dewslyse

Posted

Hello @wesen! Congrats on your submission. You may want to have another look at the calculator. The input fields automatically resets if you move from one to the other. E.g: Say I enter $100 in the Bill field. If I proceed to choose a button under Select Tip % or alter the value in Number of People, the preceding input(s) reset.

Marked as helpful

1

@wesen

Posted

@dewslyse good catch, it works on my dist build but not once it's on github. I'll investigate

0

@wesen

Posted

@dewslyse Ok, I got it. I only handle "Enter" to submit values, but it would be worth the effort making it fully responsive. Thanks for catching it.

1

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