From e9842e09e7bcbf2cd17008573452e55263010a8a Mon Sep 17 00:00:00 2001 From: VipulNerd <144052913+VipulNerd@users.noreply.github.com> Date: Fri, 18 Oct 2024 11:23:11 +0530 Subject: [PATCH] commit --- web/pages/taxCalculator.html | 70 ++++++++++++++++++ web/scripts/taxCalculator.js | 87 ++++++++++++++++++++++ web/stylesheet/taxCalculator.css | 120 +++++++++++++++++++++++++++++++ 3 files changed, 277 insertions(+) create mode 100644 web/pages/taxCalculator.html create mode 100644 web/scripts/taxCalculator.js create mode 100644 web/stylesheet/taxCalculator.css diff --git a/web/pages/taxCalculator.html b/web/pages/taxCalculator.html new file mode 100644 index 0000000..204bdc5 --- /dev/null +++ b/web/pages/taxCalculator.html @@ -0,0 +1,70 @@ + + + + + + + Tax Calculator + + + + + +
+

Tax Calculator

+
+ +
+ +
+ Invalid input + !Please enter a valid + number. +
+ +
+ +
+ Invalid input + !Please enter a valid + number. +
+ +
+ +
+ Age is mandatory +
+ +
+ +
+ Invalid input + !Please enter a valid + number. +
+ + +
+
+ + + + + + \ No newline at end of file diff --git a/web/scripts/taxCalculator.js b/web/scripts/taxCalculator.js new file mode 100644 index 0000000..e48f27d --- /dev/null +++ b/web/scripts/taxCalculator.js @@ -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"; + } + }; +}); diff --git a/web/stylesheet/taxCalculator.css b/web/stylesheet/taxCalculator.css new file mode 100644 index 0000000..272ba07 --- /dev/null +++ b/web/stylesheet/taxCalculator.css @@ -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; +} \ No newline at end of file