Grid create and remove in functions, added changing grid size

index.html

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

script.js

@@ -1,21 +1,37 @@
 const container = document.querySelector("#container");
 
-for (let i = 0; i < 16; i++) {
-    let flexbox = document.createElement("div");
-    flexbox.classList.add("flexbox");
-    for (let j = 0; j < 16; j++) {
-        let div = document.createElement('div');
-        div.classList.add("griddy");
-        flexbox.appendChild(div);
+function createGrid(size) {
+    for (let i = 0; i < size; i++) {
+        let flexbox = document.createElement("div");
+        flexbox.classList.add("flexbox");
+        for (let j = 0; j < size; j++) {
+            let div = document.createElement('div');
+            div.classList.add("block");
+            flexbox.appendChild(div);
+        }
+        container.appendChild(flexbox);
     }
-    container.appendChild(flexbox);
+    
+    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);
+        });
+    })
 }
 
-let griddies = document.querySelectorAll(".griddy");
-griddies.forEach(griddy => {
-    griddy.addEventListener("mouseover", (event) => {event.target.style.backgroundColor = "#000"});
-    griddy.addEventListener("mouseout", (event) => {
-        setTimeout(() => event.target.style.backgroundColor = "#fff", 1000);
+createGrid(16);
 
-    });
-})
+function removeGrid() {
+    document.querySelectorAll(".flexbox").forEach(flexbox => flexbox.remove());
+    document.querySelectorAll(".block").forEach(block => block.remove());
+}
+
+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)) {
+        removeGrid();
+        createGrid(newGridSize);
+    }
+});

style.css

@@ -7,7 +7,7 @@
     display: flex;
 }
 
-.griddy {
+.block {
     border: 1px solid #000;
     /* padding: 10px; */
     flex: 1;