diff --git a/index.html b/index.html index 9a64174..f52e02f 100644 --- a/index.html +++ b/index.html @@ -13,5 +13,6 @@ + \ No newline at end of file diff --git a/script.js b/script.js index 2cf9ed6..a4e16c3 100644 --- a/script.js +++ b/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); }