Chapter 4

snb232 · July 8, 2017

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>

<head>

<title>PayCheck</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<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="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="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>

</fieldset>

</form>

</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;

David John · July 10, 2017

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.

Sign In

Chapter 4

Recommended Posts

snb232

Link to comment

Share on other sites

David John

Link to comment

Share on other sites

Join the conversation

Browse

Activity