Write a script that creates a tip calculator. The user should be able to enter t
ID: 3898801 • Letter: W
Question
Write a script that creates a tip calculator. The user should be able to enter the amount of the bill, the tip percentage, and the number of people. The calculator should calculate the tip amount, the total of the bill plus the tip, and the total per person, which assumes the check is being split equally. Note: You do not have to open a prior exercises to complete this.
You may find it useful to use the Date object, and to create variables to store elements of the date.
When you open your form for the first time, it should resemble this:
If there are two people, and the bill is $100, and the tip is 20%, your output should resemble this:
Tip Calculator Bill Tip %; # ofPeople: 11 Tip amount: Total: Total per Person: 0 (enter as a whole number)Explanation / Answer
<!DOCTYPE html>
<head>
<title>Tip Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Tip Calculator</h1>
</header>
<form action="javascript:void(calc())">
<table>
<tr>
<td>Bill:</td>
<td><input id="bill" type="text"></td>
</tr>
<tr>
<td>Tip %:</td>
<td><input id="tip" type="text"></td>
</tr>
<tr>
<td># of People:</td>
<td><input id="ppl" type="text"> </td>
</tr>
<tr>
<td>Tip amount:</td>
<td><input id="tipAmount" type="text" placeholder="0"></td>
</tr>
<tr>
<td>Total:</td>
<td><input id="total" type="text" placeholder="0"></td>
</tr>
<tr>
<td>Total per Person:</td>
<td><input id="finalTotal" type="text" placeholder="0"></td>
</tr>
</table>
<input type="submit" value="Calculate">
</form>
</div>
<script>
function calc() {
var bill = Number(document.getElementById('bill').value);
var tip = Number(document.getElementById('tip').value);
var ppl = Number(document.getElementById('ppl').value);
var tip = bill * .01 * tip;
var total_bill = bill + tip;
var perPerson = total_bill / ppl;
document.getElementById("tipAmount").value= tip;
document.getElementById("total").value= total_bill;
document.getElementById("finalTotal").value= perPerson;
}
</script>
</body>
**Comment for any further queries.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.