Merge branch 'rgb'

index.html

@@ -13,5 +13,6 @@
 
     </div>
     <button id="gridsize">Change size of grid</button>
+    <button id="clear">Clear grid</button>
 </body>
 </html>

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");
@@ -15,13 +24,13 @@ function createGrid(size) {
     let blocks = document.querySelectorAll(".block");
     blocks.forEach(block => {
         block.addEventListener("mouseover", (event) => {
-            event.target.classList.add("colored")
-        });
-        block.addEventListener("mouseout", (event) => {
-            setTimeout(() => {
-                event.target.classList.remove("colored");
-            }, 1 * 1000);
+            event.target.style.backgroundColor = randomizeColor();
         });
+        // block.addEventListener("mouseout", (event) => {
+        //     setTimeout(() => {
+        //         event.target.style.backgroundColor = "#fff";
+        //     }, 1 * 1000);
+        // });
     })
 }
 
@@ -32,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);
     }