Estoy tratando de completar el desafío Etch-a-Sketch de The Odin Project y actualmente estoy atascado tratando de cambiar el tamaño de los divs que componen el bloc de dibujo. La aplicación crea una cuadrícula de 16x16 por defecto, y al pulsar el botón de borrar pide un número. A continuación, debería volver a crear la cuadrícula en función de ese número. Sin embargo, después de dar un número, el tamaño del bloc de dibujo se reduce. He notado que la cantidad de divs vacíos creados es siempre 256. Enlace a codepen para aclaraciones: https://codepen.io/eerolli/pen/abELQbp
Cualquier ayuda sobre cómo podría hacer que el tamaño de la almohadilla permanezca igual, independientemente de la cantidad de divs en su interior, es muy apreciada.
Editar: probablemente debería tenerse en cuenta que la aplicación funciona bien cuando ingreso un número igual o inferior a 16.
html:
<!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"> <link rel="stylesheet" href="style.css"> <title>Etch-a-Sketch</title> </head> <body> <div class="content"> <h1>Etch-a-Sketch</h1> <div class="container"> </div> <button>Erase</button> </div> </body> <script src="script.js"></script> </html>JavaScript:
let clear = document.querySelector("button"); //function to create a 16x16 grid function createGrid(size){ function resetSize(){ clear.addEventListener('click', ()=>{ let number = prompt("What size would you like the grid to be? (1-100)"); container.style.gridTemplateRows = `repeat(${number}, 1fr)`; container.style.gridTemplateColumns = `repeat(${number}, 1fr)`; }) } resetSize(); let container = document.querySelector(".container"); container.style.gridTemplateRows = `repeat(${size}, 1fr)`; container.style.gridTemplateColumns = `repeat(${size}, 1fr)`; for (let i = 0; i < size*size; i++) { let square = document.createElement("div"); square.style.backgroundColor = "black"; container.appendChild(square); //change background color of a square on hover square.addEventListener('mouseover', e=>{ square.style.backgroundColor = "white"; }) //function to reset the grid function clearGrid(){ clear.addEventListener('click', e=>{ square.style.backgroundColor = "black" }) } clearGrid(); } } createGrid(16);Estuvo muy cerca... solo necesita volver a llamar a la función de creación de cuadrícula después de la solicitud de entrada y pasar el nuevo tamaño/número que el usuario ingresó como argumento; D
Editar: Ah, sí, no noté que se atascó en un bucle. Refactoricé un poco y agregué un par de comentarios, espero que ayude.
let clear = document.querySelector("button"); let container = document.querySelector(".container"); // move container out here so can use everywhere clear.addEventListener('click', ()=>{ // we only want to add this listener once resetSize() }) function resetSize(){ let number = prompt("What size would you like the grid to be? (1-100)"); container.style.gridTemplateRows = `repeat(${number}, 1fr)`; container.style.gridTemplateColumns = `repeat(${number}, 1fr)`; createGrid(number); // call the createGrid function here and pass the number they entered as the argument. } //function to create a 16x16 grid function createGrid(size){ // resetSize(); // get rid of this as this was causing it to show the prompt again each time container.style.gridTemplateRows = `repeat(${size}, 1fr)`; container.style.gridTemplateColumns = `repeat(${size}, 1fr)`; for (let i = 0; i < size*size; i++) { let square = document.createElement("div"); square.style.backgroundColor = "black"; container.appendChild(square); //change background color of a square on hover square.addEventListener('mouseover', e=>{ square.style.backgroundColor = "white"; }) //function to reset the grid function clearGrid(){ clear.addEventListener('click', e=>{ square.style.backgroundColor = "black" }) } clearGrid(); } } createGrid(16); body { box-sizing: border-box; margin: 0; min-height: 100vh; display: flex; justify-content: center; } .content { display: flex; flex-direction: column; align-items: center; } .container { width: 700px; height: 700px; display: grid; margin: 2rem; border: 2px solid burlywood; } h1 { text-align: center; } button { width: 50px; } <div class="content"> <h1>Etch-a-Sketch</h1> <div class="container"> </div> <button>Erase</button> </div>