Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Tip Calculator Application Form Programming Tutorial

Published :
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>