Tip Calculator [SIMPLE]

A simple number manipulation and validation example.

	<form action="javascript:void(calculate())">
		<table>
			<tr><td colspan="2"><h1>Tip Calculator</h1></td></tr>
			<tr><td style="text-align:right">Amount $ </td><td style="text-align:left"> <input type="text" id="amount" size="20" placeholder="24.35" pattern="^\d*(\.\d{2}$)?" title="CURRENCY NUMBER, 2 DECIMAL PLACES (ie: 12.34)" required /></td></tr>
			<tr><td style="text-align:right">Tip % </td><td style="text-align:left"> <input type="text" id="tip" size="20" placeholder="15" pattern="\d*" title="WHOLE NUMBER, NO DECIMALS (ie: 15)" required /></td></tr>
			<tr><td style="text-align:center" colspan="2"><hr/></td></tr>
			<tr><td style="text-align:right">Total $ </td><td style="text-align:left"> <strong id="total">---</strong></td></tr>
			<tr><td style="text-align:center" colspan="2"><hr/></td></tr>
			<tr><td style="text-align:center" colspan="2"><input type="submit" value="Calculate Tip Amount" class="button" /></td></tr>
			<tr><td style="text-align:center" colspan="2"><span id="error"></span></td></tr>
		</table>
	</form>
	<script type="text/javascript">
		var amount = document.getElementById("amount");
		var tip = document.getElementById("tip");
		var total = document.getElementById("total");
		
		function calculate() {
			var a = parseFloat(amount.value);
			var t = parseInt(tip.value) / 100;
							
			total.innerHTML = ((a*t)+a).toFixed(2);
			console.log("Amount : $" + a + "\nTip : " + (t*100) + "%\nTip Amount : $" + (a*t) + "\nTotal Bill : $" + ((a*t)+a));
		};
	</script>
DEMO | DOWNLOAD
FacebooktwitterredditpinterestlinkedinmailFacebooktwitterredditpinterestlinkedinmail