Уменьшите квадраты сетки вместо переполнения контейнера - PullRequest
Новая
       6

Уменьшите квадраты сетки вместо переполнения контейнера

0 голосов
/ 20 апреля 2020

Я слежу за ТОПом и застрял в проекте etch-a-sketch. Всякий раз, когда я вводю большое число, например, 64 квадрата с каждой стороны, квадраты остаются одинакового размера, и сетка выходит за пределы страницы. Я бы хотел, чтобы квадраты стали меньше, а размер сетки остался прежним. Я пытался поиграться с overflow min-width, min-height и minmax, но не могу понять это правильно.

HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etch-a-Sketch</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="bar" style="text-align: center; margin: auto;">
        <h1 style="margin-bottom: 0;">Etch-a-Sketch</h1>
        <button id="reset">Reset</button>
    </div>
    <div id="container">
    </div>

    <script src="scripts.js"></script>
</body>
</html>

JS: 

const container = document.getElementById("container");

// makes grid based on number of rows/cols entered
function drawGrid(rows, cols) {
  container.style.setProperty("--grid-rows", rows);
  container.style.setProperty("--grid-cols", cols);
  for (c = 0; c < rows * cols; c++) {
    let cell = document.createElement("div");
    container.appendChild(cell).className = "grid-item";
  }
}

// deletes grid before reset
function deleteGrid() {
  let cell = document.querySelectorAll(".grid-item");
  cell.forEach(cell => {
    container.removeChild(cell);
  });
}

// changes background color of divs to black
function etch() {
  let gridItems = document.querySelectorAll(".grid-item");
  gridItems.forEach(gridItem => {
    gridItem.addEventListener("mouseover", e => {
      gridItem.style.backgroundColor = "black";
    });
  });
}

drawGrid(16, 16);
etch();

// asks user how big they want the grid then calls delete and make functions
function reset() {
  let grid = prompt("How many squares per side?");

  deleteGrid();
  drawGrid(grid, grid);
}

// resets the grid when button is clicked
const resetButton = document.getElementById("reset");
resetButton.addEventListener("click", e => {
  reset();
  etch();
});

CSS: 

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  justify-self: center;
  margin: auto;
  margin-top: 5px;
  width: 80vh;
  height: 80vh;
  max-height: 82vh;
  max-width: 82vh;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  min-width: 0;
  min-height: 0;
}
...