Design comparison
Solution retrospective
I am proud that I wrote this more modular and I believe I did a solid job on naming function descriptive names
What challenges did you encounter, and how did you overcome them?A few challenges I faced was writing a function that updated the object in a way that wasn't overly complicated
What specific areas of your project would you like help with?Still working on pixel perfection!
Community feedback
- @VishikaPosted 3 months ago
Hey, great work on your solution, I really like your javascript, it was very well organised and easy to read!
Some tips on your solution:
- I quite liked how you made the whole output section into a button, I really really at odds with how to get the user to signal input! Although it might be helpful to indicate it can be used as a button with `` and something like:
.calculated_amount:hover { cursor: pointer; opacity: 80%; /* or a background / color change */ }
- I noticed that you had been playing around with the the custom tip inputs width, I had a similar, though different problem, instead of specifying the width at different media queries you can simply have the following:
.input_btn { width: 100%; box-sizing: border-box; }
- In your media query, update the grid template rows, so you don't get an extra line when you shift to three columns:
screen and (min-width: 1000px) { .tip-buttons { grid-template-rows: repeat(2, 1fr); } }
- Finally your
#bill_amount
and.party
inputs would look better withwidth: 100%;
at certain screen widths :)
0 - @matt2282Posted 3 months ago
Good job on the overall layout of the app, but I would recommend giving this another shot. I can't seem to get your calculator to give any values or at least when it does output some values they are not correct.
The grey "bill" and "number of people" and "custom" divs do not go 100% of the container and they don't line up with everything else. The text in placeholder for Custom also isn't centered.
Some additional features you may consider adding: -border around the custom tip, bill, number of people and amount to know you have it selected. -when you press reset it may be preferential to set 0 as the placeholder and not have it be an actual zero. Additionally, having the reset unselect the selected tip value if you prefer. -error checking for zero and subsequent error message -allow only positive integers as the input -greying out the reset button after it is pressed.
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