10h30/odin-etch-a-sketch
1
0
Fork 0
mirror of https://github.com/10h30/odin-etch-a-sketch.git synced 2026-07-11 18:55:58 +09:00
Code Issues Packages Projects Releases Wiki Activity

Make Grid

Browse Source
This commit is contained in:
Thuan Bui
2025-02-23 10:30:17 +09:00
commit ee249f5c7c
3 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+11
View File
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch A Sketch</title>
</head>
<body>
<div class="container"></div>
</body>
</html>
script.js
+11
View File
@@ -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";;
}
style.css
+9
View File
@@ -0,0 +1,9 @@
.container {
display: flex;
text-align: center;
}
.grid {
border: 1px solid #111;
width: 10px;
height: 10px;
}