Skip to content

Commit f8d0edb

Browse files
harshita2216harshita2216
authored
Merge pull request #161 from supzi-del/supzi
Added JS tip calc
2 parents 7d89505 + d26b330 commit f8d0edb

File tree

5 files changed

+206
-0
lines changed

5 files changed

+206
-0
lines changed

‎Index.md

+1
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,4 @@
6868
| [Breaking Bad Characters](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/breaking-bad-characters) | A single page web application that uses the breaking bad API to display and filter characters from the show |
6969
| [Simon Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Simon_Game) |A basic memory game in which there are 4 boxes of different colors and one box is blinked. The user has to click the boxes blinked and also has to click the previous blinked boxes as well.|
7070
| [Javascript Color Change App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/JAVASCRIPT%20BUTTON%20APP) | It is a basic web app where the user can select a color from the options that are given on the web app and as he clicks on that option, all the buttons background color changes to that color. |
71+
| [JavaScript tip calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Tip Calculator) | This script consists of user input--> total bill amount and bill percent and it calculates the tip amount and the total bill. |

‎Tip Calculator/index.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
</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-->
39+
<script src="script.js"></script>
40+
</body>
41+
</html>

‎Tip Calculator/readme.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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

+15
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

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +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+
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)