shopping cart

index.html

<div id="container">
  <div class="box">
    <img src="http://chenyiya.com/codepen/product-1.jpg" alt="pic1">
    <i class="fa fa-plus"></i>
    <h3 id="item-one">Beer Bottle</h3>
    <p>12.99</p>
  </div>
  <div class="box">
    <img src="http://chenyiya.com/codepen/product-2.jpg" alt="pic2">
    <i class="fa fa-plus"></i>
    <h3 id="item-two">Eco Bag</h3>
    <p>45.99</p>
  </div>
  <div class="box">
    <img src="http://chenyiya.com/codepen/product-3.jpg" alt="pic3">
    <i class="fa fa-plus"></i>
    <h3 id="item-three">Paper Bag</h3>
    <p>58.99</p>
  </div>
  <div id="cart">
    <div id="head">
      <h3>Shopping Cart</h3>
      <div id="price">Price</div>
      <div id="quantity">Quantity</div>
      <div id="total">Total</div>
    </div>
    
  </div>
</div>

script.js

$(".box i").click(function() {

  var productImg = $(this).siblings("img").attr('src');
  var productimgNo = $(this).siblings("img").attr('alt');
  var productName = $(this).siblings("h3").text();
  var productPrice = $(this).siblings("p").text();
  var productQty = 1;
  var total = parseFloat(productPrice);
  var info = $('<div class="row">' + '<img src="' + productImg + '" class="' + productimgNo + '">' + '<h4>' + productName + "</h4>" + '<p>' + productPrice + "</p>" + '<div class="qty-minus">-</div>' + '<div class="qty">' + productQty + '</div>' + '<div class="qty-plus">+</div>' + '<div class="del">Remove</div>' + '<div class="totalprice">' + total + '</div>' + '</div>');

  /*add item*/
  $("#cart").append(info);

  /*if item exist, add quantity*/
  if ($('.pic1').size() > 1) {
    var newQty = parseInt($('.pic1').first().siblings('.qty').text()) + 1;
    $('.pic1').parents('.row').first().remove();
    $('.pic1').siblings('.qty').text(newQty);
    total = newQty*productPrice;
    $('.pic1').siblings('.totalprice').text(total);
  } else if ($('.row .pic2').size() > 1) {
    var newQty = parseInt($('.pic2').first().siblings('.qty').text()) + 1;
    $('.pic2').parents('.row').first().remove();
    $('.pic2').siblings('.qty').text(newQty);
    total = newQty*productPrice;
    $('.pic2').siblings('.totalprice').text(total);
  } else if ($('.pic3').size() > 1) {
    var newQty = parseInt($('.pic3').first().siblings('.qty').text()) + 1;
    $('.pic3').parents('.row').first().remove();
    $('.pic3').siblings('.qty').text(newQty);
    total = newQty*productPrice;
    $('.pic3').siblings('.totalprice').text(total);
  }



  /*delete item*/
  $('.del').click(function() {
    $(this).parents(".row").remove();
  });
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

shopping-cart.markdown

shopping cart

A Pen by chenchen on CodePen.

License.

style.css

html,
body {
  background-color: #eee;
  font-family: calibri, sans-serif;
}

#container {
  width: 760px;
  margin: 20px auto;
}

.box {
  width: 230px;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin: 0 10px;
  position: relative;
}

.box img {
  width: 230px;
}

.box i {
  width: 50px;
  height: 50px;
  background: #ED277F;
  color: #ffffff;
  border-radius: 25px;
  text-align: center;
  line-height: 50px;
  font-size: 1.4rem;
  position: absolute;
  right: 20px;
  top: 150px;
  box-shadow: 0 0 4px 2px rgba(80, 80, 80, 0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.box i:hover {
  transform: scale(1.05);
}

.box h3 {
  margin-left: 20px;
}

.box p {
  margin-left: 20px;
}

#cart {
  margin-top: 50px;
  overflow: hidden;
}

#head {
  width: 100%;
  border-bottom: 1px solid #BFBFBF;
  height: 40px;
  display: block;
}

#head h3 {
  display: inline-block;
  line-height: 40px;
  margin: 0;
}

#price {
  display: inline-block;
  color: #777777;
  margin-left: 200px;
  line-height: 40px;
}

#quantity {
  display: inline-block;
  color: #777777;
  margin-left: 100px;
  line-height: 40px;
}

#total {
  display: inline-block;
  color: #777777;
  line-height: 40px;
  float: right;
}

.row {
  width: 100%;
  border-bottom: 1px solid #BFBFBF;
  overflow: hidden;
  padding: 10px 0;
  display:block;
  flaot:left;
}

.row img {
  height: 100px;
  float: left;
}

.row h4 {
  float: left;
  margin: 0;
  line-height: 100px;
  margin-left: 20px;
  width: 100px;
}

.row p {
  float: left;
  margin: 0;
  width: 80px;
  line-height: 100px;
  margin-left: 35px;
  text-align: center;
}

.qty-minus {
  float: left;
  width: 20px;
  line-height: 100px;
  margin-left: 60px;
  text-align: center;
  cursor: pointer;
}

.qty {
  float: left;
  width: 20px;
  line-height: 100px;
  margin-left: 20px;
  text-align: center;
}

.qty-plus {
  float: left;
  width: 20px;
  line-height: 100px;
  margin-left: 20px;
  text-align: center;
  cursor: pointer;
}

.del {
  float: left;
  width: 80px;
  line-height: 100px;
  margin-left: 60px;
  cursor: pointer;
  text-decoration: underline;
  color: #ED277F;
}

.totalprice {
  float: left;
  width: 80px;
  line-height: 100px;
  margin-left: 10px;
  text-align: right;
}

.row p::before,
.box p::before,
.totalprice::before {
  content: "$";
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />