Removed 1s disappear, added random colors, clearing grid

This commit is contained in:
NetMan 2024-01-09 20:33:07 +01:00
parent 7c9c46779f
commit 8b51212b5d
2 changed files with 26 additions and 4 deletions

View File

@ -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>

View File

@ -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);
} }