JavaScript Tip Calculator
JavaScript Tip Calculator
Tip Calculator
<!DOCTYPE html>
<html>
<head>
<title>Activity</title>
<title>Calculator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
body{
background-color: brown;
}
.container{
width: 25%;
height: 500px;
margin-top: 30px;
background-color: white;
border: 3px solid blue;
border-radius: 20px;
}
.abc{
width: 100;
text-align: center;
font-size: 20px;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: white;
background-color: blue;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.abc1{
padding-top: 10px;
}
.abc2{
width: 70%;
height: 30px;
}
.abc3{
font-size: 20px;
width: 90%;
height: 50px;
margin-left: 15px;
}
.abc3:hover{
cursor: pointer;
}
.abc3a:hover{
cursor: pointer;
}
.abc4{
width: 60%;
margin-bottom: 20px;
}
.abc5{
width: 65%;
margin-left: 45px;
margin-bottom: 10px;
}
button {
text-transform: uppercase;
font-weight: bold;
display: block;
margin: 30px auto;
background: red;
border-radius: 5px;
width: 200px;
height: 50px;
font-size: 17px;
color: white;
}
button:hover {
background: #4c2827;
border-bottom-color: #111;
}
button:active {
position: relative;
top: 1px;
}
#totalTip {
font-size: 30px;
margin-top: 8px;
text-align: center;
}
#totalTip:before {
content: "Tip amount";
font-size: 20px;
font-weight: bold;
display: block;
text-transform: uppercase;
}
#totalTip sup {
font-size: 20px;
top: -18px;
}
#totalTip small {
font-size: 20px;
font-weight: bold;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="row abc">
<div class="col-md-12">TIP CALCULATOR</div>
</div>
<div class="row">
<form class="form" style="margin-left: 10px;">
<p class="abc1">How much was your bill?</p>
<label>$</label>
<input id="billamt" class="abc2" type="text" placeholder="Bill Amount"><br>
<p class="abc1">How was your service?</p>
<select id="discountper" class="abc3">
<option disabled selected value="0">-- Choose an Option --</option>
<option value="0.40">40% - Excelent</option>
<option value="0.30">30% - Outstanding</option>
<option value="0.20">20% - Good</option>
<option value="0.15">15% - It was OK</option>
<option value="0.10">10% - Bad</option>
<option value="0.05">5% - Terrible</option>
</select>
<p class="abc1">How many people are shearing the bill?</p>
<input id="peopleQty" class="abc4" type="text" placeholder="Number of People"> people<br>
<button id="calculate" type="button" class="abc5" onclick="calculateTip()">Calculate!</button>
<div id="totalTip">
<sup>$</sup><span id="tip">0.00</span>
<small id="each">each</small>
</div>
</form>
</div>
</div>
<script type="text/javascript">
function calculateTip(){
var billAmount = document.getElementById("billamt").value;
var discountpercent = document.getElementById("discountper").value;
var numOfPeople = document.getElementById("peopleQty").value;
if(billAmount === "" || discountpercent == 0){
alert("Please enter values");
return;
}
if(numOfPeople === "" || numOfPeople <= 1){
numOfPeople = 1;
document.getElementById("each").style.display = "none";
}
else{
document.getElementById("each").style.display = "block";
}
var total = (billAmount * discountpercent) / numOfPeople;
total = Math.round(total * 100) / 100;
total =total.toFixed(2);
document.getElementById("totalTip").style.display = "block";
document.getElementById("tip").innerHTML = total;
}
document.getElementById("totalTip").style.display = "none";
document.getElementById("each").style.display = "none";
document.getElementById("calculate").onclick = function(){
calculateTip();
};
</script>
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
No comments:
Post a Comment