html/lab5/task3/script.js - master - Coderdev/web-static-labs

html/lab5/task3/script.js
77 строк2 KB
Coderdev
12 май 2026, 12:37
12 май 2026, 12:37d8ecd0f
document.addEventListener('DOMContentLoaded', () => {
    const grid = document.getElementById('gridContainer');
    const paintBtn = document.getElementById('paintBtn');
    const statsBody = document.getElementById('statsBody');

    const palette = ['#780000', '#c1121f', '#fdf0d5', '#003049', '#669bbc'];
    const extraColors = ['#ffffff', '#000000']; 

    for (let i = 0; i < 100; i++) {
        const cell = document.createElement('div');
        cell.className = 'cell';
  
        cell.addEventListener('click', () => {
            cell.style.backgroundColor = '#ffffff';
            updateStats();
        });

        cell.addEventListener('contextmenu', (e) => {
            e.preventDefault(); 
            cell.style.backgroundColor = '#000000';
            updateStats();
        });

        grid.appendChild(cell);
    }
    paintBtn.addEventListener('click', () => {
        const cells = document.querySelectorAll('.cell');
        cells.forEach(cell => {
            const randomColor = palette[Math.floor(Math.random() * palette.length)];
            cell.style.backgroundColor = randomColor;
        });
        updateStats();
    });

    function updateStats() {
        const cells = document.querySelectorAll('.cell');
        const counts = {};
  
        [...palette, ...extraColors].forEach(color => counts[color] = 0);

        cells.forEach(cell => {
    
            const color = rgbToHex(cell.style.backgroundColor || 'rgb(255, 255, 255)');
            if (counts[color] !== undefined) {
                counts[color]++;
            } else {
                counts[color] = 1;
            }
        });

        renderTable(counts);
    }

    function renderTable(counts) {
        statsBody.innerHTML = '';
        Object.keys(counts).forEach(color => {
            const row = `<tr>
                <td><div class="color-sample" style="background-color: ${color}"></div> ${color}</td>
                <td>${counts[color]}</td>
            </tr>`;
            statsBody.innerHTML += row;
        });
    }


    function rgbToHex(rgb) {
        if (rgb.startsWith('#')) return rgb;
        const rgbValues = rgb.match(/\d+/g);
        if (!rgbValues) return '#ffffff';
        return "#" + rgbValues.map(x => {
            const hex = parseInt(x).toString(16);
            return hex.length === 1 ? "0" + hex : hex;
        }).join("");
    }

    updateStats();
});