2024-01-09 19:07:08 +00:00
|
|
|
const container = document.querySelector("#container");
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < 16; i++) {
|
|
|
|
|
let flexbox = document.createElement("div");
|
|
|
|
|
flexbox.classList.add("flexbox");
|
|
|
|
|
for (let j = 0; j < 16; j++) {
|
|
|
|
|
let div = document.createElement('div');
|
|
|
|
|
div.classList.add("griddy");
|
|
|
|
|
flexbox.appendChild(div);
|
|
|
|
|
}
|
|
|
|
|
container.appendChild(flexbox);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let griddies = document.querySelectorAll(".griddy");
|
|
|
|
|
griddies.forEach(griddy => {
|
|
|
|
|
griddy.addEventListener("mouseover", (event) => {event.target.style.backgroundColor = "#000"});
|
|
|
|
|
griddy.addEventListener("mouseout", (event) => {
|
|
|
|
|
setTimeout(() => event.target.style.backgroundColor = "#fff", 1000);
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
})
|
