Category: JavaScript

Categories
JavaScript

Alert Method in JavaScript

 In this article, I will share with you how to declare and use the alert method using the JavaScript programming language.

I am currently accepting programming work, IT projects, school and application development, programming projects, thesis and capstone projects, IT consulting work, computer tutorials, and web development work kindly contact me at the following email address for further details.  If you want to advertise on my website kindly contact me also in my email address also. Thank you.

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.

Program Listing

<html>
 <head>
  <title> Alert Method in JavaScript </title>
</head>
   <body>
    <script>
    	alert("This is an Alert Method in Javascript");
    </script>
 </body>
 </html>
Categories
JavaScript

Paycheck Calculator in JavaScript

 Machine Problem in JavaScript

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. 

I am currently accepting programming work, IT projects, school and application development, programming projects, thesis and capstone projects, IT consulting work, computer tutorials, and web development work kindly contact me at the following email address for further details.  If you want to advertise on my website kindly contact me also in my email address also. Thank you.

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>

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;

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