How is this card made?

Question

css

Hello!
I don’t know how to make such a card, it’s just added by the hour and the amount from below is summed up, etc.,
then sent by the feedback form. Please point me to resources where I can learn this.

Answer 1

<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

we do the field with - and + through JS , where we drive the quantity (1) into the block with the ID of the amount of 500 rubles, recalculate through JS further, when the ORDER button is pressed, we collect the quantity, cost and send a POST request to the application processor