Jump to content



Photo
- - - - -

Chapter 4

paycheck calculator

  • Please log in to reply
1 reply to this topic

#1 snb232

snb232

    Newbie

  • Members
  • Pip
  • 1 posts

Posted 8 July 2017 - 2:50 PM

Hi. I've been working on this for a while and I made a mistake someplace but I can't find my error. It's not working. Can you please help me. I think the HTML part is correct but I'm not 100% sure about the js part. I have done the validation for each part and corrected all the errors but it's still not working properly. 

 

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PayCheck</title>
    <!--[if lt IE 9]>
    <![endif]-->
    <link rel="stylesheet" href="css/styles.css">
 
</head>
<body>
  
   <!-- PayCheck.html -->
    <form action="0" method="post">
 
        <fieldset>
 
 <p>Use this form to calculate the Regular Pay. Overtime Pay. Gross Pay, and Net Pay for an employee.</p>
 
<div><label for="firstName">First Name</label><input type="text" name="firstName" id="firstName" required></div>
 
<div><label for="lastName">Last Name</label><input type="text" name="lastName" id="lastName" required></div>
 
<div><label for="regularHours">Regular Hours Worked (between 0 and 40)</label><input type="text" name="regularHours" id="regularHours" value="0" required></div>
 
<div><label for="overtimeHours">OverTime Hours Worked (between 0 and 40)</label><input type="text" name="overtimeHours" id="overtimeHours" value="0" required></div>
 
<div><label for="hourlyPay">Hourly Rate (between 0 and 99.99)</label><input type="text" name="hourlyPay" id="hourlyPay" value="0" required></div>
 
<div><label for="regularPay">Regular Pay</label><input type="text" name="regularPay" id="regularPay" value="0" required></div>
 
<div><label for="overtimePay">OverTime Pay</label><input type="text" name="overtimePay" id="overtimePay" value="0" required></div>
 
<div><label for="grossPay">Gross Pay</label><input type="text" name="grossPay" id="grossPay" value="0" required></div>
 
<div><label for="taxFICA">FICA Tax Rate (ex. 5.65) </label><input type="text" name="taxFICA" id="taxFICA" value="0.00" required></div>
 
<div><label for="taxState">State Tax Rate (ex. 5.75) </label><input type="text" name="taxState" id="taxState" value="0.00" required></div>
 
<div><label for="taxFederal">Federal Tax Rate (ex. 28.00) </label><input type="text" name="taxFederal" id="taxFederal" value="0.00" required></div>
 
<div><label for="totalTax">Total Taxes</label><input type="text" name="totalTax" id="totalTax" value="0.00"></div>
 
<div><label for="employeeName">Employee Name</label><input type="text" name="employeeName" id="employeeName" required></div>
 
<div><label for="netPay">Net Pay</label><input type="text" name="netPay" id="netPay" value="0.00" required></div>
 
<div><input type="Submit" value="Calculate" id="submit"></div>
 
        </fieldset>
    </form>
    <script src="js/paycheck.js"></script>
</body>
</html>
 
JS:
 
function calculate() {
'use strict';
 
var regularPay;
var overtimePay;
var employeeName;
var grossPay;
var totalTax;
var netPay;
  
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var regularHours = document.getElementById('regularHours').value;
var overtimeHours = document.getElementById('overtimeHours').value;
var hourlyPay = document.getElementById('hourlyPay').value;
var taxFICA = document.getElementById('taxFICA').value;
var taxState = document.getElementById('taxState').value;
var taxFederal = document.getElementById('taxFederal').value;
 
regularPay = regularHours * hourlyPay;
overtimePay = overtimeHours * hourlyPay;
grossPay = regularPay + overtimePay;
totalTax = taxFICA + taxState + taxFICA;
netPay = grossPay - totalTax;
employeeName = firstName + lastName;
 
regularPay = regularPay.toFixed(2);
overtimePay = overtimePay.toFixed(2);
totalTax = totalTax.toFixed(2);
netPay = netPay.toFixed(2);
 
 
document.getElementById('regularPay').value = regularPay;
document.getElementById('overtimePay').value = overtimePay;
document.getElementById('employeeName').value = employeeName;
document.getElementById('grossPay').value = grossPay;
document.getElementById('totalTax').value = totalTax;
document.getElementById('netPay').value = netPay;
 
 
return false;   
 
}
 
function init() {
'use strict';
document.getElementById('theForm').onsubmit = calculate;
 
window.onload = init;

 


  • 0

#2 David John

David John

    Member

  • Members
  • PipPip
  • 41 posts

Posted 9 July 2017 - 8:53 PM

Give this a try (I am certainly no accountant, so please double-check to make sure this is how pay is deducted).

And I intentionally left off overtime pay (unaware of the rate) as well as first name, last name, and net pay, but you probably get the idea.  

 

paycheck.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PayCheck</title>
<!--[if lt IE 9]>
    <script src="http://html5shiv.goo...5.js"></script>
    <![endif]-->
<script src="forum.js"></script>
</head>
<body>
<!-- PayCheck.html -->
<form action="" method="post" id="theForm">
        <fieldset>
            <p>Use this form to calculate the Regular Pay. Overtime Pay. Gross Pay, and Net Pay for an employee.</p>
			<div>
            <label for="quantity">Regular Hours Worked</label>
            <input type="number" name="hours" id="hours" value="1" min="1" required>
            </div>
			<div>
            <label for="price">Hourly Rate</label>
            <input type="text" name="rate" id="rate" value="1.00" required>
            </div>
			<div>
            <label for="FICAtax">FICA Tax Rate (%)</label>
            <input type="text" name="FICAtax" id="FICAtax" value="0.0" required>
            </div>
			<div>
            <label for="statetax">State Tax (%)</label>
            <input type="text" name="statetax" id="statetax" value="0.00" required>
            </div>
            <div>
            <label for="fedtax">Federal Tax (%)</label>
            <input type="text" name="fedtax" id="fedtax" value="0.00" required>
            </div>
			<div>
            <label for="total">Total</label><input type="text" name="total" id="total" value="0.00">
            </div>
			<div>
            <input type="submit" value="Calculate" id="submit">
            </div>
        </fieldset>
    </form></body>
</html>

forum.js

// Function called when the form is submitted.
// Function performs the calculation and returns false.
window.onload = init;

function init() {
'use strict';
document.getElementById('theForm').onsubmit = calculate;
} // End of init() function.

function calculate() {
'use strict';
//create a variable to store the total
var total;
//create a variable to get the value of the hours
var hours = document.getElementById('hours').value;
//create a variable to get the value of rate
var rate = document.getElementById('rate').value;
//create a variable to get the value of FICA tax
var FICAtax = document.getElementById('FICAtax').value;
//create a variable to get the state tax 
var statetax = document.getElementById('statetax').value;
//create a variable to get the federal tax
var fedtax = document.getElementById('fedtax').value;
//total is equal to hours * rate
total = hours * rate;
//i.e. if the tax rate is 8.25%, divide 8.25/100 to get .0825
FICAtax /= 100; 
statetax /= 100;
fedtax /= 100;

total = (hours*rate) - (hours*rate*FICAtax) - (hours*rate*statetax) - (hours*rate*fedtax);
// Format the total:
total = total.toFixed(2);//a number is object (of the type "Number") and has built-in methods like toFixed(), setting digits to the right of the decimal.
//display this where id="total" in the HTML	
document.getElementById('total').value = total;
//prevent the submission of the form
return false;    
} // End of calculate() function.

  • 0