41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
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.classList.add("colored")
|
|
});
|
|
block.addEventListener("mouseout", (event) => {
|
|
setTimeout(() => {
|
|
event.target.classList.remove("colored");
|
|
}, 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);
|
|
}
|
|
}); |