Estoy creando una cuadrícula para un proyecto de Etch-a-Sketch. Tengo un div (.container) vacío en mi HTML y uso un bucle JS para crear una cuadrícula de 16x16. Todos los elementos adjuntos aparecen en la herramienta de inspección, pero no en la pantalla en vivo. Verás mi código a continuación, ¡gracias!
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; }