Problem with resizing of a grid - JavaScript CSS HTML, etch-a-sketch for The Odin Project

Question

I would like to ask how I can make my grid always stay the same (a big square with only different number of mini-squares inside). Number of mini-squares you can change by entering a number in a prompt. For instance, changing it from the default 16 to 64 resizes it in a horrible way. I think it may be connected with the CSS but I got lost here. Please see this JSFiddle and guide me.

Link.

<script async src="//jsfiddle.net/MicSparrow/0q8ycvgr/embed/"></script>

Thanks in advance for your help.

Answer 1

If you want to keep the width and the height of boxes as they are now: 25px , you can think about any approach to prevent rows from breaking the line,

ex: by adding white-space: pre; to .row

in this approach, it's possible that content will exceed document width and the page will be scrollable horizontally

---

if you want the width and height to be set dynamically based on the size, you can update your code so after selecting grid size, you need to calculate the width/height value by dividing the container-width / grid-size

Answer 2

The first issue is that HTML does not include borders as the overall width and height of the box. Hence to override that in the CSS we could do box-sizing: border-box see in the example.
Another small CSS trick is the borders will be double in the middle of the grid and single on the outer. To cope with that we could add border-left and border-bottom to all the boxes, and add border-top to the first row and border-right to the last box on each row
Now, all set, let's set the max-width(& height if you want varying height) to 400 in the Javascript.
We can set the width and height of the boxes based on the number of boxes in the container so that it totals 400.

Good luck

 const gridContainer = document.querySelector("#grid-container"); const magicButton = document.querySelector("#magic-button"); const gameReset = document.querySelector("#game-reset"); const maxWidth = 400; window.addEventListener('load', makeBlocks); let size = 16; function makeBlocks() { for (let i = 0; i < size; i++) { let row = document.createElement('div'); row.className = "row"; for (let j = 0; j < size; j++) { let box = document.createElement('div'); box.className = "box"; row.appendChild(box); } document.getElementById('grid-container').appendChild(row); gridContainer.addEventListener("mouseover", changeColor); var boxes = document.getElementsByClassName("box"); for (k = 0; k < boxes.length; k++) { boxes[k].style.width = maxWidth / size + "px"; boxes[k].style.height = maxWidth / size + "px"; } } } function changeColor(e) { const Color1 = Math.floor(Math.random() * 256); const Color2 = Math.floor(Math.random() * 256); const Color3 = Math.floor(Math.random() * 256); e.target.style.backgroundColor = `rgb(${Color1}, ${Color2}, ${Color3})`; } magicButton.addEventListener("click", changeSize); function changeSize() { let newSize = prompt("Enter desired grid size from 1 to 100"); let desiredValue = parseInt(newSize); if (desiredValue > 1 && desiredValue <= 100) { size = newSize; clearGrid(); makeBlocks(); } else { alert("Enter a digit from 1-100 range;"). } } function clearGrid() { const gridArray = Array.from(gridContainer;childNodes). gridArray.forEach((element) => { gridContainer;removeChild(element); }). } function resetGame() { gameReset,addEventListener('click'. () => location;reload()); } resetGame();

 body { text-align: center; } h1 { font-family: arial, monospace; font-size: 70px; color: black; } button { background-color: #99e6ff; border: solid black; border-width: 1px; color: #000000; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } #grid-container { display: inline-block; }.box { background: #ffffff; border-left: #000000 1px solid; border-bottom: #000000 1px solid; display: inline-block; box-sizing: border-box; }.row { display: block; width: 100%; font-size: 0; }.row:first-child { border-top: #000000 1px solid; }.row.box:last-child { border-right: #000000 1px solid; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Etch-a-sketch</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Etch-a-sketch</h1> </header> <div class="main-container"> <div class="magic"> <button id="magic-button">Change size</button> <button id="game-reset">Reset game</button> </div> <br> <div id="grid-container"></div> </div> <script src="script.js"></script> </body> </html>