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 :)