'How to resize a set of grid boxes to fit its parent container when a certain number is provide on prompt command

How do I fix this code? Regardless of the user input from 1 to 100, the grid should only fit into the parent container, and it should not expand the height or width of the container, I have tried some code and it adds more grids. Still, it only increases the height and does not reduce it when a user enters a lower number.

function drawGrid(container, col, row) {
  const box = document.createElement('div');
  box.className = 'box';
  box.id = `box${col}${row}`;
  
  container.appendChild(box);
  return (box);
}


function createBox(container) {
  const grid = document.createElement('div');
  grid.className = 'grid';

  for(let i = 0; i < 6; i++) {
    for(let j = 0; j < 5; j++) {
      drawGrid(grid, i, j);
    }
  }
  container.appendChild(grid);
}

function startupGrid() {
  const game = document.querySelector('#game');
  createBox(game)
}
startupGrid()

const gridSIze = document.querySelector('#gridSIze');
function resizeGrid() {
   rGrid = parseInt(prompt("Enter number from 1 to 100"))
   createBox(game)
}
gridSIze.addEventListener("click", resizeGrid);

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  place-items: center;
  gap: 2rem;
  margin: 5rem;
}

.controls {
  display: grid;
  gap: 1rem;
}

button {
  padding: 5px 15px;
}


#game {
  display: grid;
  place-items: center;
  
}

.box {
  width: 40px;
  height: 30px;
  border: 1px solid;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-template-rows: repeat(5, auto);
  box-sizing: border-box;
  gap: 1px;
  background: rgb(255, 255, 255)
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Grid</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <div class="main">
    <div class="controls">
      <!--<input type="color" id="bg-color">-->
      <button id="gridSIze" type="button">resize Grid</button>
    </div>
     
    <div id="game"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

javascript

Solution 1:^[1]

You were appending the grid to the parent which is already having one grid instead of replacing. You have given row and column constraint in css to the grid grid-template-columns: repeat(6, auto); grid-template-rows: repeat(5, auto);. With this constraint if you ask user to resize it will have same rows and columns but the boxes will increases.

function drawGrid(container, col, row) {
  const box = document.createElement('div');
  box.className = 'box';
  box.id = `box${col}${row}`;
  
  container.appendChild(box);
  return (box);
}


function createBox(container) {
  const grid = document.createElement('div');
  grid.className = 'grid';

  for(let i = 0; i < 6; i++) {
    for(let j = 0; j < 5; j++) {
      drawGrid(grid, i, j);
    }
  }
  if (container.hasChildNodes()) {
    container.replaceChild(grid,container.childNodes[0]);
    }
  else {
  container.appendChild(grid);
  }
}

function createBoxResize(container,rows,cols) {
  const grid = document.createElement('div');
  grid.className = 'grid';

  for(let i = 0; i < rows; i++) {
    for(let j = 0; j < cols; j++) {
      drawGrid(grid, i, j);
    }
  }
  if (container.hasChildNodes()) {
    container.replaceChild(grid,container.childNodes[0]);
    }
  else {
  container.appendChild(grid);
  }
}

function startupGrid() {
  const game = document.querySelector('#game');
  createBox(game)
}
startupGrid()

const gridSIze = document.querySelector('#gridSIze');
function resizeGrid() {
   let rGrid = parseInt(prompt("Enter Rows"));
   let cGrid = parseInt(prompt("Enter Columns"));
   createBoxResize(game,rGrid,cGrid)
}
gridSIze.addEventListener("click", resizeGrid);

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  place-items: center;
  gap: 2rem;
  margin: 5rem;
}

.controls {
  display: grid;
  gap: 1rem;
}

button {
  padding: 5px 15px;
}


#game {
  display: grid;
  place-items: center;
  
}

.box {
  width: 40px;
  height: 30px;
  border: 1px solid;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-template-rows: repeat(5, auto);
  box-sizing: border-box;
  gap: 1px;
  background: rgb(255, 255, 255)
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Grid</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <div class="main">
    <div class="controls">
      <!--<input type="color" id="bg-color">-->
      <button id="gridSIze" type="button">Resize Grid</button>
    </div>
     
    <div id="game"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sumit Sharma

'How to resize a set of grid boxes to fit its parent container when a certain number is provide on prompt command

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]