---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моделирование работы маркетплейса</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #333;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #eee;
        }
        .controls {
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

    <h1>Список товаров</h1>

    <div class="controls">
        <label>Сколько товаров вывести?
            <input type="number" id="countInput" value="10" min="1" max="50">
        </label>
        <button onclick="startGeneration()">Получить товары</button>
    </div>

    <table>
        <thead>
            <tr>
                <th>Название</th>
            </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>

    <script>

        let products = [];

        const alphabetLower = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя';
        const alphabetUpper = 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ';
        const digits = '0123456789';

        function generateName() {
            let name = '';
            let randomUpperIndex = Math.floor(Math.random() * alphabetUpper.length);
            name += alphabetUpper[randomUpperIndex];
            let length = Math.floor(Math.random() * 3) + 5;
            for (let i = 1; i < length; i++) {
                if (Math.random() > 0.5) {
                    let randomLowerIndex = Math.floor(Math.random() * alphabetLower.length);
                    name += alphabetLower[randomLowerIndex];
                } else {
                    let randomDigitIndex = Math.floor(Math.random() * digits.length);
                    name += digits[randomDigitIndex];
                }
            }
            return name;
        }

        function startGeneration() {
            let count = document.getElementById('countInput').value;
            products = [];
            for (let i = 0; i < count; i++) {
                let product = {
                    name: generateName()
                };
                products.push(product);
            }
            renderTable();
        }

        function renderTable() {
            let tbody = document.getElementById('tableBody');
            tbody.innerHTML = '';
            for (let i = 0; i < products.length; i++) {
                let tr = document.createElement('tr');
                tr.innerHTML = `<td>${products[i].name}</td>`;
                tbody.appendChild(tr);
            }
        }

    </script>
</body>
</html>