My div is currently empty.
<div id="container"></div>
I have applied the following styling with CSS:
#container{
display: flex;
position: relative;
flex-flow: row wrap;
width: 100%;
}
The goal is to add more divs to the container using JavaScript, allowing the user to choose the number of rows and columns.
Here is the current code I am working with:
var container = document.getElementById('container');
var rows = prompt("How many rows do you want?");
var columns = prompt("How many columns do you want?");
for(var i = 0; i < rows; i++){
for(var j = 0; j < columns; j++){
var div = document.createElement("div");
div.classList.add("square");
div.innerHTML="<p>" + i + "</p>";
container.appendChild(div);
}
}
The square class contains the following styling:
.square{
flex: 1;
height: 50px;
}
However, all the divs inside the container are displayed in a single row.
I am trying to figure out how to set the dimensions of the divs based on the user input, but I'm struggling to achieve this.
Is it possible to arrange these divs inside the container as rows and columns specified by the user?
Note: I am solely utilizing JavaScript for this task and prefer to avoid plugins or libraries for now.