wdi-hk-10 · seanng · Jan 23, 2016 · Jan 23, 2016 · Jan 23, 2016 · Jan 25, 2016
diff --git a/index.html b/index.html
@@ -8,13 +8,91 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="js/application.js"></script>
 
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/custom.css" rel="stylesheet">
   </head>
   <body>
-
+    <div class="container">
+      <h1>Shopping Cart</h1>
+
+
+    </div>
+    <div class ="container" id="itemList">
+      <div class="row" id ="descriptionHeader">
+        <div class="col-xs-3"><h2>Item</h2></div>
+        <div class="col-xs-3"><h2>Price</h2></div>
+        <div class="col-xs-3"><h2>Quantity</h2></div>
+        <div class="col-xs-3"><h2>Subtotal</h2></div>
+      </div>
+
+
+
+
+      <div class="row item">
+        <div class="itemName col-xs-3">Salmon</div>
+        <div class="itemPrice col-xs-3">$60.00</div>
+        <div class="col-xs-3"><label style="padding-right: 5px">QTY</label><input class ='quantity' value='0'><button class="cancel">Cancel</button></div>
+        <div class="col-xs-3 subtotal">$0.00</div>
+      </div>
+      <div class="row item">
+        <div class="itemName col-xs-3">Tuna</div>
+        <div class="itemPrice col-xs-3">$50.00</div>
+        <div class="col-xs-3"><label style="padding-right: 5px">QTY</label><input class ='quantity' value='0'><button class="cancel">Cancel</button></div>
+        <div class="col-xs-3 subtotal">$0.00</div>
+      </div>
+      <div class="row item">
+        <div class="itemName col-xs-3">Carp</div>
+        <div class="itemPrice col-xs-3">$40.00</div>
+        <div class="col-xs-3"><label style="padding-right: 5px">QTY</label><input class ='quantity' value='0'><button class="cancel">Cancel</button></div>
+        <div class="col-xs-3 subtotal">$0.00</div>
+      </div>
+      <div class="row item">
+        <div class="itemName col-xs-3">Pork</div>
+        <div class="itemPrice col-xs-3">$50.00</div>
+        <div class="col-xs-3"><label style="padding-right: 5px">QTY</label><input class ='quantity' value='0'><button class="cancel">Cancel</button></div>
+        <div class="col-xs-3 subtotal">$0.00</div>
+      </div>
+      <div class="row item">
+        <div class="itemName col-xs-3">Beef</div>
+        <div class="itemPrice col-xs-3">$40.00</div>
+        <div class="col-xs-3"><label style="padding-right: 5px">QTY</label><input class ='quantity' value='0'><button class="cancel">Cancel</button></div>
+        <div class="col-xs-3 subtotal">$0.00</div>
+      </div>
+      <div class="row item">
+        <div class="itemName col-xs-3">Chicken</div>
+        <div class="itemPrice col-xs-3">$25.00</div>
+        <div class="col-xs-3"><label style="padding-right: 5px">QTY</label><input class ='quantity' value='0'><button>Cancel</button></div>
+        <div class="col-xs-3 subtotal">$0.00</div>
+      </div>
+      <div class="row item">
+        <div class="itemName col-xs-3">Cereal</div>
+        <div class="itemPrice col-xs-3">$15.00</div>
+        <div class="col-xs-3"><label style="padding-right: 5px">QTY</label><input class ='quantity' value='0'><button class="cancel">Cancel</button></div>
+        <div class="col-xs-3 subtotal">$0.00</div>
+      </div>
+      <div class="row item">
+        <div class="itemName col-xs-3">Milk</div>
+        <div class="itemPrice col-xs-3">$10.00</div>
+        <div class="col-xs-3"><label style="padding-right: 5px">QTY</label><input class ='quantity' value='0'><button class="cancel">Cancel</button></div>
+        <div class="col-xs-3 subtotal">$0.00</div>
+      </div>
+      <div class="row" id="inputItem">
+        <div class="col-xs-3">
+          <input placeholder="Enter item">
+        </div>
+        <div class="col-xs-3">
+          <input placeholder="Enter price">
+        </div>
+        <div class="col-xs-6">
+          <button id="create">Create</button>
+        </div>
+      </div>
+
+      <div class="row" id="totalPrice" style="padding-left: 15px">
+        <h1>Total Price: $0.00</h1>
+      </div>
   </body>
 </html>
