From 3b9e36df7826f15a228bfbff0b0f883b661b5dbd Mon Sep 17 00:00:00 2001
From: Thuan Bui <9248622+10h30@users.noreply.github.com>
Date: Sun, 23 Feb 2025 11:17:04 +0900
Subject: [PATCH] Comlete basic task

---
 script.js | 45 +++++++++++++++++++++++++++++++++++++++------
 style.css | 13 ++++++++++---
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/script.js b/script.js
index bc7205a..cc50eea 100644
--- a/script.js
+++ b/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;
+  }
+
+
+
+
diff --git a/style.css b/style.css
index 2fa1a3b..be205bb 100644
--- a/style.css
+++ b/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;
 }
\ No newline at end of file