HTML doesn't respect the sizes set in JavaScript file

mtt 0
Viewed 45

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,GRAD@20..48,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

flexbox size javascript css html
2 Answers

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,GRAD@20..48,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>

Mhd Alaa Alhaj0

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

HuyPham0
Related