Skip to content

Commit b5c697c

Browse files
khushi-purwarkhushi-purwar
committed
added files and images
1 parent 69619e9 commit b5c697c

File tree

5 files changed

+195
-0
lines changed

5 files changed

+195
-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+
}

‎VAT Calculator/Screenshots/demo.gif

6.14 MB
Loading

‎VAT Calculator/index.html

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

‎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: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
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+
}

0 commit comments

Comments
 (0)