Skip to content

Instantly share code, notes, and snippets.

@mlassoff

mlassoff/tipcalc.html

Created May 15, 2019 21:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mlassoff/d6ba72969629673a0d15beb9704c28fe to your computer and use it in GitHub Desktop.
Save mlassoff/d6ba72969629673a0d15beb9704c28fe to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tipcalc.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tip Calculator</title>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
</head>
<body>
<ons-page>
<ons-toolbar>
<div class="center">Desktop Tip Calculator</div>
</ons-toolbar>
<section style="padding: 8px;">
<div style="margin-bottom: 20px;"><input class="text-input text-input--material" placeholder="Bill Amount" type="text" style="width:100%" required id="billAmount"></div>
<div style="margin-bottom: 20px;"> <ons-range style="width: 75%;" value="18" min="0" max="50" step=".5" id="tipRange"></ons-range>
<output id="percentOut">18%</output>
</div>
<div> <ons-button modifier="large" id="btnCalculate">Calculate Tip</ons-button></div>
</section>
<section style="padding: 8px;">
<output id="result"></output>
</section>
</ons-page>
<script>
const range = document.getElementById("tipRange");
const tipOut = document.getElementById("percentOut");
const btnCalculate = document.getElementById("btnCalculate");
const billAmount = document.getElementById("billAmount");
const resultArea = document.getElementById("result");
range.ondrag = function(){
tipOut.innerHTML = range.value + "%";
}
btnCalculate.onclick = function(){
let theBill = parseFloat(billAmount.value);
let tip = (theBill * (range.value/100)).toFixed(2);
let total = (theBill + parseFloat(tip)).toFixed(2);
let out = `<strong>Tip Amount:</strong> $${tip}<br/><strong>Total Bill:</strong> $${total}`;
resultArea.innerHTML = out;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment