Add event listeners to each grid item

script.js

@@ -1,11 +1,14 @@
-function createGrid(num) {
+let numGrid = 16; //will use this later to prompt user
+//need to figure out the wrapping issue
 const container = document.querySelector(".container");
 const conWidth = container.clientWidth;
 const conHeight = container.clientHeight
 const grid = document.createElement("div");
-    const gridArea = num ** 2;
+
-    const gridWidth = conWidth / num;
+function createGrid() {
-    const gridHeight = conHeight / num;
+    const gridArea = numGrid ** 2;
+    const gridWidth = conWidth / numGrid;
+    const gridHeight = conHeight / numGrid;
 
     grid.classList.add("grid");
     grid.style.width = gridWidth + 'px';
@@ -14,10 +17,22 @@ function createGrid(num) {
     for (let i = 0; i < gridArea; i++){
         container.appendChild(grid.cloneNode(true));
     }
+
+    const gridItems = document.querySelectorAll(".grid");
+
+    gridItems.forEach((item) => {
+        item.addEventListener("mouseover", () => {
+            console.log("Sup!");
+        });
+    });
+
 }
 
-let numGrid = 16; //will use this later to prompt user
+function colorGrid() {
-
+    container.style.background = "blue";
-createGrid(numGrid);
+}
+
+
+createGrid();