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.
Note: Delete this note and update the table of contents based on what sections you keep.
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
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
I actually ended up taking a break from this project midway through. I'd written all the html and css, but I hadn't really worked with many input fields recently, so I wanted to work on some smaller projects that focused specifically on that aspect. I'm glad I did, because it really helped me work through how to make this project work when I came back to it after about three weeks.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
Definitely got some good practice working with input fields and different calculations. The JS functionality for the tip buttons gave me more issues than expected, so it was great getting some practice there, as well.
I learned how to work with grid while taking a break from this project. I'd already written the html and css for this project, but if I were to build it again, I would absolutely use grid in the Tip Buttons section.
Since there wasn't a submit button on the design, I wasn't sure how exactly to initiate the calculations. I ended up making it all happen when the user presses "Enter", but I should do more research on how other developers address this problem. Looking at someone else's solution to this project, they initiated everything after the "people" input gets filled in, so I suppose that's an option.