Cist1520: Chapter 2

Requirements
1. User Interface
1.1 Create a Web page that allows a user to enter a purchase price into a text box;
1.2 include a JavaScript function that calculates shipping and handling.
2. Processing
2.1 Add functionality to the script that adds a minimum shipping and handling fee of $1.50 for any purchase that is less than or equal to $25.00.
2.2 For orders over $25.00, add 10% to the total purchase price for shipping and handling, but do not include the $1.50 minimum shipping and handling fee.
2.3 The formula for calculating a percentage is price * percent / 100. EX: 10% of $50.00 purchase price = 50 * 10 / 100 = $5.00 .
3. Output/Format
3.1 After you determine the total cost of the order (purchase plus shipping and handling), display it in an alert dialog box.
3.2 Save the document as CalcShipping.html

+++++++++++++++++
Largest Islands
+++++++++++++++++

<!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" lang="en" xml:lang = "en" dir="ltr">
<head>
<title>Largest Islands</title>
</head>
<body>
<h1>Largest Islands</h1>
<script type="text/javascript">
/* <![CDATA[ */
var island1Name="Greenland";
var island2Name="New Guinea";
var island3Name="Borneo";
var island4Name="Madagascar";
var island5Name="Baffin";
var island1Size=2175600;
var island2Size=790000;
var island3Size=737000;
var island4Size=587000;
var island5Size=507000;
document.write("<p>The largest island in the world is " + island1Name + " with " + island1Size + " miles.</p>");
document.write("<p>The second largest island in the world is " + island2Name + " with " + island2Size + " miles.</p>");
document.write("<p>The third largest island in the world is " + island3Name + " with " + island3Size + " miles.</p>");
document.write("<p>The fourth largest island in the world is " + island4Name + " with " + island4Size + " miles.</p>");
document.write("<p>The fifth largest island in the world is " + island5Name + " with " + island5Size + " miles.</p>");
/* ]]> */
</script>
</body>
</html>

++++++++++++++++++++++++
Pine Knoll Productions
++++++++++++++++++++++++

<!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" lang="en" xml:lang = "en" dir="ltr">
<head>
	<style type="text/css">
		body {
			font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif 
			}
	</style>
	<title>Pine Knoll Productions</title>
</head>
<body>
<script type="text/javascript">
/* <![CDATA[ */
document.write("<p>Pine Knoll Productions presents </p>");
document.write("<h1>Pagliacci</h1>");
document.write("<p><strong>by Ruggero Leoncavallo</strong></p><hr />");
document.write("<p>The Pine Knoll Press calls the company\'s production ");
document.write("of Leoncavallo\'s <em>Pagliacci</em> a \"spectacular event\" ");
document.write("that will \"astound you\".");
/* ]]> */
</script>
</body>
</html>

++++++++++++++++++++++++
Convert to Celsius
++++++++++++++++++++++++

<!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" lang="en" xml:lang = "en" dir="ltr">
<head>
	<title>Convert to Celsius</title>
</head>
<body>
<script type="text/javascript">
/* <![CDATA[ */
var fTemp = 86;
var cTemp = (fTemp - 32) * (5 / 9);
document.write("<p>" + fTemp + " Fahrenheit is equal to " + cTemp + " degrees Celsius.</p>");
/* ]]> */
</script>
</body>
</html>

+++++++++++++++++++++++++++++++++
Shipping and Handling Calculator
+++++++++++++++++++++++++++++++++

<!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" lang="en" xml:lang = "en" dir="ltr">
<head>
	<title>Shipping and Handling Calculator</title>
	<script type="text/javascript">
/*![CDATA[ */
/* Requirements
1. User Interface
	1.1 Create a Web page that allows a user to enter a purchase price into a text box; 
	1.2 include a JavaScript function that calculates shipping and handling.
2. Processing
	2.1 Add functionality to the script that adds a minimum shipping and handling fee of $1.50 for any purchase that is less than or equal to $25.00.
	2.2 For orders over $25.00, add 10% to the total purchase price for shipping and handling, but do not include the $1.50 minimum shipping and handling fee.
	2.3 The formula for calculating a percentage is price * percent / 100. EX: 10% of $50.00 purchase price = 50 * 10 / 100 = $5.00 .
3. Output/Format
	3.1 After you determine the total cost of the order (purchase plus shipping and handling), display it in an alert dialog box.
	3.2 Save the document as CalcShipping.html
*/
function calShipping(){
	var price = parseFloat(document.forms.shippingForm.price.value);
	var total=0;
	if(price <= 25){
		total = price + 1.50;
	}
	else{
		total = price+(price* (10/100));
	}
	alert("Your total price is: $"+ total.toFixed(2));
}
/* ]] */
</script>
</head>
<body>
	<h2>Shipping and Handling Fee Calculator</h2>
	<form id="shippingForm" name="shippingForm" method="post" onsubmit="return calShipping();">
		<strong>Please enter the price:</strong>
		<input type="text" id="price" name="price"/>
		<input type="submit" id="submit" name="submit" value=" SUBMIT "/>
	</form>
</body>
</html>

+++++++++++++++
BMI Calculator
+++++++++++++++

<!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" lang="en" xml:lang = "en" dir="ltr">
<head>
<title>BMI Calculator</title>
<script type="text/javascript">
/*![CDATA[ */
function calcBmi() {
	var weight = parseInt(document.forms.bmi.weight.value);
	var height = parseInt(document.forms.bmi.height.value);
	var BMI = parseInt((weight * 703) / (height * height));
	document.forms.bmi.result.value = BMI;
	return false;
}
/* ]] */
</script>
</head>
<body>
<h2>BMI Calculator</h2>
<form id="bmi" type="button" id="post" value="calculate" />
Weight (LBS): <input type="text" id="weight"/>
Height (IN): <input type="text" id="height"/><br/><br/>
BMI Result: <input type="text" id="result" /><br/><br/>
<input type="submit" id="submit" name="submit" value=" Calculate BMI " onclick="return calcBmi();"/>
</form>
</body>
</html>

Comments are closed