JavaScript Web Scripts Project Demo

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;

JavaScript Web Scripts Project Demo

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie JavaScript Web Scripts Project Demo

Ähnlich wie JavaScript Web Scripts Project Demo (20)

Mehr von Sunny U Okoro

Mehr von Sunny U Okoro (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

JavaScript Web Scripts Project Demo