Skip to content

Commit 44755c7

Browse files
harshita2216harshita2216
authored
Merge pull request #350 from khushi-purwar/web-kh
Added VAT Calculator
2 parents 2b959ad + a03e5b7 commit 44755c7

File tree

8 files changed

+223
-0
lines changed

8 files changed

+223
-0
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ I've used the concept of *Async functions* and *react hook usestate* also worked
128128
| [Magic-Color-Changer](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Magic-Color-Changer)| This is a pure javascript project.
129129
|[Fetch API using react app](https://github.com/abhishektyagi2912/Web-dev-mini-projects/tree/main/Fetch%20API%20%20using%20react%20app)| That we add get user button to API calls to get user data and have a loader while API fetch the data .
130130
|[Product Landing Page](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/saloni-15-project-1/Product%20Landing%20Page)| A beginner-friendly single-page product landing website built with HTML and CSS for understanding the concept of responsive websites using CSS Grids.
131+
|[VAT Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/VAT%20Calculator)| It is a simpe calculator which calculates the Value Added Tax (VAT) on products or services
131132
| [Loan Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Loan%20Calculator)| This is a simple loan calculator which calculates the Loan EMI (Equated Monthly Installment).
132133
|[My Online Meal](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/My-Online-Meal)| It is a simple and responsive website.
133134
|[Good Vibes Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Good-Vibes-Form)| It is a simple and responsive form which can be used in any project.

‎VAT Calculator/Screenshots/demo.gif

6.14 MB
Loading

‎VAT Calculator/Screenshots/ss1.png

39.5 KB
Loading

‎VAT Calculator/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>VAT Calculator</title>
10+
</head>
11+
12+
<body>
13+
<div class="vat-calc">
14+
<h2>VAT Calculator</h2>
15+
<div class="main-wrapper">
16+
<form action="">
17+
<div>
18+
<label for="net-price">Net Price</label>
19+
<input type="number" name="" id="net-price" min="0.00" placeholder="0.00" /> </div>
20+
<div>
21+
<label for="vat-rate">VAT Rate (%) </label>
22+
<input type="number" name="" id="vat-rate" min="0.00" placeholder="0.00" /> </div>
23+
<div>
24+
<label for="vat-added">VAT Added </label>
25+
<input type="number" min="0.00" name="" id="vat-added" placeholder="0.00" disabled=true /> </div>
26+
<div>
27+
<label for="inc-amount">VAT Inclusive Price </label>
28+
<input type="number" min="0.00" name="" id="inc-amount" placeholder="0.00" disabled=true /> </div>
29+
</form>
30+
</div>
31+
<div class="button_group">
32+
<button type="button" class="main-btn" id="calc-btn"> Calculate</button>
33+
<button type="button" class="main-btn" id="reset-btn">Reset</button>
34+
</div>
35+
</div>
36+
<script src="script.js"></script>
37+
</body>
38+
39+
</html>

‎VAT Calculator/readme.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# VAT Calculator
2+
3+
## About the Project
4+
Calculates the Value Added Tax (VAT) on products or services
5+
6+
## Use of the Project:
7+
8+
<p>This calculator has two input fields, one for amount and another one for vat rate and two output fields , one is for VAT amount and another one for VAT Inclusive amount.</p>
9+
10+
## Tech Stacks Used
11+
12+
13+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
14+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
15+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
16+
17+
18+
### Steps to Use:
19+
20+
---
21+
22+
- Download or clone the repository
23+
24+
```
25+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
26+
```
27+
28+
- Go to the directory
29+
- Run the index.html file
30+
- Start Calculating!
31+
32+
## Screenshot
33+
34+
<img src="./Screenshots/ss1.png" />
35+
36+
## Live Demo
37+
38+
<img src="./Screenshots/demo.gif" />

‎VAT Calculator/script.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
const netPrice = document.querySelector("#net-price");
2+
const vatRate = document.querySelector("#vat-rate");
3+
const vatAdded = document.querySelector("#vat-added")
4+
const incAmount = document.querySelector("#inc-amount");
5+
const calcBtn = document.querySelector("#calc-btn")
6+
const resetBtn = document.querySelector("#reset-btn")
7+
8+
function VATInclusiveAmount(price, rate) {
9+
let vatAddedPrice = Number((price * (rate / 100)));
10+
vatAdded.value = vatAddedPrice.toFixed(2);
11+
let totalAmount = Number(price) + vatAddedPrice;
12+
return totalAmount;
13+
}
14+
15+
calcBtn.addEventListener('click', function() {
16+
if (netPrice.value === "" || isNaN(netPrice.value)) {
17+
// show red border
18+
netPrice.style.border = "1px solid red";
19+
20+
// removing red border after 1.5s
21+
setTimeout(function() {
22+
netPrice.style.border = "1px solid transparent";
23+
}, 1500);
24+
25+
netPrice.value = "";
26+
}
27+
28+
if (vatRate.value === "" || isNaN(vatRate.value)) {
29+
// show red border
30+
vatRate.style.border = "1px solid red";
31+
32+
// removing red border after 1.5s
33+
setTimeout(function() {
34+
vatRate.style.border = "1px solid transparent";
35+
}, 1500);
36+
37+
// remove wrong value
38+
vatRate.value = "";
39+
}
40+
41+
let finalAmount = VATInclusiveAmount((netPrice.value), (vatRate.value));
42+
incAmount.value = finalAmount;
43+
44+
45+
})
46+
47+
resetBtn.addEventListener("click", function() {
48+
netPrice.value = "";
49+
vatRate.value = "";
50+
vatAdded.value = "";
51+
incAmount.value = "";
52+
})

‎VAT Calculator/style.css

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
flex-direction: column;
13+
background-color: #d3f1f8;
14+
}
15+
16+
.vat-calc {
17+
background: #0ad3ff;
18+
padding: 3rem 1rem;
19+
border-radius: 10px;
20+
box-shadow: 0 1px 5px 0 rgba(28, 184, 227, 1);
21+
margin: 0 auto;
22+
}
23+
24+
h2 {
25+
text-align: center;
26+
font-size: 2rem;
27+
text-transform: uppercase;
28+
padding: 1.2rem 0;
29+
color: #fff;
30+
}
31+
32+
.main-wrapper {
33+
padding: 1rem;
34+
height: 160px;
35+
border-radius: 5px;
36+
}
37+
38+
.button_group {
39+
display: flex;
40+
}
41+
42+
.main-btn {
43+
padding: 0.6rem 0;
44+
font-size: 1rem;
45+
border-radius: 25px;
46+
border: none;
47+
outline: none;
48+
width: 120px;
49+
color: #212121;
50+
background: #fff;
51+
margin: auto;
52+
margin-top: 36px;
53+
transition: all 0.5s ease;
54+
cursor: pointer;
55+
}
56+
57+
.main-btn:hover {
58+
background: #252525;
59+
color: #fff;
60+
}
61+
62+
form {
63+
line-height: 1.8;
64+
}
65+
66+
form label {
67+
font-weight: bold;
68+
padding-right: 0.5rem;
69+
color: #fff;
70+
}
71+
72+
form input {
73+
font-size: 1rem;
74+
padding: 0.3rem;
75+
outline: none;
76+
border: none;
77+
text-align: right;
78+
border-radius: 5px;
79+
}
80+
81+
form input[disabled] {
82+
border: 1ps solid #fff;
83+
}
84+
85+
form div {
86+
display: flex;
87+
justify-content: space-between;
88+
padding: 0.3rem 0;
89+
}
90+

0 commit comments

Comments
 (0)