GroceryListOOJS.md

#OOJS: Grocery List

That's all.

index.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;
}

index.html

<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>

index.js

/* 
 * 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
  });
});