I'm currently working on replicating an Etch-a-Sketch style drawing board where hovering over a single pixel with the mouse changes its color. However, I've hit a roadblock when it comes to drawing the board. The flexbox container doesn't seem to adhere to the width and height values set in the JavaScript file. Instead, it generates div elements with a width of 0 and stretched height. What could I be doing wrong?
const okBtn = document.querySelector('#ok-button')
okBtn.addEventListener('click', () => {
const size = document.querySelector("#grid-size").value
drawGrid(size)
})
const BOX = document.querySelector("#drawing-space")
const BOXsize = BOX.offsetWidth
function drawGrid(size) {
var cellSize = BOXsize / size
console.log()
for (let i = 0; i < size * size; i++) {
const cell = document.createElement('div')
cell.classList.add('cell')
BOX.appendChild(cell)
cell.width = cellSize
cell.height = cellSize
console.log("appended #", i)
console.log(cell.offsetWidth)
console.log(cell.offsetHeight)
}
}body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
height: 100vh;
}
/* HEADER */
#header {
display: flex;
font-size: 90px;
justify-content: center;
align-items: center;
background-color: #1A1A1D
}
#header .tittle {
color: aliceblue;
font-family: 'Shadows Into Light', cursive;
}
img {
font-size: 40px;
font-style: italic;
}
/* MAIN */
.main {
background-color: rgb(192, 213, 231);
font-size: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
.main #reset-button {
font-family: 'Shadows Into Light', cursive;
}
#size-settings {
display: flex;
font-size: 50px;
font-family: 'Shadows Into Light', cursive;
}
#size-settings #size-input input {
margin: 5px;
margin-right: 10px;
background-color: rgb(192, 213, 231);
width: 60px;
height: 60px;
font-size: 45px;
font-family: 'Shadows Into Light', cursive;
}
#reset-button:hover {
transform: scale(1.3);
color: aliceblue;
}
#ok-button:hover {
transform: scale(1.3);
color: aliceblue;
}
#drawing-space {
width: 900px;
height: 900px;
border: #1A1A1D 4px solid;
}
#drawing-space {
display: flex;
flex-flow: row wrap;
}
/* CELL */
.cell {
border: #C3073F solid 1px;
flex: 0 0 auto;
}
/* FOOTER */
#footer {
display: flex;
align-items: center;
justify-content: center;
background-color: #C3073F;
margin: 0px;
}
#footer .text {
font-size: 40px;
}
/* ICONS */
.material-symbols-outlined {
font-size: 100px;
color: aliceblue;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5a2b7a4a1a5d7d5cbcbd1dd">[email protected]</a>,100..700,0..1,-50..200" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="header">
<div class="tittle">SKETCHBOOK</div>
<div id="pen-icon">
<div class="material-symbols-outlined">edit</div>
</div>
</div>
<div class="main">
<div id="reset-button">RESET</div>
<div id="size-settings">
<div class="text">SIZE:</div>
<div id="size-input"><input id="grid-size" type="number" for="text" min="1" max="99"></div>
<div id="ok-button">OK</div>
</div>
<div id="drawing-space">
</div>
</div>
<div id="footer">
<div class="text"> by mt 2022</div>
</div>
<script src="script.js"></script>
</body>
</html>CodePen: https://codepen.io/mttt7/pen/RwyavzB