Introduction
Income tax is a significant aspect of financial planning, and understanding how much tax you owe can sometimes be a confusing process. To simplify this, I’ve developed a dynamic Income Tax Calculator using React, designed to help users calculate their tax liabilities in a quick and efficient manner based on the latest Indian tax slabs. Whether you’re an employee or a freelancer, this tool can save you time and effort in calculating your income tax.
You can explore the live version of this calculator here, and if you’re interested in the source code, it’s available on my GitHub repository.
Key Features
- Easy-to-use Interface: A clean, user-friendly design that ensures a smooth experience.
- Dynamic Tax Calculation: Based on real-time input, the app calculates tax according to the current income tax slabs.
- Tax Slab Breakdown: The application provides a detailed breakdown of the tax calculated, helping users understand how their taxes are being calculated.
- Responsive Design: The app is fully responsive and can be accessed across multiple devices.
- Animated UI: To make the experience engaging, the app includes animations powered by Framer Motion.
Getting Started with the Application
Once you open the Income Tax Calculator, you will see a clean interface asking for your annual salary input. Once the user inputs their salary, the calculator gives an estimate of the tax they owe and shows a breakdown based on the applicable tax slabs.
Tech Stack Used:
- React: For building the user interface and managing state.
- Framer Motion: For adding smooth animations to the UI.
- React Router: For smooth navigation between pages.
- Tailwind CSS: For styling the app and making it responsive.
Tax Calculation Logic
At the core of the application is the tax calculation logic. Here’s a breakdown of the tax calculation function that drives the app:
function calculateTax(salary) {
let tax = 0;
let breakdown = [];
if (salary <= 1200000) {
return { tax: 0, breakdown: ["No tax for income up to ₹12,00,000"] };
}
if (salary > 2400000) {
let extraTax = (salary - 2400000) * 0.3;
tax += extraTax;
breakdown.push(`Tax on ₹${salary - 2400000} at 30% = ₹${extraTax.toFixed(2)}`);
salary = 2400000;
}
if (salary > 2000000) {
let extraTax = (salary - 2000000) * 0.25;
tax += extraTax;
breakdown.push(`Tax on ₹${salary - 2000000} at 25% = ₹${extraTax.toFixed(2)}`);
salary = 2000000;
}
if (salary > 1600000) {
let extraTax = (salary - 1600000) * 0.2;
tax += extraTax;
breakdown.push(`Tax on ₹${salary - 1600000} at 20% = ₹${extraTax.toFixed(2)}`);
salary = 1600000;
}
if (salary > 1200000) {
let extraTax = (salary - 1200000) * 0.15;
tax += extraTax;
breakdown.push(`Tax on ₹${salary - 1200000} at 15% = ₹${extraTax.toFixed(2)}`);
salary = 1200000;
}
if (salary > 800000) {
let extraTax = (salary - 800000) * 0.1;
tax += extraTax;
breakdown.push(`Tax on ₹${salary - 800000} at 10% = ₹${extraTax.toFixed(2)}`);
salary = 800000;
}
if (salary > 400000) {
let extraTax = (salary - 400000) * 0.05;
tax += extraTax;
breakdown.push(`Tax on ₹${salary - 400000} at 5% = ₹${extraTax.toFixed(2)}`);
}
return { tax, breakdown };
}
The tax is calculated progressively in steps according to the following slabs:
- ₹0 to ₹4,00,000: NIL tax.
- ₹4,00,001 to ₹8,00,000: 5% tax.
- ₹8,00,001 to ₹12,00,000: 10% tax.
- ₹12,00,001 to ₹16,00,000: 15% tax.
- ₹16,00,001 to ₹20,00,000: 20% tax.
- ₹20,00,001 to ₹24,00,000: 25% tax.
- Above ₹24,00,000: 30% tax.
The calculation is carried out progressively, meaning the tax for each slab is calculated and added together.
UI Design and User Experience
The application has a clean and responsive design, making it accessible across various devices such as mobile phones, tablets, and desktops.
The homepage features:
- An animated background with a subtle framer-motion animation.
- A salary input field where users can enter their annual salary.
- A calculate button that triggers the tax calculation and displays the estimated tax along with a breakdown of the calculation.
The design is responsive, so the app adapts seamlessly to all screen sizes. I used Tailwind CSS for styling and Framer Motion for animations to ensure that the app feels dynamic and modern.
Viewing Tax Slabs
There is also a dedicated page that shows the Income Tax Slabs in a table format, which helps users better understand the tax rates applicable to different income ranges. This is accessible via the "View Tax Slabs" button at the top of the homepage. The tax slabs page provides a visual representation of the different income ranges and their respective tax rates.
Code Structure
The project consists of the following key components:
- HomePage: Where the main functionality of the tax calculator exists.
- TaxSlabsPage: A page displaying the Indian income tax slabs in a table format.
- App.js: Contains the routing logic using React Router to navigate between the calculator and tax slabs pages.
Here’s how the routing looks in the App.js file:
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import HomePage from './HomePage';
import TaxSlabsPage from './TaxSlabsPage';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/tax-slabs" element={<TaxSlabsPage />} />
</Routes>
</Router>
);
}
How You Can Contribute
The project is open-source and available on GitHub. If you would like to contribute or suggest improvements, feel free to fork the repository and make a pull request.
Conclusion
This Income Tax Calculator is a great tool for anyone looking to quickly determine their income tax based on the current Indian tax slabs. Built with React, Tailwind CSS, and Framer Motion, it provides a smooth user experience along with a functional and visually appealing design. Feel free to explore the live version or contribute to the project on GitHub.
You can access the live version of the calculator here.
Top comments (0)