2023-11-09 16:31:23 -07:00
|
|
|
function createGrid(num) {
|
|
|
|
|
const container = document.querySelector(".container");
|
|
|
|
|
const conWidth = container.clientWidth;
|
|
|
|
|
const conHeight = container.clientHeight
|
|
|
|
|
const grid = document.createElement("div");
|
|
|
|
|
const gridArea = num ** 2;
|
|
|
|
|
const gridWidth = conWidth / num;
|
|
|
|
|
const gridHeight = conHeight / num;
|
2023-11-09 15:14:02 -07:00
|
|
|
|
2023-11-09 16:31:23 -07:00
|
|
|
grid.classList.add("grid");
|
|
|
|
|
grid.style.width = gridWidth + 'px';
|
|
|
|
|
grid.style.height = gridHeight + 'px';
|
2023-11-09 15:14:02 -07:00
|
|
|
|
2023-11-09 16:31:23 -07:00
|
|
|
for (let i = 0; i < gridArea; i++){
|
|
|
|
|
container.appendChild(grid.cloneNode(true));
|
|
|
|
|
}
|
2023-11-09 15:14:02 -07:00
|
|
|
}
|
2023-11-09 16:31:23 -07:00
|
|
|
|
|
|
|
|
let numGrid = 16; //will use this later to prompt user
|
|
|
|
|
|
|
|
|
|
createGrid(numGrid);
|
|
|
|
|
|
|
|
|
|
|