-
Notifications
You must be signed in to change notification settings - Fork 0
/
tipCalculator.html
94 lines (85 loc) · 3.81 KB
/
tipCalculator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Calculator</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<style>
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background: radial-gradient(circle, rgba(192,194,246,1) 0%, rgba(125,130,221,1) 0%);
}
.container{
background: radial-gradient(circle, rgb(50, 51, 95) 0%, rgba(16,25,74,1) 97%);
width: 25rem;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#bill, #tip{
background: radial-gradient(circle, rgb(81, 85, 197) 0%, rgb(68, 72, 196) 0%);
height: 2rem;
}
</style>
</head>
<body>
<div class="container mt-3 rounded">
<div class="tip-calculator pt-4 pb-5 text-light">
<h4 class="mb-3 border-bottom d-inline-block">Tip Calculator</h4>
<div>
<label for="bill">Bill total</label>
<input type="number" id="bill" name="bill" value="0" min="0" class="input1 form-control rounded-pill mt-1 text-light border border-0">
</div>
<div class="mt-3">
<label for="tip">Tip</label>
<input type="number" id="tip" name="tip" value="0" min="0" max="100" class="input1 form-control rounded-pill mt-1 text-light border border-0" >
</div>
<div class="d-flex justify-content-between mt-3">
<div class="">
<p>People</p>
<div>
<button type="button" value="plus" class="btn btn1 btn-primary btn-sm rounded-circle">+</button>
<p id="people" class="d-inline px-2">1</p>
<button type="button" value="minus" class="btn btn1 btn-primary btn-sm rounded-circle">-</button>
</div>
</div>
<div class="">
<p>Total per Person</p>
<h3 id="total" class="text-end">$0.00</h3>
</div>
</div>
</div>
</div>
<script>
let input1 = document.querySelectorAll('.input1');
let btn1 = document.querySelectorAll('.btn1');
let total = document.getElementById('total');
let people = document.getElementById('people');
let count = 1;
//if input are positive or whole number then only calculate the tip otherwise show N/A 'notapplicable' msg.
const calTotalBill = (count)=> {
if(bill.value>=0 && tip.value>=0)
total.innerText = '$' + ((Number(bill.value) + (bill.value * tip.value)/100)/count).toFixed(2);
else
total.innerText = 'N/A';
}
input1.forEach(item => (
item.onchange = ()=> calTotalBill(count)
))
const billSplit = (value)=>{
if(value === 'plus' && (count < 10)){
calTotalBill(++count);
people.innerText = count;
}else if(value === 'minus' && (count >1)){
calTotalBill(--count);
people.innerText = count;
}
}
btn1.forEach(item => {
item.onclick = ()=> billSplit(item.value);
})
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>