Octavia/odin-etch-a-sketch
Watch
1
0
Fork
You've already forked odin-etch-a-sketch
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add grid

Browse source
This commit is contained in:
lolabird 2023-11-09 15:14:02 -07:00
commit 85ef7a2709
2 changed files with 16 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
script.js
View file

@ -3,5 +3,14 @@ const conWidth = container.clientWidth;
const conHeight = container.clientHeight const conHeight = container.clientHeight
const grid = document.createElement("div"); const grid = document.createElement("div");
let numGrid = 16; let numGrid = 16;
const gridArea = numGrid ** 2;
const gridWidth = conWidth / numGrid; const gridWidth = conWidth / numGrid;
const gridHeight = conHeight / numGrid; const gridHeight = conHeight / numGrid;
grid.classList.add("grid");
grid.style.width = gridWidth + 'px';
grid.style.height = gridHeight + 'px';
for (let i = 0; i < gridArea-1; i++){
container.appendChild(grid.cloneNode(true));
}

6
style.css
View file

@ -12,4 +12,10 @@ body{
border: 1px solid #eee; border: 1px solid #eee;
height: 500px; height: 500px;
width: 500px; width: 500px;
display: flex;
flex-wrap: wrap;
}
.grid {
border: 1px solid #eee;
} }