diff --git a/js/.DS_Store b/js/.DS_Store
diff --git a/js/application.js b/js/application.js
@@ -0,0 +1,84 @@
+$(document).ready(function(){
+//
+
+
+function priceCalculation (){
+  //1. Return Subtotal Price
+  var listedPrice = $(this).parent().parent().find('.itemPrice').html().split('$')[1];
+
+  var listedQuantity = $(this).val();
+
+  var subtotalPrice = $(this).parent().parent().find('.subtotal');
+
+  // if listedQuantity is a whole number, return subtotal.
+
+  if ((listedQuantity)%1===0){
+    subtotalPrice.html('$'+(listedPrice * listedQuantity)+'.00');
+
+  } else {
+    $(this).css('border: 2px red solid')
+  }
+    ;
+
+
+  //2. Return Total Price
+
+  var allSubtotals = $('.subtotal')
+  var k = [];
+  for (var i=0; i<allSubtotals.length; i++){
+    k.push(parseInt(allSubtotals.eq(i).html().split('$')[1]));
+  };
+  var totalPrice = k.reduce(function(a,b) {
+    return a + b;
+  }) //<- calculates total price
+
+//3. Changes result of Total Price
+  $('#totalPrice > h1').html("Total Price: $" + totalPrice + ".00");
+  }
+
+function createItem (){
+  var inputName = $('#inputItem').find('input').eq(0).val();
+  var inputPrice = $('#inputItem').find('input').eq(1).val();
+  var $insertItem = '<div class="row item"><div class="itemName col-xs-3">' + inputName + '</div><div class="itemPrice col-xs-3">' + '$'+inputPrice + '.00</div><div class="col-xs-3"><label style="padding-right: 5px">QTY</label><input class="quantity" value="0"><button class="cancel">Cancel</button></div><div class="col-xs-3 subtotal">$0.00</div>';
+  function isInt(value) {
+    if (isNaN(value)) {
+      return false;
+    }
+    var x = parseFloat(value);
+    return (x | 0) === x;
+  }
+  if (inputName==""){
+    alert("Please enter an item name.")
+  } else if (inputPrice==""){
+    alert("Please enter a price!")
+  } else if (isInt(inputPrice)==false){
+    alert("Please enter a price that's a whole number!")
+  } else {
+    $($insertItem).insertAfter($('#descriptionHeader'));
+  }
+  keyupQuantityInput();
+  deleteItemListener();
+  $('#inputItem').find('input').eq(0).val('');
+  $('#inputItem').find('input').eq(1).val('');
+}
+
+function deleteItem(){
+  $(this).closest('.item').remove();
+}
+
+function keyupQuantityInput(){
+  $('.quantity').on("keyup",priceCalculation);
+}
+
+function deleteItemListener(){
+  $('.cancel').on('click',deleteItem);
+}
+
+$('#create').on('click', createItem);
+$('').on()
+keyupQuantityInput();
+deleteItemListener();
+
+});
+
+
diff --git a/solution.js b/solution.js
@@ -0,0 +1,57 @@
+$(document).ready(function(){
+  var returnSubtotalPrice = function(price,quantity,i){
+    var itemSubtotalPrices = $(".item-subtotal");
+    $(itemSubtotalPrices[i]).text("$"+(price*quantity).toFixed(2))
+  };
+
+  var returnTotalPrice = function(){
+    var itemPrices = $(".item-price");
+    var itemQuantities = $(".quantity");
+    var itemLength = itemPrices.length;
+    var totalPrice = 0;
+    for (var i=0;i<itemLength;i++){
+      var price = $(itemPrices[i]).text().replace("$","");
+      if ($.isNumeric(itemQuantities[i].value)){
+        var quantity = itemQuantities[i].value;
+        $(itemQuantities[i]).css("color","black")
+      } else {
+        var quantity=0;
+        $("#total-price").after("");
+        $(itemQuantities[i]).css("color","red")
+      }
+      returnSubtotalPrice(price,quantity,i);
+      totalPrice+=price*quantity}
+      $("#total-price").text("$"+totalPrice.toFixed(2))
+    };
+
+    var createItem=function(){
+      var itemName=$("#new-item-name").val();
+      var itemUnitPrice=$("#new-item-unit-price").val();
+      if($.isNumeric(itemUnitPrice)==false){
+        alert("Unit price must be a number")
+      } else if (itemName==""){
+        alert("Item name cannot be empty")
+      } else {
+        itemUnitPrice=Number(itemUnitPrice).toFixed(2);
+        var newItem ='<div class="item row" style="display:none;">
+        <div class="item-name col-xs-4">'+itemName+'</div>
+        <div class="item-price col-xs-3">$'+itemUnitPrice+'</div>
+        <div class="item-qty col-xs-3"><label>QTY</label><input class="quantity" value="0"><button class="cancel">Cancel</button></div><div class="item-subtotal col-xs-2">$0.00</div></div>';
+        $(newItem).prependTo($("#items-list")).slideDown("slow")
+      }
+    };
+
+    $("#calc-prices-button").click(function(){
+      returnTotalPrice()
+    });
+    $(document).delegate(".quantity","focusout",function(){
+      returnTotalPrice()
+    });
+    $("#new-item-create").click(function(){createItem()
+    });
+    $(document).delegate(".cancel","click",function(){
+      $(this).parent().parent().fadeOut("slow",function(){
+        $(this).html("");returnTotalPrice()
+      })
+    })
+  });