The Paycheck assignment requires that we create an application that calculates paycheck information.
The user inputs First Name, Last Name, Regular Hours worked, Overtime Hours worked, Hourly PayRate, FICA, State, and Federal Tax Rates. The application calculates and displays the Regular Pay, Overtime Pay, Gross Pay, Total Taxes, and Net Pay.
My email address is the following jakerpomperada@gmail.com, jakerpomperada@aol.com, and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
My telephone number at home here in Bacolod City, Negros Occidental Philippines is +63 (034) 4335675.
Here in Bacolod City I also accepting computer repair, networking, and Arduino Project development at a very affordable price. My website is www.jakerpomperada.blogspot.com and www.jakerpomperada.com
If you like this video please click the LIKE button, SHARE, and SUBSCRIBE to my channel.
Your support on my channel is highly appreciated.
Thank you very much.
Program Listing
paycheck.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Paycheck Calculator in JavaScript</title></title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h2>Paycheck Calculator in JavaScript</h2>
<form action="javascript:void(0)" method="post" onsubmit="calculate()">
<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="regH">Regular Hours Worked (between 0 and 40)</label><input type="number" name="regH" id="regH" value="0" min="0" max="40" required></div>
<div><label for="overH">Overtime Hours Worked (between 0 and 40)</label><input type="number" name="overH" id="overH" value="0" min="0" max="40" required></div>
<div><label for="hourR">Hourly Rate (between 0 and 99.99)</label><input type="number" name="hourR" step=".01" id="hourR" value="0.00" min="0" max="99.99" required></div>
<div><label for="regP">Regular Pay</label><input type="number" name="regP" id="regP" step=".01" value="0.00" readonly="true"></div>
<div><label for="overP">Overtime Pay</label><input type="number" name="overP" id="overP" step=".01" value="0.00" readonly="true"></div>
<div><label for="grossP">Gross Pay</label><input type="number" name="grossP" id="grossP" step=".01" value="0.00" readonly="true"></div>
<div><label for="fica">Fica Tax Rate (ex. 5.65)</label><input type="number" name="fica" id="fica" step=".01" value="0.00" required></div>
<div><label for="state">State Tax Rate (ex. 5.75)</label><input type="number" name="state" id="state" step=".01" value="0.00" required></div>
<div><label for="fed">Federal Tax Rate (ex. 28.00)</label><input type="number" name="fed" id="fed" step=".01" value="0.00" required></div>
<div><label for="totalTax">Total Taxes</label><input type="number" name="totalTax" id="totalTax" step=".01" value="0.00" readonly="true"></div>
<div><label for="empName">Employee Name</label><input type="text" name="empName" id="empName" readonly="true"></div>
<div><label for="netP">Net Pay</label><input type="number" name="netP" id="netP" value="0.00" step=".01" readonly="true"></div>
<div><input type="submit" value="Calculate" id="submit"></div>
</fieldset>
</form>
<script src="js/paycheck.js"></script>
</body>
</html>
style.css
/* 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;
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;
}
#submit:hover {
background-position:0 -26px;
}
.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; }
*/
paycheck.js
function calculate() {
'use strict';
//Get all inputs from controls
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var regH = document.getElementById('regH').value;
var overH = document.getElementById('overH').value;
var hourR = document.getElementById('hourR').value;
var regP = document.getElementById('regP').value;
var overP = document.getElementById('overP').value;
var grossP = document.getElementById('grossP').value;
var fica = document.getElementById('fica').value;
var state = document.getElementById('state').value;
var fed = document.getElementById('fed').value;
//Append Employee Name
var empName = firstName + ' ' + lastName;
//Calculations
regP = (regH * hourR);
overP = (overH * hourR * 1.5);
grossP = (regP + overP);
var totalTax = (parseFloat(fica) + parseFloat(state) + parseFloat(fed)) / 100 * grossP;
var netP = (grossP - totalTax);
totalTax = totalTax.toFixed(2);
netP = netP.toFixed(2)
regP = regP.toFixed(2);
overP = overP.toFixed(2);
grossP = grossP.toFixed(2);;
//Send Calculations to Form Controls
document.getElementById('regP').value = regP;
document.getElementById('overP').value = overP;
document.getElementById('grossP').value = grossP;
document.getElementById('totalTax').value = totalTax;
document.getElementById('empName').value = empName;
document.getElementById('netP').value = netP;
}
function init() {
'use strict';
var theForm = document.getElementById('theForm');
}
window.onload = init;
