I'm sorry if this is a repeated question and I'd like some help cause I'm a noob. I created a grid. But every time I enter a different number, it uses a different total amount of pixel. I want the height and the width of the body that contains grid to stay exactly the same size no matter what the number of grid is.
https://moonsol124.github.io/ETCH-A-SKETCH-TOP-PROJECT-/
here is what I made.
java:
function createGrid(maxGrid = 16) {
for (let i = 0; i < maxGrid; i++) {
const divRow = document.createElement('div');
divRow.classList.add('div-row');
for (let j = 0; j < maxGrid; j++) {
const div = document.createElement('div');
div.classList.add('div-style');
divRow.appendChild(div);
}
body.appendChild(divRow);
}
addColorOnGrid();
}
css:
.div-row {
display: flex;
flex-direction: column;
}
.div-style {
width: 25px;
height: 25px;
flex: 1 1 auto;
background-color: RGB(0, 0, 0);
border: solid 3px RGB(255, 255, 255);
}
html:
<body>
<div class="btn-group">
<button class="btn" id="grid-button">Enter number of grid</button>
<button class="btn" id="reset-button">Reset</button>
</div>
<div class="grid-body">
</div>
</body>
please tell me if my approach is wrong. thanks for your help.
I think this will help to you solve your problem I just add these parts
divRow.appendChild(document.createElement("div"));
document.getElementById('ac').appendChild(divRow);
it access the parent alement and create div inside that element
And you can pass any number here to test onLoad="createGrid(6)"
function createGrid(maxGrid) {
for (let i = 0; i < maxGrid; i++) {
const divRow = document.createElement("div");
divRow.classList.add('div-row');
for (let j = 0; j < maxGrid; j++) {
const div = document.createElement('div');
div.classList.add('div-style');
divRow.appendChild(div);
}
divRow.appendChild(document.createElement("div"));
document.getElementById('ac').appendChild(divRow);
}
}
function popup() {
let val = prompt("Please enter value here");
const div = document.getElementsByClassName("div-style");
for(i = 0; div.length > 0; i++){
div[0].remove()
}
this.createGrid(parseInt(val));
}.grid-body {
display: flex;
flex-direction: row;
}
.div-style {
width: 25px;
height: 25px;
flex: 1 1 auto;
background-color: RGB(0, 0, 0);
border: solid 3px RGB(255, 255, 255);
}<body onLoad="createGrid(6)">
<div class="btn-group">
<button class="btn" id="grid-button" onClick="popup()">Enter number of grid</button>
<button class="btn" id="reset-button">Reset</button>
</div>
<div class="grid-body" id="ac">
</div>
</body>