Removed 1s disappear, added random colors, clearing grid
This commit is contained in:
parent
7c9c46779f
commit
8b51212b5d
|
@ -13,5 +13,6 @@
|
|||
|
||||
</div>
|
||||
<button id="gridsize">Change size of grid</button>
|
||||
<button id="clear">Clear grid</button>
|
||||
</body>
|
||||
</html>
|
29
script.js
29
script.js
|
@ -1,5 +1,14 @@
|
|||
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) {
|
||||
for (let i = 0; i < size; i++) {
|
||||
let flexbox = document.createElement("div");
|
||||
|
@ -14,10 +23,14 @@ function createGrid(size) {
|
|||
|
||||
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);
|
||||
block.addEventListener("mouseover", (event) => {
|
||||
event.target.style.backgroundColor = randomizeColor();
|
||||
});
|
||||
// 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());
|
||||
}
|
||||
|
||||
function clearGrid() {
|
||||
document.querySelectorAll(".block").forEach(block => {
|
||||
block.style.backgroundColor = "#fff";
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelector("button#clear").addEventListener('click', clearGrid);
|
||||
|
||||
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)) {
|
||||
if (!isNaN(newGridSize) && newGridSize != null && newGridSize != "") {
|
||||
removeGrid();
|
||||
createGrid(newGridSize);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue