Solution : Live Site URL
This is a solution to the Tip calculator app challenge on Frontend Mentor.
Your challenge is to build out this tip calculator app and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Calculate the correct tip and total cost of the bill per person
- HTML
- CSS
- CSS Grid
- CSS Flexbox
- JavaScript
When it comes to CSS for the Input elements and form elements, they always trip me up. There's always more to finer details to look at. Surprising the CSS took more time than expected.
The JS started being very simple, the custom tip amount input required some special work all around. But as I kept adding eventListeners to all the input fields more and more edge cases started showing up. I think I covered all of the edge cases I could think of.
There are eventListeners for
- bill amount input field
- tip selection (each selection + custom tip input)
- number of people
Editing, adding or updating any of those fields should calculate the tip amount and show it in the output field immediately.
The reset button resets everything to the default state.
- Live solution screenshot(s)