total count in js

by lemon kazi

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div class="item" data-pavadinimas="Black roses" data-kaina="20" data-fotke="https://scontent-lhr3-1.xx.fbcdn.net/hphotos-xpl1/v/t34.0-12/12607137_1037205286300852_326418721_n.jpg?oh=9b2f77f6a35cac5ceb7d0027be7c9e38&oe=56AF042F">
  <button>add this item</button>
</div>

<div class="item" data-pavadinimas="Exclusive handmade gifts" data-kaina="17" data-fotke="https://scontent-lhr3-1.xx.fbcdn.net/hphotos-xlt1/v/t34.0-12/12650590_1037206146300766_92619200_n.jpg?oh=26e7096948016f67b091486b59b081c4&oe=56AEE147">
  <button>add this item</button>
</div>

<div class="basket"><i class="fa fa-shopping-basket"></i></div>
<div class="noitems">Your basket case is empty. Please select atleast one item to complete purshace.</div>
<div class="totalitems">Total items:
  <div class="viso"></div>
</div>
<div class="informacija"></div>
<div class="totalprice"></div>

CSS

.basket {
  float: left;
  margin-top: 30px;
  padding-bottom: 30px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.basket i {
  display: block;
  text-align: center;
  font-size: 30px;
  color: #27B0E7;
}

.noitems {
  float: left;
  width: 100%;
  padding: 15px;
  font: 300 13px 'Open Sans', sans-serif;
}

.totalitems {
  float: left;
  width: 100%;
  padding: 6px 20px 6px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font: 600 12px 'Open Sans', sans-serif;
  display: none;
}

.totalitems .viso {
  float: right;
  padding-right: 40px;
}

.informacija {
  float: left;
  width: 100%;
}

.perka {
  float: left;
  margin: 0px 0;
  width: 100%;
  padding: 5px 17px 5px 17px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.perka .fotke {
  float: left;
  margin: 0;
  padding: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.tekstas {
  float: left;
  width: calc(100% - 70px);
  height: 35px;
}

.tekstas h1 {
  float: left;
  height: 35px;
  line-height: 35px;
  font: 600 13px 'Open Sans', sans-serif;
}

.tekstas h1:nth-of-type(1) {
  padding-left: 15px;
  max-width: 140px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tekstas h1:nth-of-type(2) {
  float: right;
}

.perka:hover {
  background: rgba(0, 0, 0, 0.1);
}

.perka .nereik {
  float: left;
  float: left;
  width: 100%;
  z-index: 9999;
  display: none;
}

.totalprice {
  float: left;
  width: 100%;
}

.viso span {
  display: none;
}

.viso span:last-child {
  display: block;
}

JavaScript

var informacija = $(".informacija");
var total = 0;

$(".item").each(function() {

  var fotke = $(this).data("fotke");
  var pavadinimas = $(this).data("pavadinimas");
  var kaina = $(this).data("kaina");

  $(this).find("button").click(function() {
    $('.noitems').hide();
    $('.totalitems').show();
    informacija.append("<div class='perka'><div class='fotke' style='background-size:cover; background-repeat:no-repeat; background-position:50% 50%; background-image: url(" + fotke + ");'></div><div class='tekstas'><h1>" + pavadinimas + "</h1><h1>£<b class='price'>" + kaina + "</b></h1></div><div class='nereik'>da</div></div>");
    var viso = $(".perka").length;
    $(".viso").append("<span>" + viso + "</span>");
    // $(this).unbind('click');
    
    total += parseInt(kaina);
    
    $('.totalprice').html(total);

    $(".perka").each(function() {
      $(this).find(".nereik").click(function() {
        $(this).parent().remove();
        var viso = $(".perka").length;
        $(".viso").append("<span>" + viso + "</span>");
      });
    });
  });
});