Answer to Question #260985 in HTML/JavaScript Web Application for kaya

Question

Answer to Question #260985 in HTML/JavaScript Web Application for kaya

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #260985

Income Tax Calculator Program

Input the Taxable Income and Compute the income tax using the following table:

*Note: Do not use prompts for user inputs. Use the HTML input tag.

over -----------------------------but not over --------------------------------Rate

--- -----------------------------------250,000 ------------------------------------0%

250,000 ---------------------------400,000 ---------------------20% of the excess over 250,000

400,000----------------------------800,000------------- 30,000+25% of the excess over 400,000

800,000------------------------ 2,000,000 ------------130,000+30% of the excess over 800,000

2,000,000 ----------------------8,000,000 -----------490,000+32% of the excess over 2,000,000

8,000,000 ------------------------------------------2,410,000+35% of the excess over 8,000,000

Ex)

Taxable Income Income Tax

180,000 0

320,000 14,000

520,000 60,000

930,000 169,000

2,400,000 618,000

10,000,000 3,110,000

Expert's answer

index.html

<!doctype html>
<html>
 <head>
 <meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
 <title>Tax calculator</title>
 <link rel='stylesheet' href='css/styles.css'/>
 </head>
<body>
 <div class='container'>
 <div class='verdict'>
 <p>Last year: </p>
 <p>This year: </p>
 </div>
 <div class='question'>
 <p>All other things being equal, how do the new income tax bands affect you?</p>
 </div>
 <div class='input'>
 <input type='text' class='salary' placeholder='Enter your annual salary figure here to find out'/>
 <input type='button' value='Submit' class='submit'>
 </div>
 </div>


 <script src='js/jquery.js'></script>
 <script src='js/currency.js'></script>
 <script src='js/main.js'></script>
 <script src="//interactive.guim.co.uk/libs/iframe-messenger/iframeMessenger.js"></script>
 <script>iframeMessenger.resize(135);</script>
</body>
</html>

styles.css

@font-face {
 font-family:'Guardian Agate Sans';
 src:url('http://s3.amazonaws.com/gdn-cdn/fonts/ascii/Guardian Ag Sans 1 Web-Reg.eot');
 src:url('http://s3.amazonaws.com/gdn-cdn/fonts/ascii/Guardian+Ag+Sans+1+Web-Reg.eot?#iefix') format('embedded-opentype'),url('http://s3.amazonaws.com/gdn-cdn/fonts/ascii/Guardian+Ag+Sans+1+Web-Reg.woff') format('woff'),url('http://s3.amazonaws.com/gdn-cdn/fonts/ascii/Guardian+Ag+Sans+1+Web-Reg.ttf') format('truetype'),url('http://s3.amazonaws.com/gdn-cdn/fonts/ascii/Guardian+Ag+Sans+1+Web-Reg.svg#Guardian+Text+Egyp+Web-Reg') format('svg');
 font-weight:400;
 font-style:normal;
 font-stretch:normal;
}


body {
 margin: 0;
 padding: 0;
}


.container{
 font-size: 14px;
 width:100%;
 height: 135px;
 font-family: 'Guardian Agate Sans', Georgia, serif;
 background-color: rgba(249,249,247,0.9);
 border-top: 1px solid #929497;
 border-bottom: 1px solid #929497;
}


.input {
 width: 100%;
 height: 50px;
 display: block;
 clear: both;
}


.question {
 float: right;
 width: 45%;
 height: 80px;
 margin: 0 0 0.5em 0;
}


.question p {
 line-height: 16px;
}


.verdict {
 border-right:1px dotted #676767;
 display: block;
 width: 50%;
 height: 80px;
 color: black;
 float: left;
 color: #194377;
 font-size: 1em;
 margin: 0 4% 0.5em 0;
 text-align: center;
}


.verdict p {
 margin: 14px 0 0 0;
}


.salary {
 width: 70%;
 float: left;
 height: 25px;
}


.salary:focus {
 border:1px solid #194377;
}


.submit {
 padding: 5px; 
 background: #194377; 
 font-family: "Guardian Agate Sans", Arial, sans-serif;
 font-weight: bold;
 color: #FFFFFF;
 float: left;
 border: 0 none;
 cursor: pointer;
 width: 20%;
 height: 30px;
 margin: 0 10px 0 10px;
}

main.js

