application.js

/*
 * What are the objects in this exercise?
 * What are their properties and methods?
 * How do your objects interact with their respective DOM elements?
 */
var GroceryList = function () {
    this.items = [];
    this.totalPrice = 0;
};
GroceryList.prototype.addItem = function (item) {
    this.items.push(item);
    this.updatePrice(item.price);
    console.log(item.price);
};

GroceryList.prototype.updatePrice = function (price) {
    this.totalPrice += price;
    console.log(this.totalPrice);
    $('#total_cost').text(Number(this.totalPrice).toFixed(2));
};

function GroceryItem(name, price) {
    this.name = name,
    this.price = parseFloat(price);
}


$(document).ready(function () {

    list = new GroceryList();
    $('.item').draggable({
        helper: 'clone'
    });
    $('#grocery_list').droppable({
        accept: ".item",
        drop: function (event, ui) {
            var grocery = new GroceryItem(ui.draggable.children('.item_name').text(), ui.draggable.children('.item_price').text());
            $("#grocery_list").append(ui.draggable.clone());
            list.addItem(grocery);
        }
    });
});

page.html

<div class="row">
    <div class="span6">
         <h2>Store List</h2>

        <table id="store_list">
            <thead>
                <tr>
                    <th>Item Name</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr class="item">
                    <td class="item_name">Apple</td>
                    <td class="item_price">0.69</td>
                </tr>
                <tr class="item">
                    <td class="item_name">Tofu</td>
                    <td class="item_price">3.49</td>
                </tr>
                <tr class="item">
                    <td class="item_name">Granola</td>
                    <td class="item_price">4.55</td>
                </tr>
                <tr class="item">
                    <td class="item_name">Flatbread</td>
                    <td class="item_price">6.21</td>
                    </td>
                    <tr class="item">
                        <td class="item_name">Zucchini</td>
                        <td class="item_price">1.22</td>
                        </td>
                        <tr class="item">
                            <td class="item_name">Organic beef</td>
                            <td class="item_price">12.99</td>
                        </tr>
            </tbody>
        </table>
    </div>
    <div class="span6">
         <h2>My Grocery List</h2>

        <table id="grocery_list">
            <thead>
                <tr>
                    <th>Item Name</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr>
                    <td>TOTAL:</td>
                    <td id="total_cost"></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

prettyColors.css

body {
    font-family: sans-serif;
}
.row {
    margin-left: -20px;
}
.span6 {
    padding-left: 10px;
    margin-left: 10px;
    max-width: 50%;
    float: left;
    height: 100%;
}
.span6:last-child {
    border-left: 1px solid #ddd;
}
td, th {
    padding: 4px;
}
tbody tr:nth-child(even) {
    background-color: #cdcdcd;
}
tbody tr:nth-child(odd) {
    background-color: #bcbcbc;
}
table {
    background-color: #eee;
    border: 1px solid #bbb;
}
table#grocery_list tfoot {
    color: red;
}
.item, .item * {
    cursor: pointer;
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    user-select: none;
}