Skip to content

Commit 54f8996

Browse files
supzi-delsupzi-del
committed
Added JS tip calc
1 parent b2fc1cc commit 54f8996

File tree

4 files changed

+175
-0
lines changed

4 files changed

+175
-0
lines changed

‎Tip Calculator/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="utf-8">
4+
5+
<title>Tip Calculator</title>
6+
<meta name="description" content="Javascript Tip Calulator">
7+
<meta name="author" content="Supritha">
8+
9+
<link rel="stylesheet" href="styles.css">
10+
11+
</head>
12+
13+
<body>
14+
<div class="container">
15+
16+
<div class="inputBox">
17+
18+
<h1>Tip Calculator</h1>
19+
<label>Bill Amount :</label>
20+
<input type="text" placeholder="Enter bill amount" name="" id="bill_amount">
21+
<br>
22+
<label>Tip Percent :</label>
23+
<input type="text" placeholder="Enter tip percent" name="" id="tip_perc">
24+
<br>
25+
<label>Tip Amount :</label>
26+
<input type="text" name="" id="tip_amount" disabled>
27+
<br>
28+
<label>Bill Total :</label>
29+
<input type="text" name="" id="bill_total" disabled>
30+
<br>
31+
32+
<button onclick="tipcalc()" id="btn">Calculate</button>
33+
34+
</div><!--inputBox-->
35+
</div><!--container-->
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

‎Tip Calculator/readme.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## JavaScript tip calculator
2+
### DEMO:
3+
https://user-images.githubusercontent.com/78655439/121698473-aa680080-caeb-11eb-853f-0ca8177e3b4b.mp4

‎Tip Calculator/script.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const tipcalc = () => {
2+
let amount = document.getElementById('bill_amount').value;
3+
4+
5+
let perc = document.getElementById('tip_perc').value;
6+
7+
let tip = amount * (perc/100);
8+
9+
10+
let total = tip + Number(amount);
11+
12+
13+
document.getElementById('tip_amount').value = tip;
14+
document.getElementById('bill_total').value = total;
15+
}

‎Tip Calculator/styles.css

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family:'Courier New';
5+
box-sizing:border-box;
6+
user-select:none;
7+
}
8+
9+
h1{
10+
padding-bottom:20px;
11+
}
12+
13+
14+
15+
html,body{
16+
text-align:center;
17+
display:flex;
18+
height:100%;
19+
align-items:center;
20+
justify-content:center;
21+
background:#f2f2f2;
22+
}
23+
24+
.inputBox{
25+
position: relative;
26+
27+
28+
background:#FDD5D5;
29+
width:500px;
30+
padding:20px 30px;
31+
border-radius:5px;
32+
box-shadow: 0 0 15px rgba(0,0,0,0.2);
33+
height:455px;
34+
}
35+
36+
.inputBox h2{
37+
font-size:24px;
38+
padding-left:15px;
39+
}
40+
41+
.inputBox input{
42+
43+
position:relative;
44+
width:50%;
45+
height:45px;
46+
border:none;
47+
margin:15px 0 20px;
48+
49+
background:#fff;
50+
51+
52+
border:2px solid lightgrey;
53+
padding-left:15px;
54+
border-radius:5px;
55+
font-size:15px;
56+
outline:none;
57+
transition:all 0.2s;
58+
59+
}
60+
61+
.inputBox input:focus{
62+
border-color:#97E5D7;
63+
box-shadow:inset 0 0 3px #2fd072;
64+
}
65+
66+
.inputBox #btn{
67+
position:relative;
68+
color:#fff;
69+
cursor:pointer;
70+
background:#BA55D3;
71+
font-size:20px;
72+
padding:10px 15px;
73+
border-radius:8px;
74+
width:215px;
75+
margin-left:1%;
76+
}
77+
78+
.inputBox #btn:active{
79+
background:#97E5D7;
80+
}
81+
82+
.container{
83+
position:absolute;
84+
}
85+
86+
i{
87+
color:#BA55D3;
88+
position:relative;
89+
margin-left:1100%;
90+
padding-bottom:24px;
91+
cursor:pointer;
92+
font-size:20px;
93+
}
94+
95+
i:active{
96+
color:#97E5D7;
97+
}
98+
99+
::placeholder {
100+
opacity: 0.5;
101+
}
102+
103+
104+
105+
label{
106+
padding-left:20px;
107+
padding-top:20px;
108+
float:left;
109+
font-size:20px;
110+
font-weight:700;
111+
}
112+
113+
#tip_amount{
114+
margin-left:10px;
115+
}
116+
117+
#bill_total{
118+
margin-left:10px;
119+
}

0 commit comments

Comments
 (0)