Web Scripting Project JavaScripts and HTML WebPage

Web Scripts Project
JavaScript and HTML Webpage Demo
By
Sunny Okoro

Table of Contents
INTRODUCTION.............................................................................................................................................2
ORDER SYSTEM .............................................................................................................................................3
ORDER SYSTEM CODES .................................................................................................................................8
PAYROLL CALCULATIONS ............................................................................................................................10
PAYROLL CALCULATION CODES ..................................................................................................................13
RESTAURANT SYSTEM.................................................................................................................................15
RESTAURANT SYSTEM CODES.....................................................................................................................18
SPORTS SYSTEM ..........................................................................................................................................25
SPORTS SYSTEM CODES ..............................................................................................................................32

INTRODUCTION
This document contains different web scripting small programs created in Java Scripts and HTML.

ORDER SYSTEM CODES
Java Scripts & HTML Codes
****************metric.js file***************************************
// convert pounds into kilograms//
var Pounds = parseFloat(prompt ("Enter the number of pounds to be
converted into killograms. n", " "));
varkillograms = Pounds * 0.4536;
//I added the lb symbol for pounds display enterd by the user.
document.writeln("Pounds enterned is: " + Pounds + "lb" );
//I added the kg symbol for killograms result.
document.writeln("<p>killograms is: " + killograms + "Kg" );
*********order.js file***************************************************
// Get the input from the user//
var price = parseFloat(prompt ("What is the price of your order? No dollar
sign. n", " "));
var tax =parseFloat(prompt ("What is the percenntage of the sales tax of
your order? No percentage sign. n", " "));
//calculate the total price and total prince for the order enter
varFinaltax = tax /100;
varSalestax = price * Finaltax;
varFinalprice = price + Salestax ;
// Display the results back to the customer
document.write("<p> Order price entered: $ ");
document.writeln(price);
document.write("<p> Percentage of sales tax entered: ");
document.write( + tax + "%" );
document.write("<p> Calculated sales tax to : $");
document.write(Salestax);
document.write("<p> Total price calculated with tax: $");
document.write(Finalprice);
******************order.html**********************************

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> order java systems</title>
</head>
<body>
<script type = "text/javascript" src="order.js">
</script>
</body>
</html>
******************************systemorder.html************
<head>
<title> order java systems</title>
</head>
<body>
<h1> Calculate book price</h1>
<script type = "text/javascript" src = "order.js">
</script><br/>
<h1> Metric Calculator </h1>
<script type = "text/javascript" src = "Metric.js">
</script><br/>
</body>
</html>
**************************************************************************
**

PAYROLL CALCULATION CODES
*****payrollcalculation.js file**************************************
varnetPay = 0;
var gross = 0;
vartotalNet = 0;
vartotalGross = 0;
varnumEmp;
varhourlyRate = 0;
var rate;
var deduction = 0;
var MAX_HOURS = 80;
var FULL_HOURS = 40;
// get number of eployees from the user
numEmp = parseInt(prompt("Enter the number of employes? n", " "));
// calculate the hours worked.
for (varemp = 1; emp<= numEmp; emp++)
{

var hours = 0;
// Get the hours worked from the user.
hours = parseFloat(prompt ("Enter number of hours worked by
employee #" + emp + "n", " "));
while(hours < 0 || hours > MAX_HOURS){
hours = parseFloat(prompt ("Enter your hours worked.n
hours must be between 0 and "
+ MAX_HOURS + "
hours", " "));
}
if (hours < FULL_HOURS)
rate = .15;
else
rate = .30;
// Get the hourly rate from the user.
varhourlyRate = 0;
hourlyRate = parseFloat(prompt ("Enter employee #" + emp + "
hourly raten", " "));
// Validate the input by the user.
while (hourlyRate< 7.50 || hourlyRate> 15.00 )
{
hourlyRate = parseFloat(prompt ("Enter your hourly raten
Must be between 7.50 & 15.00", " "));
}
gross = hours * hourlyRate;
deduction = rate * gross;
netPay = gross - deduction;
totalNet += netPay;
totalGross += gross;
// print the results
document.write("<p>Employee #" + emp + " worked " + hours +
" hours at $" + hourlyRate + " per hour for gross pay of $" + gross
+ " and net pay of $" + netPay + " based on a tax rate of " + rate * 100 +
"%." );
}
document.write("<p> Total grosspay is $" + totalGross);
document.write("<p> Total netpay is $" + totalNet );
************************payrollcalculation.html***************************
<head>
<title>Payroll Caclculator</title>

</head>
<body>
<h2>Payroll Calculations</h2>
<script type = "text/javascript" src =
"payrollcalculations.js">
</script>
</body>
</html>
RESTAURANT SYSTEM

RESTAURANT SYSTEM CODES
Java Scripts & Html Codes

<head>
<title> ROSEHILL STAR RESTAURANT </title>
<script type = "text/javascript" src = "lab.js" >
</script>

</head>
<body>
<p><h1>ROSEHILL STAR RESTAURANT ORDER SYSTEM</h1></p>
<form name = "orderForm" action = " ">
<p>
<input type= "button" id = "submit" name = "submit" value
= "Submit Order" />
<input type = "reset" id = "Reset" value = "Clear Order"/>
</p>
<p> Please enter your initials </p>
<input type =" text" id = "name" name ="name" size="3" maxlength="3" />
<p> Please enter the discount rate without % sign </p>
<input type =" text" id = "discount" name ="discount" size="5"
maxlength="5" />
<p><h2>MENU</h2></p>

<p><h4>Main dish </h4></p>
<input type= "radio" name = "mainDish" id ="fchicken"
value=" FriedChicken" checked ="checked" /> Fried Chicken <br
/>
<input type = "radio" name ="mainDish" id = "chicken"
value="BakedChicken" /> Baked Chicken<br />
<input type = "radio" name ="mainDish" id ="Burger"
value= "Burger" onclick="handlemainDishBurgerclick();" />
Burger <br />
<p><h4>Side dish</h4></p>
<input type= "checkbox" name = "SideDish" id ="fries"
value=" fries" checked ="checked" /> French fries
<br />
<input type = "checkbox" name ="SideDish" id ="cake"
value="cake" /> Triple fudge cake <br />
<input type = "checkbox" name ="SideDish" id = "cream"
value= "cream" /> International Ice Cream <br
/>

<hr />
<p>Customer Special Request</p>
<hr/>
<textarea name = "customer request" rows ="3" cols= "40">
(ANY SPECIAL REQUEST) </textarea>
</form>
<script type = "text/javascript" src = "lab2.js" >
</script>
</body>
</html>
*******************JS FILE1*******************************************
// Event handler for the form
functiongiveInitsFocus ()
{
// Give focus to the textbox
document.orderForm.name.focus();
}
// text input function
functionisInitialsTextValid()
{
varpos;
var name = document.getElementById("name").value;
varpos = name.search (/^([A-Z]|[a-z]){2,3}$/);

if (pos != 0 )
{
alert ("Error in initials entered is not in correct form. n" +
"Must be first letters of first and last names" );
return false;
} else
return true;
}
// tax function
functionisDiscountValid()
{
var discount = document.getElementById("discount").value;
var position = discount.search (/^d{1,2}$/);
if (position != 0 )
{
alert ("Error in the discount rate entered. n" + " Must be
in x formate one or two digits. No % sign.");
return false;
} else
return true;
}
// SIDE DISH
var FRIES_COST = 9.50;
var CAKE_COST = 12.50;
var ICE_COST = 7.50;
functionhandlefriesclick()
{
if (document.orderForm.SideDish[0].checked == true)
{
alert ("The cost of large basket of fries is $" + FRIES_COST);
}
}
functionhandlecakeclick()
{
{
alert ("The cost of large tripple fudge cake is $" + CAKE_COST);
}
}
functionhandlecreamclick()
{
{
alert ("The cost of international ice cream is $" + ICE_COST);
}
}
// MAIN DISH

// caculate the discount price
var rate;
varcostFinal;
rate = parseFloat (document.getElementById("discount").value / 100 * Total
);
costFinal = ( Total - rate );
alert("The total cost of the meal is $ " + Total + " and the
discount rate is $" + rate.toFixed(2) );
recipt = confirm("The total cost of the meal with discount is
$ "+ costFinal.toFixed(2) + ".n" +
"Do you want to place this order or cancel it");
}
// test the text input
functioncheckInitials()
{
nameCalc = isInitialsTextValid();
if (nameCalc == false)
{
document.orderForm.discount.focus();
document.orderForm.discount.select();
}
else
{
handleSubmitClick();
}
}
// check the discount
function checkDiscount()
{
rateCalc = isDiscountValid();
if (rateCalc == false)
{
}
else
{

}
}
// check the recipt
if (recipt == false )
{
document.orderForm.Reset.click();
}
****************JS FILE2.********************
// focus
onload = giveInitsFocus;
// submit
document.orderForm.submit.onclick = checkDiscount;
// side dish
document.orderForm.SideDish[0].onclick = handlefriesclick;
document.orderForm.SideDish[1].onclick = handlecakeclick;
document.orderForm.SideDish[2].onclick = handlecreamclick;
// main dish.
document.orderForm.mainDish[0].onclick = handlemainDishfchickenclick;
document.orderForm.mainDish[1].onclick = handlemainDishbchickenclick;
document.orderForm.mainDish[2].onclick = handlemainDishBurgerclick;
SPORTS SYSTEM

SPORTS SYSTEM CODES
***********HTML FILE***********************************************
<head>
<title>SPORTS SYSTEM</title>
</head>
<body>
<h2>Student Athlete </h2>
<script type = "text/javascript" src = "student.js">
</script>
</body>
</html>
*************** Java Scripts file 1*****************
// Event handler for the form
functiongiveInitsFocus ()
{
// Give focus to the textbox
document.orderForm.name.focus();
}
// text input function
functionisInitialsTextValid()
{
varpos;
var name = document.getElementById("name").value;

varpos = name.search (/^([A-Z]|[a-z]){2,3}$/);
if (pos != 0 )
{
alert ("Error in initials entered is not in correct form. n" +
"Must be first letters of first and last names" );
return false;
} else
return true;
}
// tax function
functionisDiscountValid()
{
var discount = document.getElementById("discount").value;
var position = discount.search (/^d{1,2}$/);
if (position != 0 )
{
alert ("Error in the discount rate entered. n" + " Must be
in x formate one or two digits. No % sign.");
return false;
} else
return true;
}
// SIDE DISH
var FRIES_COST = 9.50;
var CAKE_COST = 12.50;
var ICE_COST = 7.50;
functionhandlefriesclick()
{
{
alert ("The cost of large basket of fries is $" + FRIES_COST);
}
}
functionhandlecakeclick()
{
{
alert ("The cost of large tripple fudge cake is $" + CAKE_COST);
}
}
functionhandlecreamclick()
{
{
alert ("The cost of international ice cream is $" + ICE_COST);
}

}
// MAIN DISH
var BCHICKEN_COST = 6.50;
var FCHICKEN_COST = 5.50;
var BURGER_COST = 4.50;
functionhandlemainDishfchickenclick()
{
alert("The cost of 10 piece fried chicken is $" +FCHICKEN_COST);
}
functionhandlemainDishbchickenclick()
{
alert("The cost of 10 piece baked chicken is $" + BCHICKEN_COST);
}
functionhandlemainDishBurgerclick()
{
alert ("The cost of regular burger is $" + BURGER_COST);
}
functionhandleSubmitClick()
{
var Total = 0;
// statements for sidedish
{
Total += FRIES_COST;
}
{
Total += CAKE_COST;
}
{
Total += ICE_COST;
}
// statements for the main dish
{
Total += FCHICKEN_COST;
}
if(document.orderForm.mainDish[1].checked == true)
{
Total += BCHICKEN_COST;
}
{
Total += BURGER_COST;
}

// caculate the discount price
var rate;
varcostFinal;
rate = parseFloat (document.getElementById("discount").value / 100 * Total
);
costFinal = ( Total - rate );
alert("The total cost of the meal is $ " + Total + " and the
discount rate is $" + rate.toFixed(2) );
recipt = confirm("The total cost of the meal with discount is
$ "+ costFinal.toFixed(2) + ".n" +
"Do you want to place this order or cancel it");
}
// test the text input
functioncheckInitials()
{
nameCalc = isInitialsTextValid();
if (nameCalc == false)
{
}
else
{
}
}
// check the discount
function checkDiscount()
{
rateCalc = isDiscountValid();
if (rateCalc == false)
{
}
else

{
}
}
// check the recipt
if (recipt == false )
{
document.orderForm.Reset.click();
}
*******************Java Scripts File2*******************
// focus
onload = giveInitsFocus;
// submit
document.orderForm.submit.onclick = checkDiscount;
// side dish
document.orderForm.SideDish[0].onclick = handlefriesclick;
document.orderForm.SideDish[1].onclick = handlecakeclick;
document.orderForm.SideDish[2].onclick = handlecreamclick;
// main dish.
document.orderForm.mainDish[0].onclick = handlemainDishfchickenclick;
document.orderForm.mainDish[1].onclick = handlemainDishbchickenclick;
document.orderForm.mainDish[2].onclick = handlemainDishBurgerclick;

Web Scripting Project JavaScripts and HTML WebPage

More Related Content

What's hot

Viewers also liked

More from Sunny U Okoro

Recently uploaded

Web Scripting Project JavaScripts and HTML WebPage