I'm using JavaScript to create a stack of 16 boxes. I don't think I have the makeBox() function in the right place.
let makeBox = function() {
let box = document.createElement('div');
document.body.appendChild(box);
box.style.width = '28px';
box.style.height = '28px';
box.style.border = '1px solid black';
return box;
};
let makeGrid = function(numberOfRows) {
let y = 0;
let x = 0;
while (y < numberOfRows) {
x = 0;
while (x < numberOfRows) {
x = x + 1;
}
y = y + 1;
}
makeBox();
};
makeGrid(16);I'm just getting one box in the browser. If anyone has any experience with this, if they could please help.
If you want to make a grid of boxes CSS Grid can help. It saves effort on creating nested loops. Just loop from 0 to the number passed in as the argument multiplied that same number, and create a box on each iteration. Then add it to the element that's been set up to control the grid.
I would also use a class for the box too.
function makeBox(x) {
const box = document.createElement('div');
box.classList.add('box');
box.textContent = x;
return box;
};
// The grid will be the argument (a number)
// multiplied by that number again, so you just need
// to loop from 0 to that number
function makeGrid(n) {
const grid = document.querySelector('#grid');
for (let x = 0; x < n * n; x++) {
grid.appendChild(makeBox(x));
}
};
makeGrid(16);#grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; }
.box { width: 28px; height: 28px; border: 1px solid black; text-align: center; }<div id="grid"></div>