const container = document.querySelector("#container");

function createGrid(size) {
    for (let i = 0; i < size; i++) {
        let flexbox = document.createElement("div");
        flexbox.classList.add("flexbox");
        for (let j = 0; j < size; j++) {
            let div = document.createElement('div');
            div.classList.add("block");
            flexbox.appendChild(div);
        }
        container.appendChild(flexbox);
    }
    
    let blocks = document.querySelectorAll(".block");
    blocks.forEach(block => {
        block.addEventListener("mouseover", (event) => {event.target.style.backgroundColor = "#000"});
        block.addEventListener("mouseout", (event) => {
            setTimeout(() => event.target.style.backgroundColor = "#fff", 1 * 1000);
        });
    })
}

createGrid(16);

function removeGrid() {
    document.querySelectorAll(".flexbox").forEach(flexbox => flexbox.remove());
    document.querySelectorAll(".block").forEach(block => block.remove());
}

document.querySelector("button#gridsize").addEventListener('click', () => {
    let newGridSize = prompt("Provide new size of grid, provide one number, it will be processed as (VALUExVALUE - square grid):");
    if (!isNaN(newGridSize)) {
        removeGrid();
        createGrid(newGridSize);
    }
});