'Creating a Etch-a-Sketch grid with JavaScript

I am creating a grid for an Etch-a-Sketch project. I have an empty div (.container) in my HTML and use a JS loop to create a 16x16 grid. All appended elements appear in the inspect tool, but not on Live screen. You'll see my code below, thanks!

HTML:

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Etch and Sketch</title>
    <link rel="stylesheet" href="style.css">
</head>


<body>
    <h1 class="title">Etch a Sketch</h1>
    <div class="gridSize">Waiting</div>
    <div class="buttons">
        <button class="clear">Clear</button>
        <button class="black">Black</button>
        <button class="colors">Colors</button>
        <div class="colorPalette">Color Palette</div>
     </div>

     <div class="container">
    </div>

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

Javascript:

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

let gridSize = 16;

function makeGrid(screenSize) {
  for (let i = 0; i < screenSize ** 2; i++) {
      let square = document.createElement("div");
      square.classList.add('square');
      square.style.backgroundColor = 'blue';
      container.appendChild(square);
  }
  container.style.gridTemplateColumns = 'repeat(16, auto)';
  container.style.gridTemplateRows = 'repeat(16, auto)';
};

makeGrid(gridSize);

CSS:

.container {
  border-color: 1px solid black;
  background-color: blue;
  display: grid;
  width:50%;
  height:50%;
}

.square {
  border-color: 1px solid black;
  background-color: blue;
}
javascripthtml


Sources

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

Source: Stack Overflow

Solution Source

Related Questions