JavaScript Examples: Georgetown Cleaning Services

	JavaScript Examples: Georgetown Cleaning Services
Introduction
In this exercise, we will create browser-based application that simulates a dry-cleaning store.

Practical Learning: Creating the Application
Start your text editor such as Notepad and type the following:
<html>
<head>

<script language="JavaScript">
function processShirts()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtShirtUnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtShirtQuantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtShirtSubTotal.value = subTotal.toFixed(2);
}

function processPants()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtPantsUnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtPantsQuantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtPantsSubTotal.value = subTotal.toFixed(2);
}

function processItem1()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem1UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem1Quantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtItem1SubTotal.value = subTotal.toFixed(2);
}

function processItem2()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem2UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem2Quantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtItem2SubTotal.value = subTotal.toFixed(2);
}

function processItem3()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem3UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem3Quantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtItem3SubTotal.value = subTotal.toFixed(2);
}

function processItem4()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem4UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem4Quantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtItem4SubTotal.value = subTotal.toFixed(2);
}

function calculateTaxAmount(price, tax)
{
    var amount = price * tax / 100;
    return amount;
}

function processOrder()
{
    var shirtsTotal, pantsTotal, item1Total,
        item2Total, item3Total, item4Total;

    var shirtsTotal = 
	parseFloat(document.frmCleaningOrder.txtShirtSubTotal.value);
    var pantsTotal  = 
	parseFloat(document.frmCleaningOrder.txtPantsSubTotal.value);
    var item1Total  = 
	parseFloat(document.frmCleaningOrder.txtItem1SubTotal.value);
    var item2Total  = 
	parseFloat(document.frmCleaningOrder.txtItem2SubTotal.value);
    var item3Total  = 
	parseFloat(document.frmCleaningOrder.txtItem3SubTotal.value);
    var item4Total  = 
	parseFloat(document.frmCleaningOrder.txtItem4SubTotal.value);

    var cleaningTotal = shirtsTotal + pantsTotal + item1Total +
			item2Total + item3Total + item4Total;
    var taxRate = parseFloat(document.frmCleaningOrder.txtTaxRate.value);
    var taxAmount = calculateTaxAmount(cleaningTotal, taxRate);
    var orderTotal = cleaningTotal + taxAmount;

    document.frmCleaningOrder.txtCleaningTotal.value = cleaningTotal.toFixed(2);
    document.frmCleaningOrder.txtTaxAmount.value = taxAmount.toFixed(2);
    document.frmCleaningOrder.txtOrderTotal.value = orderTotal.toFixed(2);
}

</script>
<title>Geogetown Cleaning Services - Cleaning Order</title>
</head>

