I’m trying to complete the odin project’s Etch-a-sketch. WHy are the grid divs glowing? (it’s not part of the space aesthetic). And also, the grid divs are not really fitting into the container column x column; e.g. when I type in 4 per column/row, it should be 4×4 but it turned out to be 3×3 x3x3x3 and one huge square div at the last row. I don’t know how to make it all resize into the box accordingly.
const divContainer = document.querySelector(".divContainer");
const header = document.querySelector(".header");
const buttonAsk = document.createElement("button");
buttonAsk.classList.add("button-ask");
header.appendChild(buttonAsk);
buttonAsk.textContent = "Start Gridding";
function createGrid(columns) {
divContainer.innerHTML = "";
// Set the width of each .divbox based on the number of columns
const boxSize = 100 / columns; // Percent size for each box
divContainer.style.setProperty("--box-size", `${boxSize}%`);
for (let i = 0; i < columns * columns; i++) {
const divBox = document.createElement("div");
divBox.classList.add("divbox");
divBox.style.flex = `1 0 ${boxSize}%`; // Flex item size
divContainer.appendChild(divBox);
divBox.addEventListener("mouseover", () => {
if(!divBox.classList.contains("hovered")) {
divBox.classList.add("hovered");
}
});
}
}
buttonAsk.addEventListener("click", () => {
let columns = parseInt(
prompt("Enter number of squares per row for new grid"),
10
);
if (columns < 0 || isNaN(columns)) {
alert("Please type a number more than 0 and less than 100 :)");
return;
}
if (columns > 100) {
alert("100 is the limit!!!");
return;
}
createGrid(columns);
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 50px 0;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: white;
}
body{
background-image: url(./pexels-nicole-avagliano-1132392-2706654.jpg);
background-size: cover;
}
.button-ask {
width: 100px;
height: 50px;
background-color: blueviolet;
padding: 5px 80px;
border-radius: 5px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
text-wrap: nowrap;
font-weight: 700;
color: bisque;
}
.divContainer {
width: 1000px;
height: 700px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
border: 5px solid tomato;
box-sizing: border-box;
}
.divContainer {
background: rgba( 0, 0, 0, 0 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 17.5px );
-webkit-backdrop-filter: blur( 17.5px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.divbox {
margin: 2px;
flex-basis: calc(100% / var(--columns) - 2px);
aspect-ratio: 1 / 1;
border-radius: 5px;
background: #e0e0e0;
box-shadow: 28px 28px 56px #acacac, -28px -28px 56px #ffffff;
}
.divbox:hover {
border-radius: 5px;
background: #e0e0e0;
box-shadow: inset 28px 28px 56px #acacac, inset -28px -28px 56px #ffffff;
}
.divbox.hovered {
border-radius: 5px;
background: #e0e0e0;
box-shadow: inset 28px 28px 56px #acacac, inset -28px -28px 56px #ffffff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>Etch-a-Sketch!</h1>
</div>
<div class="divContainer"></div>
<script src="javascript.js"></script>
</body>
</html>I tried flex: display on container.
I tried flex: 1.
I tried cal(–column, ) (Chatgpt suggested this method. I don’t know any other way to do this.)
If you have an easier method to resize the grid divs into container please please PLEASE provide your suggestion
New contributor
Konton Noreiya is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
4