Skip to content

Commit

Permalink
Merge pull request #196 from VipulNerd/add-taxCalculator
Browse files Browse the repository at this point in the history 
Tax Calculator using HTML, CSS and JavaScript
  • Loading branch information
@shreyamalogi
shreyamalogi authored Oct 18, 2024
2 parents 9d3fbc3 + e9842e0 commit 04186d9
Show file tree
Hide file tree
Showing 3 changed files with 277 additions and 0 deletions.
70 changes: 70 additions & 0 deletions web/pages/taxCalculator.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tax Calculator</title>
<link rel="stylesheet" href="../stylesheet/taxCalculator.css">
<script src="../scripts/taxCalculator.js"></script>
</head>

<body>
<div class="container">
<h1>Tax Calculator</h1>
<form id="taxForm">
<!--Take input of annual income-->
<div class="input-group">
<label for="income">Gross Annual Income<span class="info-tooltip"> (?)<span class="tooltip-text">Total
income before deductions.</span></span>:</label>
<div><input type="number" id="income" required placeholder="Enter the annual income"></div>
<span class="error-tooltip" id="incomeError">Invalid input</span>
<span class="error-icon" id="incomeErrorIcon">!<span class="error-tooltip">Please enter a valid
number.</span></span>
</div>
<!--Take input of Bonus/any extra income-->
<div class="input-group">
<label for="extraIncome">Extra Income<span class="info-tooltip"> (?)<span class="tooltip-text">Any
additional income.</span></span>:</label>
<div><input type="number" id="extraIncome" placeholder="Enter the Extra Income"></div>
<span class="error-tooltip" id="extraIncomeError">Invalid input</span>
<span class="error-icon" id="extraIncomeErrorIcon">!<span class="error-tooltip">Please enter a valid
number.</span></span>
</div>
<!--Take input of Age Group of Tax Payer-->
<div class="input-group">
<label for="age">Age<span class="info-tooltip"> (?)<span class="tooltip-text">Your age
group.</span></span>:</label>
<div><select id="age" required>
<option value="Choose the age group">Choose the age group</option>
<option value="<40">&lt;40</option>
<option value="≥40 & <60">&ge;40 &lt;60</option>
<option value="≥60">&ge;60</option>
</select></div>
<span class="error-tooltip" id="ageError">Age is mandatory</span>
</div>
<!--Take input of deduction of money-->
<div class="input-group">
<label for="deductions">Deductions<span class="info-tooltip"> (?)<span class="tooltip-text">Any
deductions from your income.</span></span>:</label>
<div><input type="number" id="deductions" placeholder="Add Total applicable deductions"></div>
<span class="error-tooltip" id="deductionsError">Invalid input</span>
<span class="error-icon" id="deductionsErrorIcon">!<span class="error-tooltip">Please enter a valid
number.</span></span>
</div>

<button type="button" id="submitBtn">Calculate Tax</button>
</form>
</div>
<!--show the Tax Need to Pay after clicking submit button-->
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Tax need to pay</h2>
<p id="taxResult"></p>
</div>
</div>

</body>

</html>
87 changes: 87 additions & 0 deletions web/scripts/taxCalculator.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
document.addEventListener("DOMContentLoaded", function () {
const ageInput = document.getElementById("age");
const incomeInput = document.getElementById("income");
const extraIncomeInput = document.getElementById("extraIncome");
const deductionsInput = document.getElementById("deductions");
const submitBtn = document.getElementById("submitBtn");
const modal = document.getElementById("modal");
const taxResult = document.getElementById("taxResult");

const ageError = document.getElementById("ageError");
const incomeError = document.getElementById("incomeError");
const extraIncomeError = document.getElementById("extraIncomeError");
const deductionsError = document.getElementById("deductionsError");

submitBtn.addEventListener("click", function () {
const age = ageInput.value;
const income = parseFloat(incomeInput.value);
const extraIncome = parseFloat(extraIncomeInput.value) || 0;
const deductions = parseFloat(deductionsInput.value) || 0;

let error = false;

// Validate inputs
if (!age) {
ageError.style.display = "inline";
error = true;
} else {
ageError.style.display = "none";
}

if (isNaN(income)) {
incomeError.style.display = "inline";
error = true;
} else {
incomeError.style.display = "none";
}

if (isNaN(extraIncome)) {
extraIncomeError.style.display = "inline";
error = true;
} else {
extraIncomeError.style.display = "none";
}

if (isNaN(deductions)) {
deductionsError.style.display = "inline";
error = true;
} else {
deductionsError.style.display = "none";
}

if (error) {
return;
}

// Calculate tax
let tax = 0;
const taxableIncome = income + extraIncome - deductions;
if (taxableIncome > 800000) {
if (age === "<40") {
tax = 0.3 * (taxableIncome - 800000);
} else if (age === "≥40 & <60") {
tax = 0.4 * (taxableIncome - 800000);
} else {
tax = 0.1 * (taxableIncome - 800000);
}
}

// Display result
taxResult.textContent = `Tax to be paid: ₹${tax.toFixed(2)}`;
modal.style.display = "block";
});

// Close modal when the close button is clicked
document
.getElementsByClassName("close")[0]
.addEventListener("click", function () {
modal.style.display = "none";
});

// Close modal when clicked outside the modal content
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
});
120 changes: 120 additions & 0 deletions web/stylesheet/taxCalculator.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
.container {
max-width: 400px;
margin-left: 500px;
margin-top: 150px;
padding: 30px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgb(114, 146, 220);
color: rgb(44, 42, 42);
font-size: 20px;
text-align: justify;

}

form div {
margin-bottom: 10px;
}

.error-tooltip {
display: none;
color: red;
}

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #333;
color: rgb(114, 146, 220);
}

.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

input,
select {
width: 100%;
}

.input-group {
position: relative;

}

.error-icon {
position: absolute;
top: 20%;
right: 1px;
transform: translateY(-50%);
color: rgb(156, 3, 3);
cursor: pointer;
}

.error-tooltip {
color: rgb(156, 3, 3);
}

.error-icon:hover+.error-tooltip {
display: inline;

}

.info-tooltip {
position: relative;
}

.info-tooltip .tooltip-text {
display: none;
position: absolute;
background-color: #f9f9f9;
color: #333;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
font-size: 12px;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
width: 150px;
text-align: center;
}

.info-tooltip:hover .tooltip-text {
display: block;
}

#submitBtn {
text-align: center;
padding: 10px;
margin-left: 140px;
margin-top: 20px;
background-color: #333;
color: rgb(114, 146, 220);
font-size: 15px;
}

0 comments on commit 04186d9

Please sign in to comment.