[рони]

Pavel_16,

const colors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
                                '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
                                '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
                                '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
                                '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
                                '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
                                '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
                                '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
                                '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
                                '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
function renderColorPalette () {
    const paletteContainer = document.querySelector(".palette");
    const colorsItems = colors
    .map(color => {
        return `<button
                            style="background-color: ${color}"
                            class="palette-button"
                            data-color="${color}"><\/button>`;
    })
    .join("");
    paletteContainer.innerHTML = colorsItems;
}
function handleClickOnColor (event) {
    const button = event.target.closest(".palette-button");
    if (!button) return;
    const oldActiveButton = document.querySelector(".palette-button-active");
    if (oldActiveButton) {
        oldActiveButton.classList.remove("palette-button-active");
    }
    button.classList.add("palette-button-active");
}
function setEventsOnFilledElements () {
    function handleMouseEnter () {
        this.classList.add("selected");
    }
    function handleMouseLeave () {
        this.classList.remove("selected");
    }
const elements = document.querySelectorAll("*[fill]");
function handleClick () {
        const currentColor = document.querySelector(".palette-button-active");
        if (!currentColor) {
            alert("Цвет не выбран");
            return;
        }
        const save = {elem : this, color : this.getAttribute("fill")};
        stateStack.push(save);
        this.setAttribute("fill", currentColor.dataset.color);
        if ( [...elements].every(ep => ep.getAttribute('fill')!='#ffffff'))
        setTimeout(() => alert('Вы всё закрасили!'))
    }
    elements.forEach(element => {
        element.addEventListener("mouseenter", handleMouseEnter);
        element.addEventListener("mouseleave", handleMouseLeave);
        element.addEventListener("click", handleClick);
    });
}
document.addEventListener("DOMContentLoaded", renderColorPalette);
document.addEventListener("click", handleClickOnColor);
document.addEventListener("DOMContentLoaded", setEventsOnFilledElements);
function check(){
const {length} = [...document.querySelectorAll("*[fill]")].filter(ep => ep.getAttribute('fill')=='#ffffff');
const txt =  length ? `Ещё ${length} фигур не закрашено` : 'Вы всё закрасили!'
alert(txt)
}
const stateStack = []
function rev(){
if (stateStack.length){
const {elem, color} = stateStack.pop();
elem.setAttribute("fill", color)
}
}