Schopping Cart Invoice

This is a simple example showing how an invoice might be created for a shopping cart

HTML

<!-- Business Web Technologies ISYS3004
     School of Information Systems
     Curtin University
     
     Try this:
     1) change the cost of an item and re-run
     2) change the quantity of an item and re-run
     3) add an item to the shopping cart array and re-run
     4) discuss what would be involved in adding an interface
-->

<!-- Dynamically update the invoice DIV -->
<div id='invoice'> </div>

JavaScript

//Assume the shopping cart currently has three items
var shoppingCart = [
    {description: 'chair', cost:100.00,  quantity: 4},
    {description: 'table', cost:1500.00, quantity: 1},
    {description: 'lamp',  cost:50.00,   quantity: 1},
];

// Get the total cost of items in the shopping cart
function getTotal() {
   total = 0
   for (var i=0; i<shoppingCart.length ; i++) {
      total = total + shoppingCart[i].cost * shoppingCart[i].quantity
   }
   return total
}

// Display the invoice on the web page
function updateInvoice() {
   html = "<h2>Invoice</h2>"
   
   // Display each item in a row of a table
   html += "<table>"
   for (var item=0; item<shoppingCart.length ; item++) {
      html += '<tr>'
      html += '<td>' + shoppingCart[item].description          + '</td>'
      html += '<td>' + '$' + shoppingCart[item].cost           + '</td>'
      html += '<td>' + '(x' + shoppingCart[item].quantity+ ")" + '</td>'
      html += '</tr>'
   }
   html += "</table>"
   
   // Add the total cost at the end of the invoice
   html += "<p>Total spend is $" + getTotal() + "</p>"
   
   // Update the web page with the current invoice
   document.getElementById('invoice').innerHTML = html
}

updateInvoice()