Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav>
  <button class="fa fa-shopping-cart cart-btn"></button>
  <ul id="cart-items"></ul>
</nav>

<div id="item" data-price="185">
  <h3>air jordan XXXI</h3>
  <div id="img">
    <img src="http://www.arch-usa.com/wp-content/uploads/2016/09/845037-001-PHSRH000-2000_1024x1024.png">
  </div>
  <div class="amount">
  <a href="#" class="fa fa-minus"></a>
  <span><span id="total"></span> Qty.</span>
  <a href="#" class="fa fa-plus"></a>
</div>
  
  <button class="add-to-cart-btn"> add to cart</button>
</div>
              
            
!

CSS

              
                *,*:before,*:after{
  box-sizing:border-box;
}
body{
  margin:0;
  padding:0;
  font-family:sans-serif;
  background:radial-gradient(rgb(200,0,0),black) no-repeat;
  height:100vh;
}
button:focus{
  outline:0;
}


/*********
  NAV
*********/
nav{
  display:flex;
  justify-content:flex-end;
  background:black;
  padding:.50em 1em;
  margin:0;
  position:relative;
}
nav .cart-btn{
  background:rgb(200,0,0);
  color:white;
  border:solid 2px transparent;
  padding:.50em;
  display:block;
  cursor:pointer;
}
nav .cart-btn:hover{
  color:rgb(200,0,0);
  background:white;
}
 #cart-items{
  position:absolute;
   top:100%;
   width:300px;
   background:white;
   margin:0;
   z-index: 1;
   display:none;
}
#cart-items.open{
  display:block;
}
#cart-items img{
  width:50px;
  height:50px;
  margin-right:1em;
  padding-left:0;
}
#cart-items li{
  display:flex;
  align-items:center;
}
#cart-items span{
  font-size:.80em;
  text-transform:capitalize;
  margin:0 .10em;
}
#cart-items span.bold{
  font-weight:bold;
  text-transform:uppercase;
  margin-left:.60em;
}
#cart-items span.total{
  color:rgb(200,0,0);
  font-weight:bold;
}
#item{
  width:350px;
  margin:1.2em auto 0;
  padding-bottom:1em;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
#item h3{
  color:white;
  margin: 0;
  text-transform:capitalize;
}
img{
  width:100%;
}
#item #img{
/*   border:solid 2px red; */
  width:300px;
/*   margin-bottom:1em; */
/*   margin-top:1em; */
}
/*********
QUANTITY
*********/
.amount a{
  text-decoration:none;
/*   color:rgb(200,0,0); */
  color:white;
  padding:10% 0;
  flex:1;
}
.amount{
/*   border:solid 2px rgb(200,200,0); */
  border:solid 2px white;
  height:60px;
  width:200px;
  border-radius:50px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  text-align:center;
  overflow:hidden;
  margin-bottom:1em;
}
.amount span{
/*   color:rgb(200,0,0); */
  color:white;
  flex:2;
}

/********
ITEM BUTTON
********/
.add-to-cart-btn{
  font-family:sans-serif;
  text-transform:uppercase;
  background:black;
  color:white;
  border:solid 1px transparent;
  border-radius:50px;
  padding:.90em 2em;
  cursor:pointer;
}
/* .add-to-cart-btn:hover{
  background:green;
} */
.add-to-cart-btn.clicked{
/*   transform:translatey(5px); */
  background:red;
}

.pop-up{
  text-transform:capitalize;
  color:white;
  background:rgba(0,0,0,.7);
  padding:.60em 3em;
  position:absolute;
  top:50%;
  margin-top:-50px;
}
              
            
!

JS

              
                $(document).ready(function() {
  var count = 1;
  $('#total').text(count);
  
  var cart = $('#cart-items');
  var cart_btn = $('.cart-btn');
  
  //IF CART HAS NO ITEMS, DISABLE BUTTON
  if(cart.is(':empty')) {
    cart_btn.prop('disabled', true);
  }
  
  //GET PRICE OF ITEM($185)
  var price = +$('#item').data('price');
  
  //INCREMENT / DECREMENT BUTTON
  $('.amount').on('click', 'a', function(e) {
    e.preventDefault();
    if ($(this).hasClass('fa-plus')) {
      if (count < 10) {
        count++;
        $('#total').text(count);
      }
    } else if ($(this).hasClass('fa-minus')) {
      if (count > 1) {
        count--;
        $('#total').text(count);
      }
    }
  });
  
  //ADD TO CART BUTTON
  $('#item').on('click','button',function(){
    // ENABLE CART BUTTON
    cart_btn.prop('disabled', false);
    
    //GET SRC VALUE OF THE IMAGE
    var itemImg = $(this).parent().find('img').prop('src');
    //GET TEXT OF THE ITEM
    var itemText = $(this).parent().find('h3').text();
    //UL
    var cartItemsUL = $('#cart-items');
    //CREATE NEW LI
    var li = $('<li></li>');
    //CREATE IMG ELEMENT AND ADD THE SRC VALUE
    var cartItemsImg = $('<img>').attr('src',itemImg);
    //NAME OF THE ITEM
    var cartItemsText = $('<span></span>').text(itemText);
    
    var cartItemsAmount = $('<span></span>').addClass('bold').text('total:');
    //MULTIPLY THE PRICE OF THE ITEM WITH THE QTY.
    var total = Math.floor(price * count);
    
    var cartItemsTotal = $('<span></span>').addClass('total').text(`$${total}`);
    
    $(cartItemsUL).append($(li));
    $(li).append($(cartItemsImg),$(cartItemsText),$(cartItemsAmount),$(cartItemsTotal));
    
    
    if($(cartItemsUL).children().length > 1){
      $(cartItemsUL).children().first().remove();
    }
    
    
    //POP UP NOTIFICATION
    var notify = $('<div></div>').addClass('pop-up').text('added to cart').fadeOut(2000);
    $(this).parent().append(notify);
    
  });
  
  //NAV BUTTON TOGGLE UL
  $('nav').on('click','button',function(){
    $(this).parent().find('#cart-items').toggleClass('open');
  });
});
              
            
!
999px

Console