Как верстается данная карточка?

Question

[Lana]

Всем привет!
Не знаю как можно сверстать вот такую карточку, просто прибавляется по часу и сумма снизу суммируется и т.д.,
далее отправляется формой обратной связи. Подскажи пожалуйста ресурсы где можно такое изучить.

Answer 1

[Lana]

<div class="goods-count">
   <span class="amount">
         <span class="down">-</span>
         <input type="text" class="counter" value="1 шт." data-price="375" data-count="1"/>
        <span class="up">+</span>
    </span>
</div>

$('.goods').on('click', function(evt) {
        var elem = evt.target;
        var container = evt.currentTarget;
        var input = container.getElementsByClassName('counter')[0];
        var sum = container.getElementsByClassName('sum')[0];
        var count = parseInt(input.getAttribute('data-count'), 10);
        var price = parseInt(input.getAttribute('data-price'), 10);
        
    	if (elem.classList.contains('down')) {
        	count = count == 1 ? count : (count - 1);
        } else if (elem.classList.contains('up')){
        	count += 1;
        }
        console.log(count)
        input.value = count + ' шт.';
        sum.innerHTML = price * count;
        input.setAttribute('data-count', count);
    });

Answer 2

[Кирилл Прогер]

поле с - и + делаем через JS , где кол-во (1) загоняем в блок с ID сумму в 500 руб пересчитываем через JS дальше при нажатии кнопки ЗАКАЗАТЬ собираем кол-во, стоимость и отправляем POST запросом на обработчик заявки