Hosting Solutions
mobile_logo Table of Contents

Tip Calculator Application Form Programming Tutorial

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>

JavaScript Videos

Form Programming

Contact Form Web Application Tutorial Ajax HTML5 PHPCheckbox Toggle Tutorial Select Deselect All ElementsIn Place Editing CMS Development HTML JavaScript TutorialCustom Progress Bar Meter Development For File Upload FormsMultiphase Form Programming Tutorial Multi StepRestrict Text Input Characters HTML JavaScript TutorialMonthly Payment Loan Calculator Form Programming TutorialDynamic Select Year List Script HTML Form ElementsTip Calculator Application Form Programming Tutorialtextarea Form Field Character Counting and LimitingBuilding a WYSIWYG Rich Text Editor Textarea Replacement Part 1Building a WYSIWYG Rich Text Editor Textarea Replacement Part 2Div contenteditable Click Select All Text execCommand selectAllToggle Password Security Form Input Characters TutorialTrap User Check for Unsaved Written Work TutorialReal Time Text Input or Textarea Filter TutorialForm Select Change Dynamic List Option Elements Tutorial