Build a JavaScript Tip Calculator
I am on a mission to practice as much JavaScript as I can by completing different projects. I decided on this project because it is relatively simple and straightforward. I am already familiar with making JavaScript calculations. To create the JavaScript tip calculator project I would just have to learn how to append those calculations onto an existing html element.
A live example of the code: https://dmarcisovska.github.io/javascript-tip-calculator/
Github code: https://github.com/dmarcisovska/javascript-tip-calculator
Brainstorming Process
Before diving right in I sat down and thought about the steps needed to implement the JavaScript tip calculator.
Steps
- User enters in the dollar amount of bill
- User selects percentage amount from dropdown
- JavaScript tip calculator function multiplies the bill amount with the tip percentage to calculate tip amount
- JavaScript tip calculator adds your bill amount to tip amount calculated in previous step
- JavaScript tip calculator returns your bill amount, tip amount, and your total bill to the end user and by appending it to html
I determined that the user would need to enter in their dollar amount of the bill. I would then have them select the percentage from a dropdown to keep it more simple for me. I would also create a JavaScript tip calculator function that would grab the bill amount, tip percentage, multiply them to return the tip amount, and add the tip amount to the bill to get the total amount.
HTML
The first step is the HTML. I am using the Bootstrap starter template. I created a form to collect the bill information and the tip amount. I made sure the input type of this was a number so the user could not add in non numeric characters in the field and it would save me a step of having to validate the data. To further avoid having to validate data I set the input value minimum to 0. I also set the initial value at 100.00.
I created a section that displays the bill amount, tip amount owed, and total bill that is owed. This section is hidden through the CSS, and will later be displayed through JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Tip Calculator</title>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet"></head>
<body><div class="container-fluid">
<div class="overlay">
<h1>Tip Calculator</h1>
<hr class="white">
<p>Use the form below to calculate your tip.</p><div class="card mb-4" id="bill-card">
<div class="card-body">
<div class="d-flex justify-content-between mb-2">
<div>
Bill
</div>
<div id="bill">
<p id="bill-p"> </p>
</div>
</div>
<div class="d-flex justify-content-between">
<div>
Tip
</div>
<div id="tip">
<p id="tip-p"> </p>
</div>
</div>
<hr>
<div class="d-flex justify-content-between">
<div>
Total
</div>
<div id="total">
<p id="total-p"> </p>
</div>
</div>
</div>
</div><div class="card mb-4">
<div class="card-body"><div class="form-row">
<label class="mb-sm-2 mt-3" for="billInput">Bill Amount</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="number" class="form-control" id="billInput" placeholder="" min="00.00" value="100.00" step="0.010">
</div>
</div><div class="form-row">
<label class="mb-sm-2 mt-3" for="tipForm">Tip Amount</label>
<select class="form-control" id="tipForm">
<option value=".05">5% </option>
<option value=".1">10% </option>
<option selected value=".15">15% </option>
<option value=".2">20% </option>
<option value=".25">25% </option>
</select>
</div></div>
</div><button type="button" class="btn btn-outline-light btn-lg btn-block" onclick="calcTip()">Calculate Tip Total</button></div>
</div>
<script src="scripts.js"></script>
</body>
</html>
CSS
Now let’s style the JavaScript tip calculator. I found a cool background image of a cafe to add to the javascript tip calculator. I also thought it would be cool to add a blurry see through background in the area where all the info is displayed. I then styled the font, and the hr divider in the CSS.
html, body, .container-fluid {
width: 100%;
height: 100%;
}.white{
width: 50px;
height: .5em;
border: 0; border-top: 1px solid #ffffff;
}.container-fluid,
.overlay:before {
background: url(https://cdn.pixabay.com/photo/2018/07/14/15/27/cafe-3537801_1280.jpg) no-repeat fixed 0 0 / cover;
}.card {
color: gray;
}.container-fluid {
align-items: center;
display: flex;
justify-content: center;
}.overlay {
margin: 0 auto;
max-width: 768px;
overflow: hidden;
padding: 50px;
position: relative;
color: white;
font-family: 'Lato', sans-serif;
text-align: center;
z-index: 0;
}.overlay:before {
content: '';
filter: blur(20px);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}#bill-card {
display: none;
}
JavaScript
I created a JavaScript tip calculator function called calcTip. In the function I grab the tip amount value. I also grab the bill amount input value and set those both to variables so they can be used easily later. Then I find the bill card element and set it as a variable, which will be later used to display the billcard element which is currently hidden.
Next step is turning the tip amount value and bill amount value to numbers from strings, so I can calculate math on both of these (things will not go as expected if you add strings together).
I then grab the html elements that are currently blank and will house the calculated bill, tip, and total.
Next is the calculations. I calculate the total bill amount by multiplying the tip amount with the bill amount. I calculate the total bill by adding the total tip amount with the bill.
I then append the tip, bill and total values to the blank elements mentioned in the paragraph above the last one. I used .toFixed(2) on the values so they will show in a dollar amount.
Lastly, I set the bill card element to visible so you can now see the card that shows the amount owed.
function calcTip(){// grab the input values
let tipAmount= document.getElementById("tipForm").value;
let billAmount = document.getElementById("billInput").value;
let billCard = document.getElementById("bill-card");//turn strings into numbers
let tipAmountNumber = parseFloat(tipAmount);
let billAmountNumber = parseFloat(billAmount);
//grab elements
let bill = document.getElementById('bill-p');
let tip = document.getElementById('tip-p');
let total = document.getElementById('total-p');// calculations
let totalAmount = (tipAmountNumber * billAmountNumber);
let totalBill = totalAmount + billAmountNumber;//append content
tip.innerHTML = "$" + (totalAmount).toFixed(2);
bill.innerHTML = "$" + billAmountNumber.toFixed(2);
total.innerHTML = "$" + totalBill.toFixed(2);
// show the bill info
billCard.style.display = "block";
}
Originally published at https://denisa.dev on April 23, 2020.
