I am trying to make an Etch-a-Sketch copy (when I hover the single pixel with the mouse it changes its color) and I've got stuck at drawing the board, The flexbox container doesn't respect the width and height set in the JavaScript file, and it creates div with 0 widths and stretched height. What am I 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,[email protected],100..700,0..1,-50..200" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="header">
<div >SKETCHBOOK</div>
<div id="pen-icon">
<div >edit</div>
</div>
</div>
<div >
<div id="reset-button">RESET</div>
<div id="size-settings">
<div >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 > by mt 2022</div>
</div>
<script src="script.js"></script>
</body>
</html>
CodePen: https://codepen.io/mttt7/pen/RwyavzB
CodePudding user response:
The problem is that you are trying to set the width
and height
wrongly.
You have two issues, first, you have to call the style object when you want to set inline styles, second, you are not adding any unit for both.
To make it work you can change it to
cell.style.width = `${cellSize}px`;
cell.style.height = `${cellSize}px`;
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;
for (let i = 0; i < size * size; i ) {
const cell = document.createElement('div');
cell.classList.add('cell');
BOX.appendChild(cell);
cell.style.width = `${cellSize}px`;
cell.style.height = `${cellSize}px`;
// 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,[email protected],100..700,0..1,-50..200" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="header">
<div >SKETCHBOOK</div>
<div id="pen-icon">
<div >edit</div>
</div>
</div>
<div >
<div id="reset-button">RESET</div>
<div id="size-settings">
<div >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 > by mt 2022</div>
</div>
<script src="script.js"></script>
</body>
</html>
CodePudding user response:
According to what your application wants achieve and the answer on the part that you should update this
cell.style.width = `${cellSize}px`;
cell.style.height = `${cellSize}px`;
Also, you should change this
const BOXsize = BOX.offsetWidth
function drawGrid(size) {
var cellSize = BOXsize / size;
...
}
}
to
const BOXsize = BOX.clientWidth;
function drawGrid(size) {
var cellSize = (BOXsize - 2 * size)/ size;
...
}
The reasons are the differences of offsetWidth and clientWidth and the size of div
element's border you set.
The formula would be cellSize = (BOXsize - (border size of div) * 2 * size)/ size