How to design a responsive e-commerce product card with html css

Question

Is any one here who can help me out how to design product cards where add to button is responsive when we click on add to cart button it should be changed to - 1 + and by clicking on + sign the quantity increases and on - sign quantity decreases and the card should be developed with HTML,CSS and JS

For reference you can go through www.swiggy.com

Answer 1

are you expecting like this?

  $('.minus-btn').on('click', function(e) { e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value > 1) { value = value - 1; } else { value = 0; } $input.val(value); }); $('.plus-btn').on('click', function(e) { e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value < 100) { value = value + 1; } else { value =100; } $input.val(value); }); $('.like-btn').on('click', function() { $(this).toggleClass('is-active'); }); 

  @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500); .shopping-cart { border-radius: 6px; display: flex; flex-direction: column; } .title { padding: 20px 30px; color: #5E6977; font-size: 18px; font-weight: 400; } .item { padding: 20px 30px; height: 120px; display: flex; } .is-active { animation-name: animate; animation-duration: .8s; animation-iteration-count: 1; animation-timing-function: steps(28); animation-fill-mode: forwards; } .description { padding-top: 10px; margin-right: 60px; width: 115px; } .description span { display: block; font-size: 14px; color: #43484D; font-weight: 400; } .quantity { padding-top: 20px; margin-right: 60px; } .quantity input { -webkit-appearance: none; border: none; text-align: center; width: 32px; font-size: 16px; color: #43484D; font-weight: 300; } button[class*=btn] { width: 30px; height: 30px; background-color: #E1E8EE; border-radius: 6px; border: none; cursor: pointer; } .minus-btn img { margin-bottom: 3px; } .plus-btn img { margin-top: 2px; } button:focus, input:focus { outline:0; } 

  <script src="https://code.jquery.com/jquery-2.2.4.js" charset="utf-8"></script> <div class="shopping-cart"> <div class="title"> ADD TO CART </div> </div> <div class="item"> <div class="description"> <span>item description</span> </div> <div class="quantity"> <button class="minus-btn" type="button" name="button"> -</button> <input type="text" name="name" value="1"> <button class="plus-btn" type="button" name="button"> +</button> </div> </div>