From ee249f5c7ce6c3b8d0ccd469542e9f66f5f2a55a Mon Sep 17 00:00:00 2001
From: Thuan Bui <9248622+10h30@users.noreply.github.com>
Date: Sun, 23 Feb 2025 10:30:17 +0900
Subject: [PATCH] Make Grid
---
index.html | 11 +++++++++++
script.js | 11 +++++++++++
style.css | 9 +++++++++
3 files changed, 31 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cc2ba2a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ Etch A Sketch
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..bc7205a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,11 @@
+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";;
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2fa1a3b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,9 @@
+.container {
+ display: flex;
+ text-align: center;
+}
+.grid {
+ border: 1px solid #111;
+ width: 10px;
+ height: 10px;
+}
\ No newline at end of file