I cannot add items to my shopping cart when I click on add. I think that I might have done something wrong while trying to work on the Add button, either the .on() event method (I pushed the selected car index into the cart array, then function addQty and updateShoppingCart) or when I was trying to remove the hide class. Or did I do something else wrong?
//step-1: add jQuery ready method to hold entire js code in this script
$(document).ready(function(){
// Define a car object using a constructor function
function Car(id, car_make, car_model, car_year, car_type, car_color, car_price, car_mileage) {
this.stockid = id;
this.make = car_make;
this.model = car_model;
this.year = car_year;
this.type = car_type;
this.color = car_color;
this.price = car_price;
this.mileage = car_mileage;
this.qty = 0;
this.display = function(){
var this_str = "<td>" + this.stockid + "</td><td>" + this.make + "</td>";
this_str += "<td>" + this.model + "</td><td>" + this.year + "</td><td>" + this.type + "</td>";
this_str += "<td>" + this.color + "</td><td>$" + this.price + "</td>";
this_str += "<td>" + this.mileage + "</td>";
return this_str;
}
}
// Declare an array of objects
var car_list = []; // var car_list = new Array();
// Create an instance of the Car object and add it to the car_list array
car_list.push(new Car(1001, "Toyota", "Camry", 2011, "Sedan", "Gray", 17555, 55060));
car_list.push(new Car(1002, "Volvo", "s40", 2013, "Sedan", "Black", 15575, 20350));
car_list.push(new Car(1251, "Toyota", "Sienna", 2008, "Minivan", "Gray", 15775, 70000));
car_list.push(new Car(1321, "Porsche", "Panamera", 2012, "SUV", "Red", 104250, 10567));
car_list.push(new Car(1904, "Honda", "Accord", 2009, "Sedan", "White", 13370, 35000));
car_list.push(new Car(1855, "Toyota", "Highlander", 2008, "SUV", "Silver", 18555, 55060));
car_list.push(new Car(1543, "Ford", "Fusion", 2011, "Sedan", "Black", 13575, 90350));
car_list.push(new Car(1345, "Toyota", "Sienna", 2011, "Minivan", "Gray", 25775, 70000));
car_list.push(new Car(2133, "Dodge", "Caravan", 2012, "Minivan", "Red", 30250, 17567));
car_list.push(new Car(2999, "Lexus", "LFA", 2012, "coupe", "Red", 381370, 3500));
car_list.push(new Car(3001, "Ferrari", "Rubino", 2012, "coupe", "Red", 354370, 5500));
car_list.push(new Car(4002, "Audi", "R8", 2012, "SUV", "Black", 181370, 4500));
//Step-2 (a): call displayDropdown() function to set up the drop down selection list
displayDropdown();
//Step-2 (d): use jQuery event method .on() to add an event handler to the drop down list
//so that when users change selection option based on car type,
//then only that type of cars will be displayed in the car list table in the web page.
$('#car-category').on('change', function(){
var cat = $(this).val();
console.log(cat);
displayListing(cat);
} );
/*****************************/
/* displayDropdown() */
/*****************************/
function displayDropdown(){
var currentCat = 'select';
var output = "<option value=\'"+ currentCat + "\'>Select a category to display</option>";
var addedCats = [];
//Step-3 (a): add script code here to add options to the drop down list
for(var i = 0; i < car_list.length; i++) {
currentCat = car_list[i].type;
//check whether the car's type has been included in the drop down list, if not, then add that category to the list
//Array.indexOf(currentItem) is used to check whether currentItem is in the array, if not, then -1 will be returned.
if (addedCats.indexOf(currentCat)==-1) { //did not find currentCat in addedCats array
addedCats.push(currentCat); //add currentCat to addedCats array, and then create
//an <option> element for that category
output += "<option value='" + currentCat + "' class='cat-select'>" + currentCat + "</option>";
//console.log("added " + currentCat);
}
//console.log(addedCats);
} // end for loop
//add one more category as an <option> element which is used to display all products
currentCat = "All";
output += "<option value='" + currentCat + "' class='cat-select'>" + currentCat + "</option>";
// output is a string used to hold all new <option> elements
$('#car-category').html(output);
}
/*****************************/
/* displayListing() */
/*****************************/
function displayListing(cat){
//Step-2 (b): Add jQuery code in this function to remove class "hide" from car list table.
$('#car-list').removeClass('hide');
var displayAll = false;
if (cat == "All") {
displayAll = true;
}
if (cat == "select") {
$('#car-list tbody').html("");
}
var body="";
//add table body
//step-2 (c):add js code to complete the for loop and if statement to display car list in the web page according to
//users’ selection on car type
for(var i = 0; i < car_list.length; i++) {
if(car_list[i].type == cat || displayAll == true) {
console.log("add table list: " + cat);
body += "<tr class='car-item' id='l-"+ i + "'>";
body += car_list[i].display();
body += "<td><button type='button' value='" +
i + "' class='btn btn-primary add-item'>Add</button></td>";
body += "</tr>";
}
}
$('#car-list tbody').html(body);
}
//define an array (global variable) to store indices of the items added to the shopping cart*/
var cart = [];
//Step-3 (a): Apply jQuery event delegation technique to add event handler so that when users click Add buttons,
//the selected cars will be added to the shopping cart without any duplication,
//the selected cars’ information including stockid, make, model, price, quantity and type will be displayed
//in the shopping cart list on the web page, the number of items in the shopping cart as well as the Checkout
//invoice information including subtotal, tax, registration fee, and total amount will be updated.
$('#car_list').on('click', '.add-item', function(){
var index = $(this).val();
if (cart.indexOf(index)== -1)
{ cart.push(index);
//console.log("Cart array is currently: " + cart);
}
addQty(index);
updateShoppingCart();} );
/****************/
/* addQty() */
/****************/
function addQty(index) {
car_list[index].qty++;
}
/*****************************/
/* updateShoppingCart() */
/*****************************/
function updateShoppingCart(){
//step 3(b): Add jQuery code in this function to remove class "hide" from shopping cart table,
//and also from check out table.
console.log("Cart array is currently: " + cart);
$('#cart table').removeClass('hide');
$('#checkout table').removeClass('hide');
//console.log("Cart array is currently: " + cart);
//display shopping cart
displayCartItems();
// update total items
updateItemTotal();
//Update final checkout data
calculateCheckoutCost();
}
/**************************/
/* displayCartItems() */
/**************************/
function displayCartItems(){
/* use this method to display items in the shopping cart.
This method should redisplay the 'shopping cart'
table when we add or delete items.*/
// add each product to shopping cart
var runError = true;
var elm='';
for (var i=0; i<cart.length; i++){
//create a table row and add stockId, make, cost, quantity, and type info of the selected cars to the cart table
elm += "<tr><td class=\'col-xs-1\'>"+ car_list[cart[i]].stockid + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].make + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].model + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].price + "</td>";
elm += "<td class=\'col-xs-1\'><input type=\'text\' id=\'" + cart[i] + "\' name=\'qty-" + i +
"\' size=\'1\' value=\'"+ car_list[cart[i]].qty + "\'></td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].type + "</td>";
elm += "<td class=\'col-xs-1\'><button type=\'button\' value=\'" + i + "\' class=\'delete-item\'>Delete</button></td></tr>";
runError = false; // = cart is not empty
}
if (runError) { //if cart is empty
elm += "Your cart is empty.";
}
//step 3(d): add a jQuery selector
//console.log(elm);
$('#mycart tbody').html(elm); // modify the table
}
/*****************************/
/* updateItemTotal() */
/*****************************/
function updateItemTotal(){
// update the total items
var total = cart.length;
$('#items').text(total);
}
/*******************************/
/* calculateCheckoutCost() */
/*******************************/
function calculateCheckoutCost(){
//Display total number of cars in the cart
var taxRate = 0.06;
var feeRate = 0.05;
var subtotal = 0;
var tax = 0;
var fee = 0;
var total = 0;
//Calculate subtotal
var subtotal = 0;
//step 6: add js code here to calculat subtotal, tax, fee, and total amount
//display those information to web page by using jQuery selector, jQuery .text() method.
for (var i=0; i<cart.length; i++){
subtotal += parseFloat(car_list[cart[i]].car_price * car_list[cart[i]].qty);
}
tax = subtotal * taxRate;
fee = subtotal * feeRate;
fee = subtotal + tax + fee;
}
//Step-4: Apply jQuery event delegation technique to add event handler so that when users click Delete buttons
//the selected cars will be removed from the shopping cart and removed from the shopping cart list in the web page as well.
//Meanwhile, the number of items in the shopping cart as well as the Checkout invoice information including subtotal, tax,
//registration fee, and total amount will be updated.
$('#item-list').on('click', '.delete-item', function(){
var index = $(this).val();
//console.log("Delete Item: " + index);
deleteItemFromCart(index);
updateShoppingCart();
});
/*****************************/
/* deleteItemFromCart() */
/*****************************/
function deleteItemFromCart(index){
/* remove the element with a given index from the cart array and update shopping cart
use splice() method, Syntax: array_name.splice(start, how many elements)
The splice() method removes elements starting from 'start' positions. The second arguments defines the number of elements to be removed.
*/
//step 3(f): add script to update the ordering quantity of selected car and use splice method to
//remove that selected car from the shopping cart.
car_list[cart[index]].qty = 0;
cart.splice(index, 1);
}
//Step-5: Apply jQuery event delegation technique to add event handler so that when users change the ordering
//quantities of selected cars in the shopping list in the web page,
//the ordering quantities of selected cars the Checkout invoice information including subtotal, tax, registration fee,
// and total amount will be updated.
$('#item-list').on('change', 'input', function (){
updateCartItemQty(this);
updateShoppingCart();
});
/*****************************/
/* updateCartItemQty() */
/*****************************/
function updateCartItemQty(input) {
var value = 0;
value = parseInt($("#" + input.id).val());
var index = parseInt(input.id);
car_list[index].qty = value;
}
});<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auto Shop - Used Cars</title>
<!--Include bootstrap CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Include JQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include external js file (JQuery_auto_shop.js) here -->
<script src="JQuery_auto_shop.js"></script>
<style>
td{ padding: 5px; margin: 5px;}
.addme { height: 28px; width: 80px; padding: 0; }
.clm-label { background: #333; color: #fff;}
.hide {display: none}
</style>
</head>
<body class='container'>
<div class='col-md-9' >
<h2>Choose a car type </h2> <!--drop down list -->
<select id="car-category" name="car-category">
<option value='null'>Loading....</option>
</select>
</div>
<div class='col-md-9'>
<h2>Car List</h2> <!-- car list -->
<table class='table hide' id='car-list'>
<thead><!--car list table header -->
<tr class='clm-label'>
<th class='clm-label'>Stock ID</th>
<th class='clm-label'>Make</th>
<th class='clm-label'>Model</th>
<th class='clm-label'>Year</th>
<th class='clm-label'>Type</th>
<th class='clm-label'>Color</th>
<th class='clm-label'>Price</th>
<th class='clm-label'>Mileage</th>
<th class='clm-label'>Select</th>
</tr>
</thead>
<tbody id='car-list'><!--car list table body -->
</tbody>
</table>
</div>
<div class='col-md-3' id="cart">
<h2>Shopping Cart</h2>
<div>You have <span id="items">0</span> items in your Shopping Cart</div>
<table class='table hide' id='mycart'><!--Shopping Cart list table -->
<thead><!--table header -->
<tr>
<th class='clm-label'>Stock Id</th>
<th class='clm-label'>Make</th>
<th class='clm-label'>Model</th>
<th class='clm-label'>Price</th>
<th class='clm-label'>Quantity</th>
<th class='clm-label'>Type</th>
<th class='clm-label'></th>
</tr>
</thead>
<tbody><!--table body -->
</tbody id='item-list'>
</table>
</div>
</div>
<div class='col-md-9' id="checkout">
<h2>Check Out</h2>
<table class='table hide' ><!--Check Out table -->
<tr><th class='col-xs-4'>Subtotal: </th><td class='col-xs-2' id='sub-total'>0</td></tr>
<tr><th class='col-xs-4'>Taxes (6%): </th><td class='col-xs-2' id='taxes'>0</td></tr>
<tr><th class='col-xs-4'>Registration fee (5%): </th><td class='col-xs-2' id='registration'>0</td></tr>
<tr><th class='col-xs-4'>Total due: </th><td class='col-xs-2' id='total'>0</td></tr>
</table>
</div>
</body>
</html>I think there might be a mistypo, try replacing $('#car_list').on('click', '.add-item', with $('#car-list').on('click', '.add-item', and you should be able to add items to the cart.
But after adding to the cart, you'll then not be able to remove it from the cart as clicking on Delete button btw. Again, replace $('#item-list').on('click', '.delete-item', with $('#mycart').on('click', '.delete-item',
//step-1: add jQuery ready method to hold entire js code in this script
$(document).ready(function(){
// Define a car object using a constructor function
function Car(id, car_make, car_model, car_year, car_type, car_color, car_price, car_mileage) {
this.stockid = id;
this.make = car_make;
this.model = car_model;
this.year = car_year;
this.type = car_type;
this.color = car_color;
this.price = car_price;
this.mileage = car_mileage;
this.qty = 0;
this.display = function(){
var this_str = "<td>" + this.stockid + "</td><td>" + this.make + "</td>";
this_str += "<td>" + this.model + "</td><td>" + this.year + "</td><td>" + this.type + "</td>";
this_str += "<td>" + this.color + "</td><td>$" + this.price + "</td>";
this_str += "<td>" + this.mileage + "</td>";
return this_str;
}
}
// Declare an array of objects
var car_list = []; // var car_list = new Array();
// Create an instance of the Car object and add it to the car_list array
car_list.push(new Car(1001, "Toyota", "Camry", 2011, "Sedan", "Gray", 17555, 55060));
car_list.push(new Car(1002, "Volvo", "s40", 2013, "Sedan", "Black", 15575, 20350));
car_list.push(new Car(1251, "Toyota", "Sienna", 2008, "Minivan", "Gray", 15775, 70000));
car_list.push(new Car(1321, "Porsche", "Panamera", 2012, "SUV", "Red", 104250, 10567));
car_list.push(new Car(1904, "Honda", "Accord", 2009, "Sedan", "White", 13370, 35000));
car_list.push(new Car(1855, "Toyota", "Highlander", 2008, "SUV", "Silver", 18555, 55060));
car_list.push(new Car(1543, "Ford", "Fusion", 2011, "Sedan", "Black", 13575, 90350));
car_list.push(new Car(1345, "Toyota", "Sienna", 2011, "Minivan", "Gray", 25775, 70000));
car_list.push(new Car(2133, "Dodge", "Caravan", 2012, "Minivan", "Red", 30250, 17567));
car_list.push(new Car(2999, "Lexus", "LFA", 2012, "coupe", "Red", 381370, 3500));
car_list.push(new Car(3001, "Ferrari", "Rubino", 2012, "coupe", "Red", 354370, 5500));
car_list.push(new Car(4002, "Audi", "R8", 2012, "SUV", "Black", 181370, 4500));
//Step-2 (a): call displayDropdown() function to set up the drop down selection list
displayDropdown();
//Step-2 (d): use jQuery event method .on() to add an event handler to the drop down list
//so that when users change selection option based on car type,
//then only that type of cars will be displayed in the car list table in the web page.
$('#car-category').on('change', function(){
var cat = $(this).val();
console.log(cat);
displayListing(cat);
} );
/*****************************/
/* displayDropdown() */
/*****************************/
function displayDropdown(){
var currentCat = 'select';
var output = "<option value=\'"+ currentCat + "\'>Select a category to display</option>";
var addedCats = [];
//Step-3 (a): add script code here to add options to the drop down list
for(var i = 0; i < car_list.length; i++) {
currentCat = car_list[i].type;
//check whether the car's type has been included in the drop down list, if not, then add that category to the list
//Array.indexOf(currentItem) is used to check whether currentItem is in the array, if not, then -1 will be returned.
if (addedCats.indexOf(currentCat)==-1) { //did not find currentCat in addedCats array
addedCats.push(currentCat); //add currentCat to addedCats array, and then create
//an <option> element for that category
output += "<option value='" + currentCat + "' class='cat-select'>" + currentCat + "</option>";
//console.log("added " + currentCat);
}
//console.log(addedCats);
} // end for loop
//add one more category as an <option> element which is used to display all products
currentCat = "All";
output += "<option value='" + currentCat + "' class='cat-select'>" + currentCat + "</option>";
// output is a string used to hold all new <option> elements
$('#car-category').html(output);
}
/*****************************/
/* displayListing() */
/*****************************/
function displayListing(cat){
//Step-2 (b): Add jQuery code in this function to remove class "hide" from car list table.
$('#car-list').removeClass('hide');
var displayAll = false;
if (cat == "All") {
displayAll = true;
}
if (cat == "select") {
$('#car-list tbody').html("");
}
var body="";
//add table body
//step-2 (c):add js code to complete the for loop and if statement to display car list in the web page according to
//users’ selection on car type
for(var i = 0; i < car_list.length; i++) {
if(car_list[i].type == cat || displayAll == true) {
console.log("add table list: " + cat);
body += "<tr class='car-item' id='l-"+ i + "'>";
body += car_list[i].display();
body += "<td><button type='button' value='" +
i + "' class='btn btn-primary add-item'>Add</button></td>";
body += "</tr>";
}
}
$('#car-list tbody').html(body);
}
//define an array (global variable) to store indices of the items added to the shopping cart*/
var cart = [];
//Step-3 (a): Apply jQuery event delegation technique to add event handler so that when users click Add buttons,
//the selected cars will be added to the shopping cart without any duplication,
//the selected cars’ information including stockid, make, model, price, quantity and type will be displayed
//in the shopping cart list on the web page, the number of items in the shopping cart as well as the Checkout
//invoice information including subtotal, tax, registration fee, and total amount will be updated.
$('#car-list').on('click', '.add-item', function(){
var index = $(this).val();
if (cart.indexOf(index)== -1)
{ cart.push(index);
//console.log("Cart array is currently: " + cart);
}
addQty(index);
updateShoppingCart();} );
/****************/
/* addQty() */
/****************/
function addQty(index) {
car_list[index].qty++;
}
/*****************************/
/* updateShoppingCart() */
/*****************************/
function updateShoppingCart(){
//step 3(b): Add jQuery code in this function to remove class "hide" from shopping cart table,
//and also from check out table.
console.log("Cart array is currently: " + cart);
$('#cart table').removeClass('hide');
$('#checkout table').removeClass('hide');
//console.log("Cart array is currently: " + cart);
//display shopping cart
displayCartItems();
// update total items
updateItemTotal();
//Update final checkout data
calculateCheckoutCost();
}
/**************************/
/* displayCartItems() */
/**************************/
function displayCartItems(){
/* use this method to display items in the shopping cart.
This method should redisplay the 'shopping cart'
table when we add or delete items.*/
// add each product to shopping cart
var runError = true;
var elm='';
for (var i=0; i<cart.length; i++){
//create a table row and add stockId, make, cost, quantity, and type info of the selected cars to the cart table
elm += "<tr><td class=\'col-xs-1\'>"+ car_list[cart[i]].stockid + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].make + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].model + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].price + "</td>";
elm += "<td class=\'col-xs-1\'><input type=\'text\' id=\'" + cart[i] + "\' name=\'qty-" + i +
"\' size=\'1\' value=\'"+ car_list[cart[i]].qty + "\'></td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].type + "</td>";
elm += "<td class=\'col-xs-1\'><button type=\'button\' value=\'" + i + "\' class=\'delete-item\'>Delete</button></td></tr>";
runError = false; // = cart is not empty
}
if (runError) { //if cart is empty
elm += "Your cart is empty.";
}
//step 3(d): add a jQuery selector
//console.log(elm);
$('#mycart tbody').html(elm); // modify the table
}
/*****************************/
/* updateItemTotal() */
/*****************************/
function updateItemTotal(){
// update the total items
var total = cart.length;
$('#items').text(total);
}
/*******************************/
/* calculateCheckoutCost() */
/*******************************/
function calculateCheckoutCost(){
//Display total number of cars in the cart
var taxRate = 0.06;
var feeRate = 0.05;
var subtotal = 0;
var tax = 0;
var fee = 0;
var total = 0;
//Calculate subtotal
var subtotal = 0;
//step 6: add js code here to calculat subtotal, tax, fee, and total amount
//display those information to web page by using jQuery selector, jQuery .text() method.
for (var i=0; i<cart.length; i++){
subtotal += parseFloat(car_list[cart[i]].car_price * car_list[cart[i]].qty);
}
tax = subtotal * taxRate;
fee = subtotal * feeRate;
fee = subtotal + tax + fee;
}
//Step-4: Apply jQuery event delegation technique to add event handler so that when users click Delete buttons
//the selected cars will be removed from the shopping cart and removed from the shopping cart list in the web page as well.
//Meanwhile, the number of items in the shopping cart as well as the Checkout invoice information including subtotal, tax,
//registration fee, and total amount will be updated.
$('#mycart').on('click', '.delete-item', function(){
var index = $(this).val();
//console.log("Delete Item: " + index);
deleteItemFromCart(index);
updateShoppingCart();
});
/*****************************/
/* deleteItemFromCart() */
/*****************************/
function deleteItemFromCart(index){
/* remove the element with a given index from the cart array and update shopping cart
use splice() method, Syntax: array_name.splice(start, how many elements)
The splice() method removes elements starting from 'start' positions. The second arguments defines the number of elements to be removed.
*/
//step 3(f): add script to update the ordering quantity of selected car and use splice method to
//remove that selected car from the shopping cart.
car_list[cart[index]].qty = 0;
cart.splice(index, 1);
}
//Step-5: Apply jQuery event delegation technique to add event handler so that when users change the ordering
//quantities of selected cars in the shopping list in the web page,
//the ordering quantities of selected cars the Checkout invoice information including subtotal, tax, registration fee,
// and total amount will be updated.
$('#item-list').on('change', 'input', function (){
updateCartItemQty(this);
updateShoppingCart();
});
/*****************************/
/* updateCartItemQty() */
/*****************************/
function updateCartItemQty(input) {
var value = 0;
value = parseInt($("#" + input.id).val());
var index = parseInt(input.id);
car_list[index].qty = value;
}
});<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auto Shop - Used Cars</title>
<!--Include bootstrap CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Include JQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include external js file (JQuery_auto_shop.js) here -->
<script src="JQuery_auto_shop.js"></script>
<style>
td{ padding: 5px; margin: 5px;}
.addme { height: 28px; width: 80px; padding: 0; }
.clm-label { background: #333; color: #fff;}
.hide {display: none}
</style>
</head>
<body class='container'>
<div class='col-md-9' >
<h2>Choose a car type </h2> <!--drop down list -->
<select id="car-category" name="car-category">
<option value='null'>Loading....</option>
</select>
</div>
<div class='col-md-9'>
<h2>Car List</h2> <!-- car list -->
<table class='table hide' id='car-list'>
<thead><!--car list table header -->
<tr class='clm-label'>
<th class='clm-label'>Stock ID</th>
<th class='clm-label'>Make</th>
<th class='clm-label'>Model</th>
<th class='clm-label'>Year</th>
<th class='clm-label'>Type</th>
<th class='clm-label'>Color</th>
<th class='clm-label'>Price</th>
<th class='clm-label'>Mileage</th>
<th class='clm-label'>Select</th>
</tr>
</thead>
<tbody id='car-list'><!--car list table body -->
</tbody>
</table>
</div>
<div class='col-md-3' id="cart">
<h2>Shopping Cart</h2>
<div>You have <span id="items">0</span> items in your Shopping Cart</div>
<table class='table hide' id='mycart'><!--Shopping Cart list table -->
<thead><!--table header -->
<tr>
<th class='clm-label'>Stock Id</th>
<th class='clm-label'>Make</th>
<th class='clm-label'>Model</th>
<th class='clm-label'>Price</th>
<th class='clm-label'>Quantity</th>
<th class='clm-label'>Type</th>
<th class='clm-label'></th>
</tr>
</thead>
<tbody><!--table body -->
</tbody id='item-list'>
</table>
</div>
</div>
<div class='col-md-9' id="checkout">
<h2>Check Out</h2>
<table class='table hide' ><!--Check Out table -->
<tr><th class='col-xs-4'>Subtotal: </th><td class='col-xs-2' id='sub-total'>0</td></tr>
<tr><th class='col-xs-4'>Taxes (6%): </th><td class='col-xs-2' id='taxes'>0</td></tr>
<tr><th class='col-xs-4'>Registration fee (5%): </th><td class='col-xs-2' id='registration'>0</td></tr>
<tr><th class='col-xs-4'>Total due: </th><td class='col-xs-2' id='total'>0</td></tr>
</table>
</div>
</body>
</html>