<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px; }
        .square { width: 60px; height: 60px; border-radius: 10px; cursor: pointer; transition: all 0.3s; animation: popIn 0.3s; }
        .square:hover { transform: scale(1.2) rotate(10deg); }
        @keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
        button { padding: 10px 25px; margin: 5px; border: none; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; color: white; }
    </style>
</head>
<body>
    <h2 style="color:#1B3A5C">Rangli kvadratlar</h2>
    <button style="background:#27AE60" onclick="addSquare()">+ Qo'shish</button>
    <button style="background:#E84D3D" onclick="clearAll()">Hammasini o'chirish</button>
    <button style="background:#8E44AD" onclick="addRandom(10)">10 ta qo'shish</button>
    <div class="grid" id="grid"></div>
    <p id="count" style="color:#888">0 ta kvadrat</p>
    <script>
        const colors = ['#E84D3D','#2E86AB','#27AE60','#D4A533','#8E44AD','#1ABC9C','#E67E22','#34495E'];
        const grid = document.getElementById('grid');

        function addSquare() {
            const div = document.createElement('div');
            div.className = 'square';
            div.style.background = colors[Math.floor(Math.random() * colors.length)];
            div.onclick = () => { div.style.transform = 'scale(0)'; setTimeout(() => div.remove(), 300); updateCount(); };
            grid.appendChild(div);
            updateCount();
        }

        function addRandom(n) { for (let i = 0; i < n; i++) setTimeout(addSquare, i * 100); }
        function clearAll() { grid.innerHTML = ''; updateCount(); }
        function updateCount() { document.getElementById('count').textContent = grid.children.length + ' ta kvadrat'; }
    </script>
</body>
</html>