Comlete basic task

script.js

@@ -2,10 +2,43 @@ const container = document.querySelector(".container")
 const containerWidth = document.querySelector(".container").clientWidth; 
 console.log(containerWidth)
 
-for (let i=0; i < 16*16; i++) {
-    const squareBox = document.createElement("div")
-    container.appendChild(squareBox)
-    squareBox.setAttribute('class', 'grid')
-    squareBox.style.width= containerWidth / 16 + "px";;
-    squareBox.style.height= containerWidth / 16 + "px";;
+const button = document.querySelector("button")
+button.addEventListener('click', () => {
+
+    let gridSize = prompt("Please enter grid size: ")  
+    makeGrid(gridSize)
 }
+)
+
+function makeGrid(size) {
+    container.innerHTML = ""
+    for (let i=0; i < size * size; i++) {
+        const squareBox = document.createElement("div")
+        container.appendChild(squareBox)
+        squareBox.setAttribute('class', 'grid')
+        squareBox.style.width= containerWidth / size + "px";;
+        squareBox.style.height= containerWidth / size + "px";;
+    }
+    const grid = document.querySelectorAll('.grid')
+    for (i of grid) {
+    i.addEventListener('mouseover', 
+    //e => e.target.classList.add('changecolor')
+    e => e.target.style.backgroundColor = getRandomColor()
+    )
+}  
+
+}
+makeGrid(16)
+
+function getRandomColor() {
+    var letters = '0123456789ABCDEF';
+    var color = '#';
+    for (var i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }
+
+
+
+

style.css

@@ -1,9 +1,16 @@
 .container {
     display: flex;
     text-align: center;
+    flex-wrap: wrap;
+    width: 800px;
+    -webkit-box-shadow:inset 0px 0px 0px 5px gray;
+    -moz-box-shadow:inset 0px 0px 0px 5px gray;
+    box-shadow:inset 0px 0px 0px 5px gray;
 }
+
+
 .grid {
-    border: 1px solid #111;
-    width: 10px;
-    height: 10px;
+    -webkit-box-shadow:inset 0px 0px 0px 1px gray;
+  -moz-box-shadow:inset 0px 0px 0px 1px gray;
+  box-shadow:inset 0px 0px 0px 1px gray;
 }