Responsive Tip Calculator App using CSS Grids/Flexboxes & JavaScript
Design comparison
Solution retrospective
Hello, Mentors
My responsive solution for this challenge with some tweaks considering users' UI/UX experience.
My Learning
- Writing semantic HTML5 markup with HTML accessibility
- Working with CSS Grid/Flexbox
- Mobile/Desktop first workflow
- Bootstrap CSS Framework
- Form Validation & Handling
- Javascript DOM Manipulation
- Javascript OOPS Concepts
What users can do
- 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
Community feedback
- @ClaudiuManuelPosted about 1 year ago
Hello,
At a very first glance I saw that you still have some commented code in the css file. Another thing I noticed is that when you click to enter a custom tip amount you're forced to click a second time on the field in order to have it focused. I would do it automatically if the user already clicked custom.
Other than that, the solution looks great. Good job!
Marked as helpful1@KrishnaVishwakarma1595Posted about 1 year ago@ClaudiuManuel Thanks for your feedback. I'll update this too. Very valuable for user experience.
0@KrishnaVishwakarma1595Posted about 1 year ago@ClaudiuManuel Made that change. Thanks!
1
Please log in to post a comment
Log in with GitHub
Join 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