Shopping Cart - DOM editing

This demo extends the shopping cart to include DOM editing.

by Michael Borck

HTML

<header>
    <h1>Shopping Cart</h1>
</header>
<div id="container"> 
    <sidebar id="store"></sidebar>
    <div id="shopping">
        <div id="customer">Customer Details</div>
        <div id="invoice">Products Purchased here</div>
    </div>
</div>
<footer>
    <p>Brought to you by Business Web Technologies</p>
</footer>

CSS

header, footer {
    height: 50px;
    width: 100%;
    background-color: darkblue;
    color: white;
    text-align: center;
    position: absolute;
}

/* Set size of headlines elements in header */
header h1,h2,h3,h4,h5,h6 {
    margin-top: 10px;
    font-size: 30px;
    padding: 0px;
}

footer {
    position: absolute;
    bottom: 0px;
}

#store {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 25%;
    height: 100%;
    background-color: steelblue;
    overflow: scroll;
}

#container {
    position: absolute;
    top: 50px;
    bottom: 50px;
    width: 100%;
    background-color: pink;
}

#shopping {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 75%;
    height: 100%;
    background-color: palegoldenrod;
    overflow: scroll;
}

#customer, #invoice {
    position: relative;
    background-color: white;
    width: 92%;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 5px;
    padding: 5px;
}

.product {
    position: relative;
    background-color: white;
    width: 100px;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    cursor: pointer;
    box-shadow: 5px 5px 3px black;
}

.product p {
    margin: 0;
}

.product img {
    width: 70%;
    height: auto;
}

.product:hover {
    background-color: slategray;
    color: white;
}

.divButton {
    background-color: lightgray;
    color: black;
    cursor: pointer;
    padding: 5px;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 50px;
    border: 2px solid;
    border-radius: 10px;
}

body {
    margin: 0;
    padding: 0;
    background-color: red;
}

JavaScript

// Constructor to create an instnace of a shopper object
function Shopper(givenName, familyName, email) {
    this.givenName = givenName;
    this.familyName = familyName;
    this.email = email;
    this.cart  = [ ];
    
    // Method to add items to the shopping cart
    this.addToCart = function (theItem) {
        this.cart.push(theItem);
    }
    
    // Method to reset the shoppting cart
    this.reset = function() {
        this.cart = [ ];
    }
    
    // Calculate the total cost of items in the shopping cart
    this.totalSpend = function () {
        var total = 0.00;
        for (var i=0 ; i< this.cart.length; i++) {
            total += this.cart[i].cost;
        }
        return (total);
    }
    
    // Return a string that identifies the shopper
    this.name = function () {
        var who = this.givenName + " " + this.familyName;
        return who;
    }
}

// Constructor to create an object containing an item for sale
function Item(description, cost, image) {
    this.description = description;
    this.cost = cost;
    this.image= image;
}

// An array of item objects available for puchase in the store
var imageDir = "http://www.bvonkonsky.com/images/bwt/";

var theStore = [
    {description: "chair", cost:100.0, image:"chair.jpg"},
    {description: "table", cost:1500.0, image:"table.jpg"},
    {description: "lamp",  cost:50.00, image:"lamp.jpg"},
];

/*
var theStore = [
    new Item ("Chair", 100.00,  "chair.jpg"),
    new Item ("Table", 1500.00, "table.jpg"),
    new Item ("Lamp", 50.00,    "lamp.jpg")
    ];
*/
// Get the store elemeent from the DOM
var storeElement = document.getElementById("store");

// Iterate through each item in the store, creating a tumbnail view for each
for (var i=0 ; i<theStore.length ; i++) {
    
     // Create a new div for the thumbnail for this item
    var divElement = document.createElement("div");

    // This div is of class product
    divElement.setAttribute("class", "product");
    
    //...