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

Move grid creation to function

Browse source
This commit is contained in:
lolabird 2023-11-09 16:31:23 -07:00
commit 06aa9203af
1 changed files with 20 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

15
script.js
View file

@ -1,11 +1,11 @@
function createGrid(num) {
const container = document.querySelector(".container"); const container = document.querySelector(".container");
const conWidth = container.clientWidth; 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; const gridArea = num ** 2;
const gridArea = numGrid ** 2; const gridWidth = conWidth / num;
const gridWidth = conWidth / numGrid; const gridHeight = conHeight / num;
const gridHeight = conHeight / numGrid;
grid.classList.add("grid"); grid.classList.add("grid");
grid.style.width = gridWidth + 'px'; grid.style.width = gridWidth + 'px';
@ -14,3 +14,10 @@ grid.style.height = gridHeight + 'px';
for (let i = 0; i < gridArea; i++){ for (let i = 0; i < gridArea; i++){
container.appendChild(grid.cloneNode(true)); container.appendChild(grid.cloneNode(true));
} }
}
let numGrid = 16; //will use this later to prompt user
createGrid(numGrid);