Removed 1s disappear, added random colors, clearing grid
This commit is contained in:
parent
7c9c46779f
commit
8b51212b5d
|
@ -13,5 +13,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<button id="gridsize">Change size of grid</button>
|
<button id="gridsize">Change size of grid</button>
|
||||||
|
<button id="clear">Clear grid</button>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
29
script.js
29
script.js
|
@ -1,5 +1,14 @@
|
||||||
const container = document.querySelector("#container");
|
const container = document.querySelector("#container");
|
||||||
|
|
||||||
|
function randomizeColor() {
|
||||||
|
const hex = "0123456789abcdef";
|
||||||
|
let output = "#";
|
||||||
|
for (let i = 0; i < 6; i++) {
|
||||||
|
output += hex[Math.floor(Math.random() * 16)];
|
||||||
|
}
|
||||||
|
return output;
|
||||||
|
}
|
||||||
|
|
||||||
function createGrid(size) {
|
function createGrid(size) {
|
||||||
for (let i = 0; i < size; i++) {
|
for (let i = 0; i < size; i++) {
|
||||||
let flexbox = document.createElement("div");
|
let flexbox = document.createElement("div");
|
||||||
|
@ -14,10 +23,14 @@ function createGrid(size) {
|
||||||
|
|
||||||
let blocks = document.querySelectorAll(".block");
|
let blocks = document.querySelectorAll(".block");
|
||||||
blocks.forEach(block => {
|
blocks.forEach(block => {
|
||||||
block.addEventListener("mouseover", (event) => {event.target.style.backgroundColor = "#000"});
|
block.addEventListener("mouseover", (event) => {
|
||||||
block.addEventListener("mouseout", (event) => {
|
event.target.style.backgroundColor = randomizeColor();
|
||||||
setTimeout(() => event.target.style.backgroundColor = "#fff", 1 * 1000);
|
|
||||||
});
|
});
|
||||||
|
// block.addEventListener("mouseout", (event) => {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// event.target.style.backgroundColor = "#fff";
|
||||||
|
// }, 1 * 1000);
|
||||||
|
// });
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -28,9 +41,17 @@ function removeGrid() {
|
||||||
document.querySelectorAll(".block").forEach(block => block.remove());
|
document.querySelectorAll(".block").forEach(block => block.remove());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function clearGrid() {
|
||||||
|
document.querySelectorAll(".block").forEach(block => {
|
||||||
|
block.style.backgroundColor = "#fff";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector("button#clear").addEventListener('click', clearGrid);
|
||||||
|
|
||||||
document.querySelector("button#gridsize").addEventListener('click', () => {
|
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):");
|
let newGridSize = prompt("Provide new size of grid, provide one number, it will be processed as (VALUExVALUE - square grid):");
|
||||||
if (!isNaN(newGridSize)) {
|
if (!isNaN(newGridSize) && newGridSize != null && newGridSize != "") {
|
||||||
removeGrid();
|
removeGrid();
|
||||||
createGrid(newGridSize);
|
createGrid(newGridSize);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue