---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Простая корзина</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <main class="container">
        <h1>Интернет-магазин</h1>

        <form id="product-form" class="product-form">
            <div class="form-group">
                <label for="product-name">Название товара</label>
                <input
                    type="text"
                    id="product-name"
                    placeholder="Например, Футболка"
                    required
                >
            </div>

            <div class="form-group">
                <label for="product-price">Цена (€)</label>
                <input
                    type="number"
                    id="product-price"
                    placeholder="Например, 19.99"
                    min="0.01"
                    step="0.01"
                    required
                >
            </div>

            <button type="submit">Добавить в корзину</button>
        </form>

        <section class="cart">
            <h2>Корзина</h2>

            <p id="empty-message">Корзина пока пуста.</p>
            <ul id="product-list"></ul>

            <p class="total">
                Общая стоимость:
                <span id="total-price">0.00</span> €
            </p>
        </section>
    </main>
</body>
</html>



* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 30px 15px;
    font-family: Arial, sans-serif;
    background-color: #f2f4f7;
    color: #222;
}

.container {
    max-width: 650px;
    margin: 0 auto;
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

h1,
h2 {
    text-align: center;
}

.product-form {
    display: grid;
    gap: 15px;
    margin-bottom: 30px;
}

.form-group {
    display: grid;
    gap: 6px;
}

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #bbb;
    border-radius: 5px;
    font-size: 16px;
}

button {
    padding: 11px 15px;
    border: none;
    border-radius: 5px;
    background-color: #2764cc;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #1d4fa8;
}

#product-list {
    padding: 0;
    list-style: none;
}

.product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}

.product-info {
    overflow-wrap: anywhere;
}

.remove-button {
    flex-shrink: 0;
    padding: 7px 10px;
    background-color: #d94141;
    font-size: 14px;
}

.remove-button:hover {
    background-color: #b52f2f;
}

.total {
    margin-top: 20px;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
}

@media (max-width: 480px) {
    .container {
        padding: 18px;
    }

    .product-item {
        align-items: flex-start;
    }
}




const productForm = document.querySelector("#product-form");
const productNameInput = document.querySelector("#product-name");
const productPriceInput = document.querySelector("#product-price");
const productList = document.querySelector("#product-list");
const totalPriceElement = document.querySelector("#total-price");
const emptyMessage = document.querySelector("#empty-message");

const products = [];

productForm.addEventListener("submit", function (event) {
    event.preventDefault();

    const productName = productNameInput.value.trim();
    const productPrice = Number(productPriceInput.value);

    if (productName === "" || productPrice <= 0) {
        return;
    }

    const product = {
        name: productName,
        price: productPrice
    };

    products.push(product);

    productForm.reset();
    productNameInput.focus();

    showProducts();
});

function showProducts() {
    productList.innerHTML = "";

    let total = 0;

    products.forEach(function (product, index) {
        const listItem = document.createElement("li");
        listItem.className = "product-item";

        const productInfo = document.createElement("span");
        productInfo.className = "product-info";
        productInfo.textContent =
            product.name + " — " + product.price.toFixed(2) + " €";

        const removeButton = document.createElement("button");
        removeButton.className = "remove-button";
        removeButton.textContent = "Удалить";
        removeButton.type = "button";

        removeButton.addEventListener("click", function () {
            products.splice(index, 1);
            showProducts();
        });

        listItem.append(productInfo, removeButton);
        productList.append(listItem);

        total += product.price;
    });

    totalPriceElement.textContent = total.toFixed(2);
    emptyMessage.hidden = products.length > 0;
}