Как сделать корзину на сайте html css

Для создания корзины на сайте необходимо выполнить следующие шаги:

1. Создание HTML-разметки для корзины.
2. Написание CSS-стилей для корзины.
3. Добавление функционала на JavaScript, чтобы корзина могла работать с ценами товаров и добавлять/удалять товары.

Пример HTML-разметки для корзины:

<div class="cart">
  <h2>Корзина</h2>
  <ul class="cart-items">
    <!-- здесь будут отображаться товары -->
  </ul>
  <div class="cart-total">
    Итого: $<span class="total">0</span>
  </div>
  <button class="clear-cart">Очистить корзину</button>
</div>

Пример CSS-стилей для корзины:

.cart {
  border: 1px solid black;
  padding: 10px;
  width: 300px;
}

.cart h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.cart-items {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}

.cart-items li {
  margin-bottom: 5px;
}

.cart-total {
  font-weight: bold;
  margin-top: 10px;
}

.cart-total .total {
  color: green;
}

.clear-cart {
  background-color: red;
  border: none;
  color: white;
  padding: 5px 10px;
  margin-top: 10px;
  cursor: pointer;
}

Пример JavaScript-кода для корзины:

// функция для добавления товара в корзину
function addToCart(item, price) {
  const cartItems = document.querySelector('.cart-items');
  const cartTotal = document.querySelector('.total');
  const newItem = document.createElement('li');
  newItem.innerHTML = `${item} - $${price}`;
  cartTotal.innerHTML = parseInt(cartTotal.innerHTML) + price;
  cartItems.appendChild(newItem);
}

// функция для удаления товара из корзины
function removeFromCart(item, price) {
  const cartItems = document.querySelector('.cart-items');
  const cartTotal = document.querySelector('.total');
  const itemToRemove = cartItems.querySelector(`li:contains(${item})`);
  cartTotal.innerHTML -= price;
  cartItems.removeChild(itemToRemove);
}

// пример использования функций
addToCart('Товар 1', 10);
addToCart('Товар 2', 20);
removeFromCart('Товар 1', 10);

Это лишь базовый пример, который можно доработать и улучшить в зависимости от потребностей вашего сайта.