Frontend Mentor - Tip calculator app solution
My Approach to solving the challenge
This is a solution to the Tip calculator app challenge on Frontend Mentor.
Table of contents
Overview
The challenge
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
Screenshot
Links
- Solution URL: tip-calculator-app-files
- Live Site URL: tip-calulator-site
My process
- Draft out the layout
- Structure the project using semantic markups
- Link my external stylesheet and apply generic rules, import and apply font
- Set my CSS variable
- Start implementing project layout using flexbox
- Manipulate DOM to fetch form input values
- Played around functionality
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Vanilla JS
What I learned
- Removing the default icons in the number input
.form-input input[type=number]::-webkit-inner-spin-button,
.form-input input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}
- Fetching the values from an input after the user has finished inputting the values and replace the prepended percentage sign from the innertext of the tip percentages button.
bill.addEventListener("keyup", e => {
billAmount = Number(e.target.value)
})
noOfPeople.addEventListener("keyup", e => {
numOfPeople = Number(e.target.value)
})
Array.from(tipPercentages).forEach(tipPercentage => {
tipPercentage.addEventListener("click", e => {
if (e.target.innerText.include("%")){
tipPercentage = Number(e.target.innerText.replace("%", ""))
}
})
})
Continued development
- -webkit appearance
- CSS variables
- Array Functions
Author
- LinkedIn - Oghenemeru Avwemoya
- Frontend Mentor - @skiboss
- Twitter - @meruAvwemoya
Acknowledgments
- @devdre1909
- [Future Academy Africa] (futureacademy.africa)