-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (149 loc) · 7.38 KB
/
index.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Easy to use bill splitter and tip calculator." />
<meta name="title" property="og:title" content="Restaurant Tip and Bill Splitter" />
<meta property="og:type" content="website" />
<meta name="image" property="og:image" content="https://live.staticflickr.com/65535/49896833083_9f4fe4e1b0_c.jpg" />
<meta name="description" property="og:description" content="_" />
<meta name="author" content="Artan Muzhaqi" />
<title>Restaurant Tip and Bill Splitter Calculator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header class="mb-5">
<h1 class="display-4">Tip Calculator</h1>
</header>
<div class="container" id="main-container">
<!-- Bill total input -->
<div class="row">
<div class="col-sm">
<label for="billTotal" class="h4">Bill Total</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control form-control-lg" id="billTotal"
aria-label="Amount (to the nearest dollar)">
</div>
</div>
</div>
<!-- On Screen calculator Inputs -->
<div class="row">
<div class="container mt-3">
<div class="row">
<div class="col-sm mb-2">
<button id="button-1" class="btn btn-block btn-primary number" value="1"><span
class="h3">1</span></button>
</div>
<div class="col-sm mb-2">
<button id="button-2" class="btn btn-block btn-primary number" value="2"><span
class="h3">2</span></button>
</div>
<div class="col-sm mb-2">
<button id="button-3" class="btn btn-block btn-primary number" value="3"><span
class="h3">3</span></button>
</div>
</div>
<div class="row">
<div class="col-sm mb-2">
<button id="button-1" class="btn btn-block btn-primary number" value="4"><span
class="h3">4</span></button>
</div>
<div class="col-sm mb-2">
<button id="button-2" class="btn btn-block btn-primary number" value="5"><span
class="h3">5</span></button>
</div>
<div class="col-sm mb-2">
<button id="button-3" class="btn btn-block btn-primary number" value="6"><span
class="h3">6</span></button>
</div>
</div>
<div class="row">
<div class="col-sm mb-2">
<button id="button-1" class="btn btn-block btn-primary number" value="7"><span
class="h3">7</span></button>
</div>
<div class="col-sm mb-2">
<button id="button-2" class="btn btn-block btn-primary number" value="8"><span
class="h3">8</span></button>
</div>
<div class="col-sm mb-2">
<button id="button-3" class="btn btn-block btn-primary number" value="9"><span
class="h3">9</span></button>
</div>
</div>
<div class="row mb-2">
<div class="col-sm mb-2">
<button id="button-1" class="btn btn-block btn-primary number" value="."><span
class="h3">.</span></button>
</div>
<div class="col-sm mb-2">
<button id="button-2" class="btn btn-block btn-primary number" value="0"><span
class="h3">0</span></button>
</div>
<div class="col-sm mb-2">
<button id="button-3" class="btn btn-block btn-primary backspace" value="clear"><i
class="fas fa-backspace h3"></i></button>
</div>
</div>
</div>
</div>
<!--Tip amount input -->
<div class="row">
<div class="col-sm text-center">
<label for="tipPercentage" class="h4">Tip</label>
<div class="input-group mb-3">
<input type="number" min="0" max="100" id="tipPercentage" value="18"
class="form-control form-control-lg" aria-label="Tip percantage between 0 and 100" />
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
</div>
</div>
<!--Split between options -->
<div class="row" id="split-area">
<div class="col-sm">
<label for="splitNumber" class="h4">Split</label>
<div class="input-group mb-3">
<button type="button" id="btn-decrease" class="btn btn-primary" aria-label="Decrease"><i
class="fas fa-minus"></i></button>
<span id="splitNumber" class="h2 mx-2">1</span>
<button type="button" id="btn-increase" class="btn btn-primary" aria-label="Increase"><i
class="fas fa-plus"></i></button>
</div>
</div>
<div class="col-sm">
<label for="splitTotal" class="h4">Split Total</label>
<div class="input-group mb-3">
<span id="splitTotal" class="h2">$ 0.00</span>
</div>
</div>
</div>
<div class="row">
<div class="col mb-2">
<button id="btn-calculate" class="btn btn-success btn-lg btn-block">
Calculate
</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<script src="https://kit.fontawesome.com/e67b748ce1.js" crossorigin="anonymous"></script>
<script src="script.js" type="text/javascript">
</script>
</body>
</html>