Set container size width and height with one function argument-CodePudding

I have a container grid, that I'm trying to set the width and height of proportionally by passing that one number as an argument tiles in my createSketchGrid function. I'm using the variable gridSize to take the arguments tiles and multiply it by itself. The result is a container that is quite a bit wider than its height.

I'm not quite sure how to set this evenly and multiplying it doesn't make it proportional, either. Is there a way to set the width and height to be the same if I use this one argument? I also think that setting the container's display property to flex may be part of the problem as well.

const grid = document.querySelector('#grid');
const userInput = document.querySelector('#user-input');
grid.style.fontSize = '1em';
// Set pixel width and height
let wdt = '1.25em';
let hgt = '1.25em';

// Ask the user for the number of tiles for the sketch grid
function getUserInput() {
  let input = parseInt(prompt(`Please enter the grid size you'd like`));
  input <= 100 || !isNaN(input)
    ? createSketchGrid(input)
    : alert('Please enter a valid number less than or equal to 100.');
}

// Event listener to create tiles in mouseover
function setTiles(e) {
  e.target.classList.add('fill');
}

function deleteTiles(e) {
  e.target.classList.toggle('fill');
}
// Create the grid
function createSketchGrid(tiles) {
  let gridSize = tiles * tiles;
  for (let i = 0; i < gridSize; i  ) {
    let tile = document.createElement('div');
    tile.style.width = wdt;
    tile.style.height = hgt;
    grid.appendChild(tile);
    tile.addEventListener('mouseover', setTiles);
  }
}

userInput.addEventListener('click', getUserInput);

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

html {
  font-size: 10px;
}

h1 {
  font-size: 3rem;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1em;
  background-color: lightgrey;
  flex: 0 0 32em;
}

.fill {
  flex-wrap: wrap;
  background-color: black;
}

<!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>Etch A Sketch</title>
  <link rel="stylesheet" type="text/css" href="styles/style.css">
  <script type="text/javascript" src="js/main.js" defer></script>
</head>
<body>
  <h1 >Etch A Sketch</h1>
  <div id="container" >
    <button id="user-input"  value="Grid Size">Grid Size</button>
    <div id="grid" >

    </div>
  </div>
</body>
</html>

CodePudding user response：

Using CSS grid, we can define how many columns we want (here I have just used the regular repeat(..., ...) method), and we can also change the width of the grid to match.

const grid = document.querySelector('#grid');
const userInput = document.querySelector('#user-input');
grid.style.fontSize = '1em';
// Set pixel width and height
let wdt = '1.25em';
let hgt = '1.25em';

// Ask the user for the number of tiles for the sketch grid
function getUserInput() {
  let input = parseInt(prompt(`Please enter the grid size you'd like`));
  input <= 100 || !isNaN(input)
    ? createSketchGrid(input)
    : alert('Please enter a valid number less than or equal to 100.');
}

// Event listener to create tiles in mouseover
function setTiles(e) {
  e.target.classList.add('fill');
}

function deleteTiles(e) {
  e.target.classList.toggle('fill');
}
// Create the grid
function createSketchGrid(tiles) {
  let gridSize = tiles * tiles;
  for (let i = 0; i < gridSize; i  ) {
    let tile = document.createElement('div');
    tile.style.width = wdt;
    tile.style.height = hgt;
    grid.appendChild(tile);
    tile.addEventListener('mouseover', setTiles);
  }
  // change style
  grid.style.gridTemplateColumns = `repeat(${tiles}, 1fr)`;
  // calculate new width
  grid.style.width = `calc(${wdt} * ${tiles}   0.1em * ${tiles - 1})`;
}

userInput.addEventListener('click', getUserInput);

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

html {
  font-size: 10px;
}

h1 {
  font-size: 3rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(0, 1em);
  gap: 0.1em;
  background-color: lightgrey;
}

.fill {
  flex-wrap: wrap;
  background-color: black;
}

<!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>Etch A Sketch</title>
  <link rel="stylesheet" type="text/css" href="styles/style.css">
  <script type="text/javascript" src="js/main.js" defer></script>
</head>
<body>
  <h1 >Etch A Sketch</h1>
  <div id="container" >
    <button id="user-input"  value="Grid Size">Grid Size</button>
    <div id="grid" >

    </div>
  </div>
</body>
</html>