Paycheck Version 2 Calculator The user inputs First Name, Last Name, Hours Worke

ID: 3850134 • Letter: P

Question

Paycheck Version 2 Calculator

The user inputs First Name, Last Name, Hours Worked, Hourly Pay Rate, FICA, State, and Federal Tax Rates. The application calculates and displays the Regular Hours, Overtime Hours, Regular Pay, Overtime Pay, Gross Pay, Total Taxes, and Net Pay. The application also performs the following user entry validation tests:
1. Ensure that Hours Worked is entered and is between 0 and 80. 2. Ensure that Hourly Pay Rate is entered and is between 0 and 100.00.
If both of the above conditions are not met, an error message alert window appears that says the following: Please enter valid hours and a valid payrate!
Because the user isn’t entering Regular Hours and Overtime Hours as with the first paycheck assignment, you must use an If statement to test Hours Worked to calculate Regular Hours and OverTime Hours and Regular Pay and Overtime Pay. All Hours Worked over 40 are considered Overtime Hours while Hours Worked between 0 and 40 are considered Regular Hours. Regular Pay is calculated as Regular Hours worked * Hourly Pay Rate. Overtime Pay is calculate as Overtime Hours * Hourly Rate * 1.5.
The following screenshots demonstrate how the application works:

1. Create an HTML5 file that contains a HTML form like the screenshots shown above that accepts the First Name, Last Name, Hours Worked, Hourly Rate, Fica Tax Rate, State Tax Rate, and Federal Tax Rate for entry and shows the Regular Hours Worked, Overtime Hours Worked, Regular Pay, Overtime Pay, Gross Pay, Total Taxes, Employee Name, and Net Pay and a submit button with the label Calculate. Save the file as paycheck2.html and store it in your Ch05directory. The paycheck2.html file must be free of errors and validated. Add the necessary
code to link to a CSS file called styles.css that is stored in your Ch05/css subdirectory. Add the necessary code to use the paycheck2.js file that is stored in your Ch05/js subdirectory.

2. Download the styles.css file and store it in your Ch05/css subdirectory.

3. Create and debug a JavaScript file that processes the Paycheck information from the paycheck.html file that meets the following specifications (43 Points Total as broken down below):

a. Save the file as paycheck2.js in your Ch05/js subdirectory. (1 Point)

b. Create a function that is called when the paycheck2.html form is submitted. The function must include the following information. (3 Points)

c. Output variables for the Regular Hours, Overtime Hours, Regular Pay, Overtime Pay, Gross Pay, Total Taxes, Net Pay, and Employee Name return results to the paycheck2.html file. (2 Points)

d. Input variables for the First Name, Last Name, Hours Worked, Hourly Rate, Fica Tax, State Tax, and Federal Tax use the document.getElementByID method to retrieve input from the paycheck2.html file). (2 Points)

e. An if then else statement will be used to ensure that Hours Worked is entered and is between 0 and 80 and that Hourly Pay Rate is entered and is between 0 and 100.00. If both of the above conditions are not met, an error message alert window appears that says the following: Please enter valid hours and a valid payrate! (10 Points)

f. An if then else statement will be used to determine Regular Hours and Overtime Hours wherein Hours Worked over 40 are Overtime Hours and Hours Worked between 0 and 40 are Regular Hours. (10 Points)

g. Regular Pay will be correctly calculated and formatted with the toFixed() method. (2 Points)

h. Overtime Pay will be correctly calculated and formatted with the toFixed() method. (2 Points)

i. Gross Pay will be correctly calculated and formatted with the toFixed() method. (2 Points)

j. Fica Tax deducted will be correctly calculated. (1 Point)

k. State Tax deducted will be correctly calculated. (1 Point)

l. Federal Tax deducted will be correctly calculated. (1 Point)

m. Total Taxes will be correctly calculated and formatted. (2 Points)

n. The Employee Name will be correctly displayed. (1 Point)

o. The Net Pay will be correctly calculated and formatted with the toFixed() method. (2 Points)

p. The init() function will be correctly used. (1 Point)

