Как создать адаптивную карточку продукта для электронной коммерции с помощью HTML CSS - PullRequest
Новая
       29

Как создать адаптивную карточку продукта для электронной коммерции с помощью HTML CSS

0 голосов
/ 08 июля 2019

Кто-нибудь может помочь мне с дизайном карточек продуктов, если кнопка «Добавить в корзину» реагирует, когда мы нажимаем на кнопку «Добавить в корзину», ее следует изменить на - 1 + и, нажав «+», знак увеличения количества и - количество знаков уменьшается и карта должна быть разработана с использованием HTML, CSS и JS

Для справки вы можете перейти на www.swiggy.com

1 Ответ

1 голос
/ 08 июля 2019

вы ожидаете, как это? 

  $('.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>
...