cart

cart advance

by Prasad Gavande

HTML

<div class="container">
  <p> Add Items to your Shopping List!</p>

  <div class="form">
    <form name="listForm" method="post" action="">
      <input type="text" id="listItem" placeholder="item Name"/>
      <input type="text" id="itemPrice" placeholder="item Price"/>
      <input type="text" id="itemQty" placeholder="item Qty" />
      <lable id="sumPrice"></lable>
      <input type="button" id="addButton" value="Add" />
    Total Amount to pay  <lable id="total"></lable>
    </form>
  </div>

  <div id="shoppingList">
    <ul>
      <li></li>
    </ul>
  </div>




</div>

JavaScript

$(document).ready(function() {
var total = 0;
  //assigning the click event to the buttom
  $('#addButton').click(function() {

    var listItem = $('#listItem');
    var itemPrice = $("#itemPrice");
    var itemQty = $("#itemQty");
    var sumPrice = $("#sumPrice"); 
    sumPrice = itemPrice.val() * itemQty.val();
    $('#shoppingList ul').append('<li>' + listItem.val() + " - Price - " + itemPrice.val() + " - Qty - " + itemQty.val() + "  Sum    " + sumPrice + '</li>');
    
    total = total+sumPrice; 
    alert(total);
    $("#total").text(total);  
  });


  $('#shoppingList ul li').click(function() {
    $('this').hide();
  });



});