raw jQuery inventory example

HTML

<h1>Inventory</h1>
<div class="view'">
    <div id="list" class="itemList">
    </div>
    <div class="details">
    </div>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 12pt;
}

h1 {
    text-align: center;
    margin-bottom: 10px;
    color: red;
    font-weight: bold;
    font-size: 14pt;
}

.view {
    width: 100%;
}

.itemList {
    float: left;
    width: 100px;
    padding: 4px;
}

.details {
    float: left; 
    padding: 4px;
}

.item {
    cursor: pointer;
}

JavaScript

$(function() {
    
    function Item(name, price, quantity) {
        var self = this;
        this.name = name;
        this.price = price;
        this.quantity = quantity;
        
        this.toString = function() { return self.name + '@' + self.price; }
    }

    var items = [
        new Item("Granola bar", 1.92, 50),
        new Item("Martini bar", 20, 2),
        new Item("Foo bar", 'Priceless', 1)
    ];

    var $list = $('#list');
    for(var i=0; i<items.length; i++) {
        var item = items[i];
        var $item = $('<div>foo</div>');
        $item.addClass('item');
        $item.data('item', item);
        $item.text(item.name);
        $item.click(function() {
            var $details = $('.details');
            var data = $(this).data('item');
            $details.empty();
            $details.append('<div>Name: ' + data.name + '</div><div>Price: ' + data.price + '</div><div>In stock: ' + data.quantity + '</div>');
        }); 
        $list.append($item);
    }
});