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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
My knowledge in DOM manipulation in Javascript heightened. I also learnt how to think critically when it comes to writing javaScript programs; from the problem definition, to writing Pseudo codes, then finally coding the actual solution.
- These are some snippets I am proud of
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
// Tip calculator function
function calculateTip() {
// Get the bill amount value
const billAmount = parseFloat(billAmountInput.value);
// Get the number of people value
const numPeople = parseFloat(numPeopleInput.value);
// Get the tip percentage value
let tipPercentage;
const customTipInput = document.querySelector(".custom-value");
if (customTipInput.value !== "") {
tipPercentage = parseFloat(customTipInput.value);
} else {
const activeTipBtn = document.querySelector(".button.active");
tipPercentage = parseFloat(activeTipBtn.value);
}
// Calculate the tip amount, total amount, tip per person, and total per person
const tipAmount = billAmount * (tipPercentage / 100);
const totalAmount = billAmount + tipAmount;
const totalPerPerson = totalAmount / numPeople;
const tipPerPerson = tipAmount / numPeople;
// displaying the result and error handler of the total per person value
if (isNaN(totalPerPerson)) {
document.getElementById("total-per-person").innerText= "0.00"
} else {
document.getElementById("total-per-person").innerText= (totalPerPerson.toFixed(2));
}
// displaying the result and error handler of the tip per person value
if (isNaN(totalPerPerson)) {
document.getElementById("tip-per-person").innerText= "0.00"
} else {
document.getElementById("tip-per-person").innerText= (tipPerPerson.toFixed(2));
}
}
- Frontend Mentor - Oduwole Ayomipo
- Twitter - JustAyooo
ME and OpenAI