<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Income Tax Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
.container {
max-width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}
input, button {
margin: 10px;
padding: 10px;
width: 100%;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<h2>Income Tax Calculator</h2>
<label for="income">Enter Gross Income (₹):</label>
<input type="number" id="income" placeholder="Enter your income">
<button onclick="calculateTax()">Calculate Tax</button>
<h3 id="result"></h3>
</div>
<script>
function calculateTax() {
let income = parseFloat(document.getElementById('income').value);
if (isNaN(income) || income < 0) {
document.getElementById('result').innerText = "Please enter a valid income.";
return;
}
let taxableIncome = income - 75000;
if (taxableIncome <= 400000) {
tax = 0;
} else if (taxableIncome <= 800000) {
tax = (taxableIncome - 400000) * 0.05;
} else if (taxableIncome <= 1200000) {
tax = (400000 * 0.05) + (taxableIncome - 800000) * 0.10;
} else if (taxableIncome <= 1600000) {
tax = (400000 * 0.05) + (400000 * 0.10) + (taxableIncome - 1200000) * 0.15;
} else if (taxableIncome <= 2000000) {
tax = (400000 * 0.05) + (400000 * 0.10) + (400000 * 0.15) + (taxableIncome - 1600000) * 0.20;
} else if (taxableIncome <= 2400000) {
tax = (400000 * 0.05) + (400000 * 0.10) + (400000 * 0.15) + (400000 * 0.20) + (taxableIncome - 2000000) * 0.25;
} else {
tax = (400000 * 0.05) + (400000 * 0.10) + (400000 * 0.15) + (400000 * 0.20) + (400000 * 0.25) + (taxableIncome - 2400000) * 0.30;
}
document.getElementById('result').innerText = `Total Tax Payable: ₹${tax.toFixed(2)}`;
}
</script>
</body>
</html>