This is how I was doing.
<!DOCTYPE html>

                        <div><label for="regHours">Regular Hours Worked (between 0 and 40)</label>
                                <input type="number" name="regHours" id="regHours" value ="0" min="0" max="40" step="0.5" required>
                        </div>

                        <div><label for="overHours">Overtime Hours Worked (between 0 and 40)</label>
                                <input type="number" name="overHours" id="overHours" value ="0" min="0" max="40" step="0.5" required>
                        </div>

                        <div><label for="rate">Hourly Rate (between 0 and 99.99)</label>
                                <input type="number" name="rate" id="rate" value ="0.00" min="0" max="99.99" step="0.01" required>
                        </div>

                        <div><label for="regPay">Regular Pay</label>
                                <input type="number" name="regPay" id="regPay" value ="0.00" step="0.01">
                        </div>

                        <div><label for="overtimePay">Overtime Pay</label>
                                <input type="number" name="overtimePay" id="overtimePay" value ="0.00" step="0.01">
                        </div>

                        <div><label for="grossPay">Gross Pay</label>
                                <input type="number" name="grossPay" id="grossPay" value ="0.00" step="0.01">
                        </div>

                        <div><label for="stateTax">State Tax Rate (ex. 5.75)</label>
                                <input type="number" name="stateTax" id="stateTax" value ="0.00" step="0.01">
                        </div>

                        <div><label for="fedTax">Federal Tax Rate (ex. 28.00)</label>
                                <input type="number" name="fedTax" id="fedTax" value ="0.00" step="0.01">
                        </div>

                        <div><label for="totalTax">Total Taxes</label>
                                <input type="number" name="totalTax" id="totalTax" value ="0.00" step="0.01">
                        </div>

                        <div><label for="employee">Employee Name</label>
                                <input type="text" name="employeeName" id="employeeName">
                        </div>

</body>
</html>

function calculate(){
        'use strict';
// Get variables from form
        var firstName = document.getElementById('firstName').value;
        var lastName = document.getElementById('lastName').value;
        var regHours = document.getElementById('regHours').value;
        var overHours = document.getElementById('overHours').value;
        var rate = document.getElementById('rate').value;
        var fICA = document.getElementById('fICA').value;
        var stateTax = document.getElementById('stateTax').value;
        var fedTax = document.getElementById('fedTax').value;
// Make calculations
        var regPay = (rate*regHours).toFixed(2);
        var overtimePay = (overHours*(1.5*rate)).toFixed(2);
        var grossPay = (+regPay+ +overtimePay).toFixed(2);
        var taxes = ((+fICA+ +stateTax+ +fedTax)/100*grossPay).toFixed(2);
        var netPay = (grossPay-taxes).toFixed(2);
        var employeeName = lastName+", "+firstName;
// Insert new values
        document.getElementById('regPay').value = regPay;
        document.getElementById('overtimePay').value = overtimePay;
        document.getElementById('grossPay').value = grossPay;
        document.getElementById('totalTax').value = taxes;
        document.getElementById('employeeName').value = employeeName;
        document.getElementById('netPay').value = netPay;
        return false;
}

function init(){
'use strict';
document.getElementById('form').onsubmit = calculate;
}

window.onload = init;

// From: http://www.assemblesoft.com/examples/form/simpleform.html
* {margin:0; padding:0;}

html {
font: 90%/1.3 arial,sans-serif;
padding:1em;
background:#B9C2CC;
}
form {
background:#fff;
padding:1em;
border:1px solid #eee;
}

fieldset div {
margin:0.3em 0;
clear:both;
}

form {
margin:1em;
width:15em;
}

label {
float:none;
width:12em;
display:block;
clear:both;
}

legend {
color:#0b77b7;
font-size:1.4em;
}
legend span {
width:10em;
text-align:right;
}
input {
padding:0.15em;
width:10em;
border:1px solid #ddd;
background:#fafafa;
font:bold 1em arial, sans-serif;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
display:block;
float:left;
}
input:hover, input:focus {
border-color:#c5c5c5;
background:#f6f6f6;
}
fieldset {
border:1px solid #ddd;
padding:0 0.5em 0.5em;
}
.date input {
background-image:url(../gfx/calendar-small.gif);
background-repeat:no-repeat;
background-position:100% 50%;
}

.date fieldset label {
float:none;
display:block;
text-align:left;
width:auto;
}
.date fieldset div {
float:left;
clear:none;
margin-right:0.2em;
}
.radio, .date {
position:relative;
}
.radio fieldset, .date fieldset {
border:none;
width:auto;
padding:1px 0 0 11em;
}
.radio legend, .date legend {
font-size:1em;
color:#000;
}
.radio legend span, .date legend span {
position:absolute;
left:0;
top:0.3em;
width:10em;
display:block;
}
.radio label, .radio input {
vertical-align:middle;
display:inline;
float:none;
width:auto;
background:none;
border:none;
}
.radio div {
float:left;
white-space:nowrap;
clear:none;
}

.email {
width:14em;
}

input.default {
color:#bbb;
}

#submit {
margin:1em;
width:69px;
height:26px;
overflow:hidden;
border:0;
display:block;
cursor:pointer !important; cursor:hand;
}
#submit:hover {
background-position:0 -26px;
}

textarea {
padding:0.15em;
width: 200px;
height: 50px;
display: block;
}

