JavaScript Bill Splitter
JavaScript Bill Splitter
JavaScript Bill Splitter
<!DOCTYPE html>
<html>
<head>
<title>Activity</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: 480px;
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;
border: none;
border-bottom: 1px solid gray;
background-color: white;
outline: none;
}
.abc3{
font-size: 20px;
width: 90%;
height: 50px;
margin-left: 15px;
}
.abc3:hover{
cursor: pointer;
}
.abc3a:hover{
cursor: pointer;
}
.abc4{
width: 70%;
margin-bottom: 20px;
border: none;
border-bottom: 1px solid gray;
background-color: none;
outline: none;
}
.abc5{
width: 48%;
margin-bottom: 10px;
}
.cb123 {
text-transform: uppercase;
font-weight: bold;
background: red;
border-radius: 5px;
height: 50px;
font-size: 15px;
color: white;
outline: none;
}
.cb123:hover {
background: #4c2827;
border-bottom-color: #111;
}
.cb123: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;
color: red;
}
#totalTip small {
font-size: 20px;
font-weight: bold;
display: block;
}
.ab3{
border: none;
background-color: white;
font-size: 18px;
color: green;
outline: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row abc">
<div class="col-md-12">Bill Spliter</div>
</div>
<div class="row">
<form class="form" style="margin-left: 10px;">
<label>How much?</label><br>
<input id="billamt" class="abc2" type="text" placeholder="Bill Amount">
<br>
<label class="abc1">How many?</label><br>
<input id="peopleQty" class="abc4" type="text" placeholder="Number of People">
<label class="abc1">Feein' generous?
<button class="ab3" type="button" id="ab1" onclick="btn123()">Add a tip</button>
</label>
<div class="ab2">
<input id="discountper" style="display: none;" value="" class="abc4" type="text" placeholder="add percent of the total">
</div>
<br>
<button id="calculate" type="button" class="abc5 cb123" onclick="calculateTip()">Split!</button>
<button class="abc5 cb123" type="rest">Reset</button>
<div id="totalTip">
<sup>Rs</sup><span id="tip">0</span>
<small id="each">Each</small>
</div>
</form>
</div>
</div>
<script type="text/javascript">
function calculateTip(){
var billAmount = document.getElementById("billamt").value;
var numOfPeople = document.getElementById("peopleQty").value;
var discountpercent = document.getElementById("discountper").value;
if(billAmount === ""){
alert("Please enter values");
return;
}
if(discountpercent <=0){
discountpercent = 0;
}
if(numOfPeople <= 1){
numOfPeople = 1;
document.getElementById("each").style.display = "none";
}
else{
document.getElementById("each").style.display = "block";
}
var total = billAmount*discountpercent/100;
total = +total + +billAmount;
total = total/numOfPeople;
total = Math.round(total * 100) / 100;
total =total.toFixed(2);
document.getElementById("tip").innerHTML = total;
document.getElementById("totalTip").style.display = "block";
}
// document.getElementById("totalTip").style.display = "none";
document.getElementById("each").style.display = "none";
document.getElementById("calculate").onclick = function(){
calculateTip();
}
function btn123(){
var y = document.getElementById("discountper");
if(y.style.display == "none"){
y.style.display = "block";
}
else{
y.style.display ="none";
}
}
</script>
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
No comments:
Post a Comment