I have created a Bill Splitter page that asks for the total bill amount, tip percentage, and the number of people. Then it displays the tip and the total amount (including the tip) each person has to pay out of that bill. I have used simple vanilla JavaScript to complete this project. Being a beginner in front-end development, I want to adapt to all the best practices. I am looking forward to all your feedback.
My Website should have the following features:
- 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
let bill_amount = document.getElementById("amount");
let humans = document.getElementById("people");
let tip_buttons = Array.from(document.getElementsByClassName("tip"));
let reset_button = document.getElementById("reset");
let custom_tip_button = document.getElementById("custom");
let tip_percentage, tip_person, total_bill_person;
let bill_amountFilled = false;
let humansFilled = false;
let buttonClicked = false;
tip_buttons.forEach(function(button) {
button.addEventListener("click", function(event) {
tip_buttons.forEach(function(otherbtns) {
otherbtns.classList.remove("btn-selected");
})
button.classList.add("btn-selected");
tip_percentage = parseFloat(button.innerHTML);
buttonClicked = true;
calculateTip();
});
});
custom_tip_button.addEventListener("input", function(event) {
tip_buttons.forEach(function(button) {
button.classList.remove("btn-selected");
})
tip_percentage = parseFloat(event.target.value);
buttonClicked = true;
calculateTip();
});
function calculateTip() {
if (bill_amountFilled && humansFilled && buttonClicked) {
tip_person = (parseFloat(bill_amount.value) * (0.01 * parseFloat(tip_percentage))) /
parseFloat(humans.value);
total_bill_person = parseFloat(bill_amount.value) / parseFloat(humans.value) +
tip_person;
document.getElementById("tipPerPerson").value = tip_person.toFixed(2);
document.getElementById("totalPerPerson").value = total_bill_person.toFixed(2);
}
}
bill_amount.addEventListener("input", function(event) {
if (bill_amount.value.trim() !== "") {
bill_amountFilled = true;
calculateTip();
} else {
bill_amountFilled = false;
}
});
humans.addEventListener("input", function(event) {
if (humans.value.trim() !== "") {
humansFilled = true;
calculateTip();
} else {
humansFilled = false;
}
});
reset_button.addEventListener("click", function() {
location.reload();
});
document.addEventListener("click", function(event) {
event.preventDefault();
});
body {
background-color: hsl(185, 41%, 84%);
font-family: "Space Mono";
}
h4 {
color: hsl(183, 100%, 15%);
letter-spacing: 15px;
margin: 5% 50% 0% 45%;
}
h5 {
font-size: small;
color: #fff;
display: inline-block;
}
h6 {
margin: 3%;
color: hsl(185, 22%, 45%);
}
.line2 {
margin-top: 0%;
}
.calculator {
display: flex;
margin: 4% 15% 0% 20%;
background-color: #fff;
border-radius: 2.5%;
z-index: 1;
width: 60%;
padding: 0.9%;
}
.left-box {
float: left;
background-color: #fff;
width: 50%;
padding: 2%;
box-sizing: border-box;
}
.left-input {
background-color: hsl(189, 41%, 97%);
border: none;
margin-bottom: 5px;
text-align: right;
color: hsl(183, 100%, 15%);
width: 80%;
}
.left-input:focus {
outline: none !important;
border: 1px solid aquamarine;
box-shadow: 0 0 10px #719ECE;
}
#custom {
display: inline-block;
background-color: hsl(189, 41%, 97%);
color: hsl(183, 100%, 15%);
width: 25%;
height: 11%;
text-align: center;
border-radius: 5%;
cursor: pointer;
}
.btn {
width: 80px;
margin-right: 20px;
margin-bottom: 10px;
background-color: hsl(183, 100%, 15%);
border: none;
}
.btn-selected {
background-color: hsl(166, 61%, 39%);
}
.custom:focus {
background-color: hsl(161, 28%, 62%);
color: #fff;
}
.right-box {
float: right;
width: 50%;
box-sizing: border-box;
background-color: hsl(183, 100%, 15%);
padding: 2.5%;
border-radius: 5%;
}
.right-input {
width: 50%;
background-color: hsl(183, 100%, 15%);
border: none;
outline: none;
color: hsl(161, 42%, 58%);
text-align: right;
height: 30px;
font-size: xx-large;
}
.btn-lg {
background-color: hsl(161, 42%, 58%);
width: 100%;
margin-top: 100px;
}
@media only screen and (max-width: 600px) {
h4 {
margin: 5% 30% 5% 40%;
}
.calculator {
display: inline-block;
width: 100%;
margin-left: 0%;
}
.left-box {
display: inline-block;
width: 100%;
margin-left: 0%;
}
.right-box {
display: inline-block;
width: 100%;
margin-left: 0%;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays
site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Tip Calculator App</title>
<!--Font Awesome Links-->
<script src="https://kit.fontawesome.com/fd6cc398e6.js" crossorigin="anonymous">
</script>
<!--Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Space+Mono:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
<!--Bootstrap Links-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="top-heading">
<h4 class="line1">SPLI</h4>
<h4 class="line2">TTER</h4>
</div>
<main>
<div class="calculator">
<div class="left-box">
<h6>Bill</h6>
<span class="text-addon"><i class="fa-solid fa-dollar-sign"></i></span>
<input type="text" class="left-input" id="amount">
<h6>Select Tip %</h6>
<button type="button" class="btn btn-primary tip">5%</button>
<button type="button" class="btn btn-primary tip">10%</button>
<button type="button" class="btn btn-primary tip">15%</button>
<button type="button" class="btn btn-primary tip">25%</button>
<button type="button" class="btn btn-primary tip">50%</button>
<input type="text" class="left-input" id="custom" placeholder="Custom">
<h6>Number of People</h6>
<span class="people-addon"><i class="fa-solid fa-person"></i></span>
<input type="text" class="left-input" id="people">
</div>
<div class="right-box">
<h5>Tip Amount / person</h5>
<input type="text" id="tipPerPerson" class="right-input" readonly placeholder="$0.00"><br><br><br>
<h5>Total / person</h5>
<input type="text" id="totalPerPerson" class="right-input" style="margin-left:
40px;" readonly placeholder="$0.00"><br><br><br>
<button type="button" class="btn btn-primary btn-lg" id="reset">Reset</button>
</div>
</div>
</main>
</body>