Responsive tip calculator using CSS flexbox
Design comparison
Solution retrospective
Any tips or suggestions highly appreciated.
Community feedback
- @molszewski34Posted about 3 years ago
Hey. Calculation part works but there are few issues you should work with.
- Output should show .toFixed(2). This is required to show proper amount of currency. Right now when user provide 100$ for 3 persons it shows 33.333333.
- Reset button should show active status when user use number input and be disabled after use of reset function.
- Alert must be shown for person input and has red border when condition is false. 4.There are problems with responsiveness. Some elements as reset btn and output move out of fields and tip amount is not shown on lower resolutions. Especialy with big output. Fixing issue number 1 should also fix some of problems.
- It is ok to start function by clicking option button but its better to start it with one of inputs - person field or bill.
Checked on firefox and chrome.
Marked as helpful0@mjmorrison10Posted about 3 years ago@molszewski34 Thank you.
- I never came across such an issue when testing it. In fact, all my totals per person ended in a regular number (10, not 10.50)
- I forgot about the reset button entirely.... Oops. Thanks!
- Alerts - There's no problems with the output if you put nothing in the number of people section. Recommend error message even if it's an optional input?
Note to self: Noticed a bug where I can't touch the bill input on small screen due to error message?
0 - @whoiskekeanywayPosted about 3 years ago
Very good work here. there is a bug with the total amount per person. it displays the total amount of the bill not for each person, also center your main content on the laptop view.
Marked as helpful0@mjmorrison10Posted about 3 years ago@whoiskekeanyway I have display: flex; align-items: center; justify-content; center; It should be centered, and there's no margins on the main container?
I believe the total is accurate? If I put in a bill of $100, and a tip of 50%, increasing the total price to $150. Then with two people, that's $75. That's what is displayed when I input those numbers.
Note to self: Found a bug when dividing by 0 people.
0 - @molszewski34Posted about 3 years ago
Yes. I see that span when in position: absolute moves over input and block it.
0
Please log in to post a comment
Log in with GitHubJoin 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