Home

JavaScript Examples:
Georgetown Cleaning Services

 

Introduction

In this exercise, we will create browser-based application that simulates a dry-cleaning store.

Practical Learning Practical Learning: Creating the Application

  1. 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>
  2. Save it as cleaningorder.htm
  3. Preview it in your browser and process an order
  4. Return to your text editor
 

Home Copyright © 2002-2008 FunctionX, Inc.