.error {
color: ##FF1400;
}
/*
:invalid {
color:red;
}
*/
/*
input[type=checkbox], input[type=radio] { visibility: hidden; width:0; height:0; padding:0; margin:0; }
input[type=checkbox] + label, input[type=radio] + label { padding-left:18px; }
input[type=checkbox] + label{ background: url(../gfx/check_radio.png) 0 0 no-repeat; }
input[type=checkbox]:focus + label{ background-position: 0 -16px; }
input[type=checkbox] + label:hover{ background-position: 0 -32px; }
input[type=checkbox]:checked + label{ background-position: 0 -48px; }

input[type=radio] + label{ background: url(../gfx/check_radio.png) 0 -64px no-repeat; }
input[type=radio]:focus + label{ background-position: 0 -80px; }
input[type=radio] + label:hover{ background-position: 0 -96px; }
input[type=radio]:checked + label{ background-position: 0 -112px; }
*/

BNG 16% 10:55 PM Sprint Paycheck 2(1)(... a Paycheck ve on 2 Calculator The Paycheck version 2 assignment rrquirrs that we crrate an application that calculates paycheck paych he p aycheck2.htrni plot .ave thr Payc file complrted in the previaus assignment as paych The usrr uts First st Na rd, Hourly Pay Rate, F CA, St Frdel ates. T he app calculatrs and displays the Regular HDurs, overtimr Haurs, Regular Pay, overtime Pay, Grass Pay, Total Taxnes, and Net Pay. Thr application also perfarms the follawing user entry validatian tests 1. Ensure that Hours Worked is entered and is between 0 and 80. 2. Ensure that Hourly Pay Rate is entered and is between 0 and 100.00. bath now appe ys tho arr not following: Prase enter d haul and a valid payrorei g Regul d 0 h the first paych assignment, you must use an If statement to test Hours Worked to calculate Regular Hours and Reg ay and overt Pay. All H rs Worker doverti Hours while Hours worked between 0 and 40 are considered Regular Hours. As with the previous assignment, Regular Pay is calculated as Regular Hours worked Hourly Pay Rate. Overtime Pay is calculate as overtime Hours Hourly Rate 1.5. of the remaining Gross Pay, Taxes, and Net Pay variables are calculated as with the previous assignment. The following shots drmonstrate how the applicatian works: 1. UFIan ntry to th paycheck2.html form, 2. Enter the First Name, Last Name, Hours following rly Rate Ratr, Stat nd Federal Tax Rate est d Tax Rate, Doc, RD 100.00, 5.65, 5.7 28.00.

Explanation / Answer

The code is given below :

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Shopping Calculator</title>
<link rel="stylesheet" href="css/styles.css">

</head>
<body>
<form action="" method="post" id="form">
<fieldset>
<p>Use this form to calculate the Regular Pay, Overtime Pay, Gross Pay, and Net Pay for an employee.</p>
<div><label for="lastName">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="regHours">Regular Hours Worked (between 0 and 40)</label>
<input type="number" name="regHours" id="regHours" value ="0" min="0" max="40" step="0.5" required>
</div>
<div><label for="overHours">Overtime Hours Worked (between 0 and 40)</label>
<input type="number" name="overHours" id="overHours" value ="0" min="0" max="40" step="0.5" required>
</div>
<div><label for="rate">Hourly Rate (between 0 and 99.99)</label>
<input type="number" name="rate" id="rate" value ="0.00" min="0" max="99.99" step="0.01" required>
</div>
<div><label for="regPay">Regular Pay</label>
<input type="number" name="regPay" id="regPay" value ="0.00" step="0.01">
</div>
<div><label for="overtimePay">Overtime Pay</label>
<input type="number" name="overtimePay" id="overtimePay" value ="0.00" step="0.01">
</div>
<div><label for="grossPay">Gross Pay</label>
<input type="number" name="grossPay" id="grossPay" value ="0.00" step="0.01">
</div>
<div><label for="fICA">Fica Tax Rate (ex. 5.65)</label>
<input type="number" name="fICA" id="fICA" value ="0.00" step="0.01">
</div>
<div><label for="stateTax">State Tax Rate (ex. 5.75)</label>
<input type="number" name="stateTax" id="stateTax" value ="0.00" step="0.01">
</div>
<div><label for="fedTax">Federal Tax Rate (ex. 28.00)</label>
<input type="number" name="fedTax" id="fedTax" value ="0.00" step="0.01">
</div>
<div><label for="totalTax">Total Taxes</label>
<input type="number" name="totalTax" id="totalTax" value ="0.00" step="0.01">
</div>
<div><label for="employee">Employee Name</label>
<input type="text" name="employeeName" id="employeeName">
</div>
<div><label for="netPay">Net Pay</label>
<input type="number" name="netPay" id="netPay" value ="0.00" step="0.01">
</div>
<div><input type="submit" value="Calculate" id="submit">
</div>
</fieldset>
</form>
</div>
<script src="js/paycheck.js"></script>
</body>
</html>
function calculate(){
'use strict';
// Get variables from form
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var regHours = document.getElementById('regHours').value;
var overHours = document.getElementById('overHours').value;
var rate = document.getElementById('rate').value;
var fICA = document.getElementById('fICA').value;
var stateTax = document.getElementById('stateTax').value;
var fedTax = document.getElementById('fedTax').value;
// Make calculations
var regPay = (rate*regHours).toFixed(2);
var overtimePay = (overHours*(1.5*rate)).toFixed(2);
var grossPay = (+regPay+ +overtimePay).toFixed(2);
var taxes = ((+fICA+ +stateTax+ +fedTax)/100*grossPay).toFixed(2);
var netPay = (grossPay-taxes).toFixed(2);
var employeeName = lastName+", "+firstName;
// Insert new values
document.getElementById('regPay').value = regPay;
document.getElementById('overtimePay').value = overtimePay;
document.getElementById('grossPay').value = grossPay;
document.getElementById('totalTax').value = taxes;
document.getElementById('employeeName').value = employeeName;
document.getElementById('netPay').value = netPay;
return false;
}
function init(){
'use strict';
document.getElementById('form').onsubmit = calculate;
}
window.onload = init;
// From: http://www.assemblesoft.com/examples/form/simpleform.html
* {margin:0; padding:0;}
html {
font: 90%/1.3 arial,sans-serif;
padding:1em;
background:#B9C2CC;
}
form {
background:#fff;
padding:1em;
border:1px solid #eee;
}
fieldset div {
margin:0.3em 0;
clear:both;
}
form {
margin:1em;
width:15em;
}
label {
float:none;
width:12em;
display:block;
clear:both;
}
legend {
color:#0b77b7;
font-size:1.4em;
}
legend span {
width:10em;
text-align:right;
}
input {
padding:0.15em;
width:10em;
border:1px solid #ddd;
background:#fafafa;
font:bold 1em arial, sans-serif;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
display:block;
float:left;
}
input:hover, input:focus {
border-color:#c5c5c5;
background:#f6f6f6;
}
fieldset {
border:1px solid #ddd;
padding:0 0.5em 0.5em;
}
.date input {
background-image:url(../gfx/calendar-small.gif);
background-repeat:no-repeat;
background-position:100% 50%;
}
.date fieldset label {
float:none;
display:block;
text-align:left;
width:auto;
}
.date fieldset div {
float:left;
clear:none;
margin-right:0.2em;
}
.radio, .date {
position:relative;
}
.radio fieldset, .date fieldset {
border:none;
width:auto;
padding:1px 0 0 11em;
}
.radio legend, .date legend {
font-size:1em;
color:#000;
}
.radio legend span, .date legend span {
position:absolute;
left:0;
top:0.3em;
width:10em;
display:block;
}
.radio label, .radio input {
vertical-align:middle;
display:inline;
float:none;
width:auto;
background:none;
border:none;
}
.radio div {
float:left;
white-space:nowrap;
clear:none;
}
.email {
width:14em;
}
input.default {
color:#bbb;
}
#submit {
margin:1em;
width:69px;
height:26px;
overflow:hidden;
border:0;
display:block;
cursor:pointer !important; cursor:hand;
}
#submit:hover {
background-position:0 -26px;
}
textarea {
padding:0.15em;
width: 200px;
height: 50px;
display: block;
}
.error {
color: ##FF1400;
}
/*
:invalid {
color:red;
}
*/
/*
input[type=checkbox], input[type=radio] { visibility: hidden; width:0; height:0; padding:0; margin:0; }
input[type=checkbox] + label, input[type=radio] + label { padding-left:18px; }
input[type=checkbox] + label{ background: url(../gfx/check_radio.png) 0 0 no-repeat; }
input[type=checkbox]:focus + label{ background-position: 0 -16px; }
input[type=checkbox] + label:hover{ background-position: 0 -32px; }
input[type=checkbox]:checked + label{ background-position: 0 -48px; }
input[type=radio] + label{ background: url(../gfx/check_radio.png) 0 -64px no-repeat; }
input[type=radio]:focus + label{ background-position: 0 -80px; }
input[type=radio] + label:hover{ background-position: 0 -96px; }
input[type=radio]:checked + label{ background-position: 0 -112px; }
*/

Navigate

Paycheck Calculator Please use the Paycheck Calculator Drop Box to submit your a

PaycheckCity.com Payche.. BIBLE TRIVIA CHAPTER A... Cartua MINDTAP From Cengage

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Paycheck Version 2 Calculator The user inputs First Name, Last Name, Hours Worke

Question

Explanation / Answer

Related Questions

Navigate