Jquery Income Tax Calculator

This project is for Jquery Beginners or kids who are learning programming languages. This is fun project and does not need much expertise. The good thing about it is that, it does not need any installation or software to learn it. You can start by just using notepad and browser. 

We are taking tax rates from Indian tax system. You can modify it accordint to your needs.

Jquery Income Tax Calculator Algorithm:

 

Step 1) Get amount (Income) from user using html textbox(Done)

 

Step 2) Check If Income is less or equal 2,50,000 than

tax =0

 

Step 3) Check If Income is greater than 2,50,000 but less or equal 5,00,000 than

tax = (income - 250000)*interest rate/100

 

Step 4) Check If income is greater than 5,00,000 but less or equal 10,00,000 than

tax = (25000 + (income -500000))*20/100

 

Step 5) Check If income is greater than 10,00,000 than

tax = (25000 + 100000) + ((income-1000000)*30/100)

 

Step 6) Show the output to User


 

Testing


 

We will use four values for testing

First Amount : 2,40,000

Expected Result:

0 (according to step 2)

 

Second Amount: 4,50,000

Expected Result:

(450000-250000)*10/100 (according to step 3)

=>(200000) * 1/10 => 20000

 

Third Amount: 6,50,000

Expected Result:  

25000 + ((650000-500000) * 20/100)(according to step 4)

=>25000 + 150000 * ?

=>25000 + 30000=>55000


 

Fourth Amount: 12,00,000

Expected Result:

(25000 + 100000) + ((1200000-1000000)*30/100) (according to step 5)

=>125000 + (200000 * 3/10)

=>125000 + 60000=>185000

Complete code:

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Jquery Income Tax Calculator</title>
<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css rel=stylesheet>
<!--[if lt IE 9]>
<script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js></script>
<script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script>
<![endif]-->
<style>body{font-family:Arial}label#submit{background-color:yellow}</style>
</head>
<body>
<div class=container>
<h1>Jquery Income Tax Calculator</h1>
<form>
<label>Your Income: </label>
<input type=text id=income name=income />
<label id=submit>Submit</label><br /><br />
<label>Your Income Tax is : </label>
<input type=text id=tax name=tax readonly/>
</form>
</div>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script>
<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js></script>
<script>$(document).ready(function(){$("#submit").click(function(){var a=0;var b=$("#income").val();if(b<=250000){a=0}if(b>250000&&b<=500000){a=(b-250000)*10/100}if(b>500000&&b<=1000000){a=25000+((b-500000)*20/100)}if(b>1000000){a=(25000+100000)+((b-1000000)*30/100)}$("#tax").val(a)})});</script>
</body>
</html>

Video Tutorial: