"use strict";

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 10
   Case Problem 1

   Author: Minerva Igama
   Date:   Dec. 1 2018

   Filename: tc_cart.js

*/

// Variables
var orderTotal = 0; //var with 0 value
var cartHTML = "<table>";
cartHTML += "<tr><th>Item</th><th>Description</th><th>Price</th><th>Qty</th><th>Total</th></tr>"; //puts header to table

//For loop
for (var i = 0; i < item.length; i++) {// looping through loop for 0 till length
  cartHTML += "<tr>";
  cartHTML += "<td>" + "<img src='tc_" + item[i] + ".png' alt='" + item[i] + "'> </td>";
  cartHTML += "<td>" + itemDescription[i] + "</td>";
  cartHTML += "<td>$" + itemPrice[i] + "</td>";
  cartHTML += "<td>" + itemQty[i] + "</td>";

var itemCost = itemPrice[i] * itemQty[i]; //item cost for each item

cartHTML += "<td>$" + itemCost + "</td>";
cartHTML += "</tr>"

orderTotal += itemCost; //add to total
}

// For loop Completion
cartHTML += "<tr><td colspan='4'>Subtotal</td>";
cartHTML += "<td>$" + orderTotal + "</td></tr>";
cartHTML += "</table>"; //the order total

document.getElementById("cart").innerHTML = cartHTML; //place table in the HTML using the div id