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

Fix grid overflowing at certain dimensions

Browse source
This commit is contained in:
lolabird 2023-11-09 21:31:07 -07:00
commit 07f2f95e13
2 changed files with 3 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

9
script.js
View file

@ -2,19 +2,17 @@ let numGrid = 16; //will use this later to prompt user
//need to figure out the wrapping issue //need to figure out the wrapping issue
const container = document.querySelector(".container"); const container = document.querySelector(".container");
const conWidth = container.clientWidth; const conWidth = container.clientWidth;
const conHeight = container.clientHeight
const grid = document.createElement("div"); const grid = document.createElement("div");
const gridSlider = document.querySelector("#gridSlider"); const gridSlider = document.querySelector("#gridSlider");
function createGrid() { function createGrid() {
const gridArea = numGrid ** 2; const gridArea = numGrid ** 2;
const gridWidth = conWidth / numGrid; const gridWidth = 100 / numGrid;
const gridHeight = conHeight / numGrid;
grid.classList.add("grid"); grid.classList.add("grid");
grid.style.width = gridWidth + 'px'; grid.style.width = gridWidth + '%';
grid.style.height = gridHeight + 'px'; grid.style.height = gridWidth + '%';
for (let i = 0; i < gridArea; i++){ for (let i = 0; i < gridArea; i++){
container.appendChild(grid.cloneNode(true)); container.appendChild(grid.cloneNode(true));
@ -27,7 +25,6 @@ function createGrid() {
}); });
gridSlider.addEventListener("change", getGridDimensions); gridSlider.addEventListener("change", getGridDimensions);
} }

2
style.css
View file

@ -20,6 +20,4 @@ body{
.grid { .grid {
border: 1px solid #bbb; border: 1px solid #bbb;
box-sizing: border-box; box-sizing: border-box;
min-height: 0;
overflow: hidden;
} }