This is a solution to the Tip calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
The results are updated live, as values are entered. Number of persons is assumed to be 1, unless other number is entered.
Reset button is disabled until at least one value is entered.
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Flexbox
- Mobile-first workflow
- JavaScript
This was a fun challenge! The percentage "buttons" are actually hidden radio buttons, with their labels styled as buttons. I've tried to keep it accessible.
- My Basic Template pretty much based on Stephanie Eckless' HTML / Sass Jumpstart but much simpler;
- Custom CSS Styles for Form Inputs and Textareas
- Pure CSS Custom Styled Radio Buttons
- Customize Radio Button Appearance with CSS