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;
}