From 8b51212b5da689cbdf27f9fc371198318a266abc Mon Sep 17 00:00:00 2001
From: NetMan <13informatyka14@gmail.com>
Date: Tue, 9 Jan 2024 20:33:07 +0100
Subject: [PATCH] Removed 1s disappear, added random colors, clearing grid

---
 index.html |  1 +
 script.js  | 29 +++++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 9a64174..f52e02f 100644
--- a/index.html
+++ b/index.html
@@ -13,5 +13,6 @@
 
     </div>
     <button id="gridsize">Change size of grid</button>
+    <button id="clear">Clear grid</button>
 </body>
 </html>
\ 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);
     }