Skip to content

Commit f6850b4

Browse files
supzi-delsupzi-del
committed
Beautified files
1 parent 54f8996 commit f6850b4

File tree

4 files changed

+193
-163
lines changed

4 files changed

+193
-163
lines changed

‎Tip Calculator/index.html

+37-34
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,41 @@
11
<html lang="en">
2-
<head>
3-
<meta charset="utf-8">
2+
<head>
3+
<meta charset="utf-8" />
44

55
<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-->
6+
<meta name="description" content="Javascript Tip Calulator" />
7+
<meta name="author" content="Supritha" />
8+
9+
<link rel="stylesheet" href="styles.css" />
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<div class="inputBox">
15+
<h1>Tip Calculator</h1>
16+
<label>Bill Amount :</label>
17+
<input
18+
type="text"
19+
placeholder="Enter bill amount"
20+
name=""
21+
id="bill_amount"
22+
/>
23+
<br />
24+
<label>Tip Percent :</label>
25+
<input type="text" placeholder="Enter tip percent" name="" id="tip_perc" />
26+
<br />
27+
<label>Tip Amount :</label>
28+
<input type="text" name="" id="tip_amount" disabled />
29+
<br />
30+
<label>Bill Total :</label>
31+
<input type="text" name="" id="bill_total" disabled />
32+
<br />
33+
34+
<button onclick="tipcalc()" id="btn">Calculate</button>
35+
</div>
36+
<!--inputBox-->
37+
</div>
38+
<!--container-->
3639
<script src="script.js"></script>
37-
</body>
38-
</html>
40+
</body>
41+
</html>

‎Tip Calculator/readme.md

+37-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,37 @@
1-
## JavaScript tip calculator
2-
### DEMO:
3-
https://user-images.githubusercontent.com/78655439/121698473-aa680080-caeb-11eb-853f-0ca8177e3b4b.mp4
1+
<a>JavaScript tip calculator</a>
2+
3+
<p>This script consists of user input--> total bill amount and bill percent and it calculates the tip amount and the total bill.</p>
4+
5+
### Use of the Project:
6+
7+
<p>Enter bill amount and tip percent to obtain the tip amount to be paid.</p>
8+
9+
<h3>Used Stack</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/supzi-del/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Calculate tip.
29+
30+
<h3> Video </h3>
31+
<video controls width="960" alt="tipcalc">
32+
<source src="https://user-images.githubusercontent.com/78655439/121698473-aa680080-caeb-11eb-853f-0ca8177e3b4b.mp4">
33+
34+
</video>
35+
36+
<br>
37+

‎Tip Calculator/script.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
const tipcalc = () => {
2-
let amount = document.getElementById('bill_amount').value;
2+
let amount = document.getElementById('bill_amount').value;
33

44

5-
let perc = document.getElementById('tip_perc').value;
5+
let perc = document.getElementById('tip_perc').value;
66

7-
let tip = amount * (perc/100);
7+
let tip = amount * (perc / 100);
88

99

10-
let total = tip + Number(amount);
10+
let total = tip + Number(amount);
1111

1212

13-
document.getElementById('tip_amount').value = tip;
14-
document.getElementById('bill_total').value = total;
15-
}
13+
document.getElementById('tip_amount').value = tip;
14+
document.getElementById('bill_total').value = total;
15+
}

‎Tip Calculator/styles.css

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

0 commit comments

Comments
 (0)