⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Tip Calculator Application Form Programming Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
In this programming exercise you will learn to program a tip calculator application from scratch using JavaScript and HTML. You can apply a bit of CSS to the application to design it better. 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript HTML5 Tip Calculator Application</title>
<script>
function tipCalculate(slider,bill){
    var tip = document.getElementById('tip');
    var slideval = document.getElementById('slideval');
    var bill = document.getElementById(bill).value;
    var prcnt = slider * .01;
    tip.innerHTML = "$"+(bill * prcnt).toFixed(2);
    slideval.innerHTML = slider+"%";
}
</script>
</head>
<body>
<h2>Tip Calculator</h2>
Enter the bill amount for your meal: $
<input type="text" id="bill"><br>
Tip Percentage: 
<input type="range" min="0" max="100" value="0" step="1" onchange="tipCalculate(this.value,'bill')" style="width:400px;">
<span id="slideval">0%</span>
<h2>Tip to leave = <span id="tip"></span></h2>
</body>
</html>
▲