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
Tip.calculator.app.mp4
- Solution URL: https://github.com/yash20010/tip-calculator#the-challenge
- Live Site URL: https://yash20010.github.io/tip-calculator/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Vanilla JavaScript
Learnt about CSS outline property for input HTML elements
.people input:focus {
outline: none;
border: 2px solid var(--strong-cyan);
}
- Clean javascript to reduce redundant code
- Update it to OOP style form functional style
- MDN - This helped me with HTML, CSS and Javascript.
- Favicon.io - This helped me create favicon quickly, for multiple devices and for free.
- Stack Overflow - This helped me lookup a lot of tiny things with one google search.
- Website - Yash Parekh
- Frontend Mentor - @yash20010
- Twitter - @yash20010
- My wife and my daughter (for all their support)
- Leon Noel (who taught me everything about full stack web development)