<body>
<h1>Georgetown Cleaning Services</h1>
<form name="frmCleaningOrder">
  <table border="0" width="540">
    <tr>
      <td width="446" colspan="4">
        <h3>Order Identification</h3>
      </td>
    </tr>
    <tr>
      <td width="106">Customer Name:</td>
      <td width="150"><input type="text" name="txtCustomerName" size="20"></td>
      <td width="108">Customer Phone:</td>
      <td width="150"><input type="text" name="txtCustomerPhone" size="20"></td>
    </tr>
    <tr>
      <td width="106">Date Left:</td>
      <td width="150"><input type="text" name="txtDateLeft" size="20"></td>
      <td width="108">Time Left:</td>
      <td width="150"><input type="text" name="txtTimeLeft" size="20"></td>
    </tr>
    <tr>
      <td width="106">Date Expected:</td>
      <td width="150"><input type="text" name="txtDateExpected" size="20"></td>
      <td width="108">Time Expected:</td>
      <td width="150"><input type="text" name="txtTimeExpected" size="20"></td>
    </tr>
  </table>
  <hr>
  <table border="0" width="596">
    <tr>
      <td width="381">
        <table border="0" width="381">
          <tr>
            <td width="128"><b>Item Type</b></td>
            <td width="71"><b>Unit Price</b></td>
            <td width="38"><b>Qty</b></td>
            <td width="46"></td>
            <td width="66"><b>Sub-Total</b></td>
          </tr>
          <tr>
            <td width="128">Shirts</td>
            <td width="71">
		<input type="text" 
			name="txtShirtUnitPrice" size="7" value="0.95"></td>
            <td width="38">
		<input type="text" 
			name="txtShirtQuantity" size="4" value="0"></td>
            <td width="46"><input type="button" value="Calc" name="btnShirts"
		onClick="processShirts()"></td>
            <td width="66">
		<input type="text" 
		name="txtShirtSubTotal" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="128">Pants</td>
            <td width="71">
		<input type="text" 
			name="txtPantsUnitPrice" size="7" value="2.75"></td>
            <td width="38">
		<input type="text" 
			name="txtPantsQuantity" size="4" value="0"></td>
            <td width="46"><input type="button" value="Calc" name="btnPants"
		onClick="processPants()"></td>
            <td width="66">
		<input type="text" 
			name="txtPantsSubTotal" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="128"><select size="1" name="cboItem1">
                <option selected>None</option>
                <option>Women Suit</option>
                <option>Dress</option>
                <option>Regular Skirt</option>
                <option>Skirt With Hook</option>
                <option>Men's Suit 2Pc</option>
                <option>Men's Suit 3Pc</option>
                <option>Sweaters</option>
                <option>Silk Shirt</option>
                <option>Tie</option>
                <option>Coat</option>
                <option>Jacket</option>
                <option>Swede</option>
              </select></td>
            <td width="71">
		<input type="text" 
			name="txtItem1UnitPrice" size="7" value="0.00"></td>
            <td width="38">
		<input type="text" 
			name="txtItem1Quantity" size="4" value="0"></td>
            <td width="46">
		<input type="button" value="Calc" name="btnItem1"
		onClick="processItem1()"></td>
            <td width="66">
		<input type="text" 
			name="txtItem1SubTotal" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="128"><select size="1" name="cboItem2">
                <option selected>None</option>
                <option>Women Suit</option>
                <option>Dress</option>
                <option>Regular Skirt</option>
                <option>Skirt With Hook</option>
                <option>Men's Suit 2Pc</option>
                <option>Men's Suit 3Pc</option>
                <option>Sweaters</option>
                <option>Silk Shirt</option>
                <option>Tie</option>
                <option>Coat</option>
                <option>Jacket</option>
                <option>Swede</option>
              </select></td>
            <td width="71">
		<input type="text" 
			name="txtItem2UnitPrice" 
			size="7" value="0.00"></td>
            <td width="38">
		<input type="text" 
			name="txtItem2Quantity" size="4" value="0"></td>
            <td width="46">
		<input type="button" value="Calc" name="btnItem2"
			onClick="processItem2()"></td>
            <td width="66">
		<input type="text" 
			name="txtItem2SubTotal" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="128"><select size="1" name="cboItem3">
                <option selected>None</option>
                <option>Women Suit</option>
                <option>Dress</option>
                <option>Regular Skirt</option>
                <option>Skirt With Hook</option>
                <option>Men's Suit 2Pc</option>
                <option>Men's Suit 3Pc</option>
                <option>Sweaters</option>
                <option>Silk Shirt</option>
                <option>Tie</option>
                <option>Coat</option>
                <option>Jacket</option>
                <option>Swede</option>
              </select></td>
            <td width="71">
		<input type="text" 
			name="txtItem3UnitPrice" 
			size="7" value="0.00"></td>
            <td width="38">
		<input type="text" 
			name="txtItem3Quantity" 
			size="4" value="0"></td>
            <td width="46"><input type="button" value="Calc" name="btnItem3"
		onClick="processItem3()"></td>
            <td width="66">
		<input type="text" 
			name="txtItem3SubTotal" 
			size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="128"><select size="1" name="cboItem4">
                <option selected>None</option>
                <option>Women Suit</option>
                <option>Dress</option>
                <option>Regular Skirt</option>
                <option>Skirt With Hook</option>
                <option>Men's Suit 2Pc</option>
                <option>Men's Suit 3Pc</option>
                <option>Sweaters</option>
                <option>Silk Shirt</option>
                <option>Tie</option>
                <option>Coat</option>
                <option>Jacket</option>
                <option>Swede</option>
              </select></td>
            <td width="71">
		<input type="text" 
			name="txtItem4UnitPrice" 
			size="7" value="0.00"></td>
            <td width="38">
		<input type="text" 
			name="txtItem4Quantity" size="4" value="0"></td>
            <td width="46"><input type="button" value="Calc" name="btnItem4"
		onClick="processItem4()"></td>
            <td width="66"><input type="text" 
				  name="txtItem4SubTotal"
				  size="8" value="0.00"></td>
          </tr>
        </table>
      </td>
      <td width="201">
        <table border="0" width="100%">
          <tr>
            <td width="100%" align="center" colspan="2">
		<input type="button" value="Calculate Order"
		 name="btnCalculate" onClick="processOrder()"></td>
          </tr>
          <tr>
            <td width="50%">Cleaning Total:</td>
            <td width="50%">
		<input type="text" 
			name="txtCleaningTotal" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="50%">Tax Rate</td>
            <td width="50%">
		<input type="text" name="txtTaxRate" size="6" value="5.75">%</td>
          </tr>
          <tr>
            <td width="50%">Tax Amount:</td>
            <td width="50%">
		<input type="text" name="txtTaxAmount" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="50%">Order Total:</td>
            <td width="50%">
		<input type="text" 
			name="txtOrderTotal" size="8" value="0.00"></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <hr>
  <p><input type="reset" value="Start New Cleaning Order" name="btnNewOrder"></p>  
</form>

</body>
</html>
Save it as cleaningorder.htm
Preview it in your browser and process an order
Return to your text editor

Home	Copyright © 2002-2008 FunctionX, Inc.