#OOJS: Grocery List
That's all.
#OOJS: Grocery List
That's all.
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; | |
} |
<link rel="stylesheet" type="text/css" href="index.css"> | |
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> | |
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> | |
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> | |
<script src="index.js"></script> | |
<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> |
/* | |
* What are the objects in this exercise? | |
* What are their properties and methods? | |
* How do your objects interact with their respective DOM elements? | |
*/ | |
function Item(name, price) { | |
this.name = name; | |
this.price = parseFloat(price); | |
} | |
Item.prototype.render = function() { | |
return "<tr class='item'>\ | |
<td class='item_name'>"+this.name+"</td>\ | |
<td class='item_price'>"+this.price+"</td>\ | |
</tr>" | |
} | |
function GroceryList() { | |
this.items = []; | |
this.tableBody = $('#grocery_list').find('tbody'); | |
} | |
GroceryList.prototype.addItem = function(item) { | |
this.items.push(item); | |
this.renderNewItem(item); | |
this.renderTotal(); | |
} | |
GroceryList.prototype.renderNewItem = function(item) { | |
this.tableBody.append(item.render()); | |
} | |
GroceryList.prototype.total = function() { | |
var total = 0; | |
for (i in this.items) { | |
total += this.items[i].price; | |
} | |
return total.toFixed(2); | |
} | |
GroceryList.prototype.renderTotal = function() { | |
$('#total_cost').text(this.total()); | |
} | |
function addToList(event, ui) { | |
var dragged_item = $(ui.draggable); | |
var item = new Item(dragged_item.find(".item_name").text(),dragged_item.find(".item_price").text()); | |
groceryList.addItem(item); | |
} | |
$(document).ready(function(){ | |
groceryList = new GroceryList(); | |
$(".item").draggable({ | |
helper: 'clone' | |
}); | |
$("#grocery_list").droppable({ | |
drop: addToList | |
}); | |
}); | |