$(function() {


 'use strict';


 var taxationSystemFormer = [
 {'name': 'PersonalAllowance', 'taxThreshold': 10000, 'pc': 0},
 {'name': 'BasicRate', 'taxThreshold': 31865, 'pc': 0.20},
 {'name': 'HigherRate', 'taxThreshold': 108135, 'pc': 0.40},
 {'name': 'AdditonalRate', 'taxThreshold': 10000000, 'pc': 0.45}
 ];


 var taxationSystemCurrent = [
 {'name': 'NewPersonalAllowance', 'taxThreshold': 10500, 'pc':0},
 {'name': 'NewBasicRate', 'taxThreshold': 31785, 'pc':0.20},
 {'name': 'NewHigherRate', 'taxThreshold':107715, 'pc':0.40},
 {'name': 'NewAdditonalRate', 'taxThreshold':10000000, 'pc':0.45}
 ];


 $('.salary').autoNumeric('init', {'aSep': ',', 'aSign': '£', 'vMin': '0'});


 $(document).keypress(function(e) {
 if (e.which === 13) {
 $('.submit').trigger('click');
 }
 });


 $('.submit').click(function(e) {
 e.preventDefault();
 var yearlySalary = parseInt($('.salary').autoNumeric('get'), 10);
 var oldAmount = calculateTaxation(yearlySalary, taxationSystemFormer);
 var newAmount = calculateTaxation(yearlySalary, taxationSystemCurrent);
 var taxationChangeString;


 $('.verdict p:first').html('Est. tax 14/15: £' + oldAmount);
 $('.verdict p:last').html('Est. tax 15/16: £' + newAmount);


 if (oldAmount > newAmount)
 taxationChangeString = ('£' + (oldAmount - newAmount)) + ' better off';
 if (oldAmount < newAmount)
 taxationChangeString = ('£' + (newAmount - oldAmount)) + ' worse off';
 if (oldAmount === newAmount)
 taxationChangeString = 'No change';


 });


 function calculateTaxation(yearlySalary, taxationSystem) {
 var taxableSalary;
 var taxLiability = 0;


 if (yearlySalary < 1e5) {
 taxableSalary = yearlySalary - taxationSystem[0]['taxThreshold'];
 } else {
 var adjustedPersonalAllowance = taxationSystem[0]['taxThreshold'] - ((yearlySalary - 1e5) / 2);
 if (adjustedPersonalAllowance < 0) {
 taxableSalary = yearlySalary - taxationSystem[0]['taxThreshold'];
 } else {
 taxableSalary = yearlySalary - adjustedPersonalAllowance;
 }
 }


 var firstBandTaxLiability = 0;
 var secondBandTaxLiability = 0;
 var thirdBandTaxLiability = 0;
 var fourthBandTaxLiability = 0;


 // CALCULATE SECOND BAND LIABILITY
 if (taxableSalary > 0) {
 if (taxableSalary > taxationSystem[1]['taxThreshold']) {
 secondBandTaxLiability = (taxationSystem[1]['taxThreshold']) * taxationSystem[1]['pc'];
 } else {
 secondBandTaxLiability = taxableSalary * taxationSystem[1]['pc'];
 }
 }


 // CALCULATE THIRD BAND LIABILITY
 if (taxableSalary > taxationSystem[1]['taxThreshold']) {
 if (taxableSalary > taxationSystem[3]['taxThreshold']) {
 thirdBandTaxLiability = (taxationSystem[2]['taxThreshold']) * taxationSystem[2]['pc'];
 } else {
 thirdBandTaxLiability = (taxableSalary - taxationSystem[1]['taxThreshold']) * taxationSystem[2]['pc'];
 }
 }


 // CALCULATE FOURTH BAND LIABILITY
 if (taxableSalary > taxationSystem[3]['taxThreshold']) {
 fourthBandTaxLiability = (taxableSalary - taxationSystem[3]['taxThreshold']) * taxationSystem[3]['pc'];
 }


 // console.log('FIRST BAND LIABILITY: ' + firstBandTaxLiability);
 // console.log('SECOND BAND LIABILITY: ' + secondBandTaxLiability);
 // console.log('THIRD BAND LIABILITY: ' + thirdBandTaxLiability);
 // console.log('FOURTH BAND LIABILITY: ' + fourthBandTaxLiability);


 taxLiability = firstBandTaxLiability + secondBandTaxLiability + thirdBandTaxLiability + fourthBandTaxLiability;


 return taxLiability;
 }


});

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #260985 in HTML/JavaScript Web Application for kaya

Income Tax Calculator Program

Comments

Leave a comment

Related Questions