Introduction | Demonstration Calculator | Source Code
How The Tip Calculator Works
This is a simple calculator for calculating a tip and splitting the bill between several people. Enter in the amount of the bill, the tip percentage, and the number of people paying. Then click ”Calculate” to get your results.
If you change the values, click the “Calculate” button again to get a new result.
Introduction | Demonstration Calculator | Source Code
Demonstration Calculator
Tip Calculator
Tip Per Person:
Total Per Person:
Full Amount:
Introduction | Demonstration Calculator | Source Code
Tip Calculator Source Code
This calculator is licensed to you under Creative Commons Attribution 3.0. If you would like to use the source code on your site or create a derivative work from it, you must include the following HTML on the page where the calculator appears. We’re giving you this code for free with a legal license to use it. All you have to do is credit us in the manner we specify.
Required Credit HTML
INSTALLATION
Just cut and paste the Javascript code and HTML form below into your page. If you want to customize the appearance of the form, feel free. Just make sure the input name and form id/name values are not changed.
<script type="text/javascript">
function calcTip() {
var formvals = getFormVal();
var totalPeople = formvals[0];
var percentageTotal = formvals[1];
var billAmount = formvals[2];
//tip per person
var total = ((billAmount * percentageTotal) * .01) / totalPeople;
total = Math.round(total * 100) / 100;
total = total.toFixed(2);
//total per person
var totalPerson = ((total * totalPeople) + billAmount) / totalPeople;
totalPerson = Math.round(totalPerson * 100) / 100;
totalPerson = totalPerson.toFixed(2);
//full amount due
var fullAmount = ((total * totalPeople) + billAmount);
fullAmount = Math.round(fullAmount * 100) / 100;
fullAmount = fullAmount.toFixed(2);
document.getElementById("tip").innerHTML = "$"+total;
document.getElementById("totp").innerHTML = "$"+totalPerson;
document.getElementById("fa").innerHTML = "$"+fullAmount;
}
function getFormVal(){
var totalPeople = parseInt(document.wcbubba.people.value);
var billAmount = parseInt(document.wcbubba.bill.value);
var percentageTotal = parseFloat(document.wcbubba.percentage.value);
if((totalPeople <= 0)||(isNaN(totalPeople))) totalPeople = 1;
if((percentageTotal <= 0)||(isNaN(percentageTotal))) percentageTotal = 1;
if((billAmount <= 0)||(isNaN(billAmount))) billAmount = 1;
var mike = new Array(totalPeople,percentageTotal,billAmount);
return mike;
}
</script>
<form id="wcbubba" name="wcbubba" action="javascript:void();">
Bill Amount: <input type=text name="bill" size=8>
Number of People: <input type=text name="people" size=8>
Tip Percentage: <input type=text name="percentage" size=8>
<br /><br />
<input type="submit" value="calculate" onClick="calcTip();">
<br /><br />
</form>
<p><b>Tip Per Person:</b> <span id="tip"></p><br />
<p><b>Total Per Person:</b> <span id="totp"></p><br />
<p><b>Full Amount:</b> <span id="fa"></p><br />