Issue
I'm trying to make a sketchpad, which is a project from https://theodinproject.com. By default, the sketchpad has 16x16 grid of squares. The squares are expected to change when the user input the number of squares he wants while maintaining the dimensions of the grid container. I used CSS grid to do that.
The problem is when the user input the number squares, the grid do not fill the height of its container. They normally leave a blank space. I've tried different layout but CSS grid is the only that gets me close to the solution.
button.addEventListener("click", () => {
let num = prompt("Enter the number of squares", "0");
let count = num * num;
createDiv(count);
container.setAttribute(`style`,
`grid-template-columns: repeat(${num}, 1fr);
grid-template-rows: repeat(${num}, 1fr);`);
});
Here is a pen of the project https://codepen.io/Shahidharis/pen/poLKzqj
Solution
I've made a few changes to your code.
const grids = document.querySelector('.grid-wrapper')
const btn = document.querySelector('.btn')
let defCount = 5 //default
createDiv = (num) => {
for(let i=0; i<num*num; i++){
let square = document.createElement("div")
grids.append(square)
}
}
grids.style.setProperty("--count", defCount)
createDiv(defCount)
btn.addEventListener("click", () => {
grids.innerHTML = ''
newCount = prompt("input a number")
grids.style.setProperty("--count", newCount)
createDiv(newCount)
})
*, *:before, *:after{
margin:0;
box-sizing: border-box;
}
body{
display:grid;
place-content: center;
gap: 0.5rem;
min-height: 100vh;
background: beige;
}
.grid-wrapper{
padding: 0.5rem;
background: orchid;
border-radius: 0.3rem;
width: 30rem;
aspect-ratio: 1;
display: grid;
grid: repeat(var(--count), 1fr) / repeat(var(--count), 1fr);
gap: 2px;
}
.grid-wrapper > div {
background: azure;
}
.grid-wrapper > div:hover {
background: lime;
}
<h1>Etch-A-Sketch</h1>
<button class="btn">Input count</button>
<div class="grid-wrapper">
</div>
Answered By - Servesh Chaturvedi Answer Checked By - Senaida (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.