Estoy comenzando mi autoaprendizaje en desarrollo web. Actualmente trabajando en JS y tratando de crear una pequeña aplicación "etch-a-sketch". Escribí un código que crea un lienzo con un tamaño de "píxel" predefinido. Me funciona bien. Sin embargo, para hacer que el archivo de script sea lo más estrecho posible, me pregunto si puedo establecer las propiedades de tamaño de los píxeles completamente mediante las propiedades de Flexbox en CSS. Hablando matemáticamente, me gustaría que cada elemento nuevo dentro del contenedor principal tuviera propiedades: Ancho = ancho de los padres/nthChild, alto = ancho (por lo que cada elemento siempre podría ser el cuadrado más grande posible, independientemente del número de elementos).
let initialValue = 100; const radioValues = document.querySelectorAll('input[name=size]'); let pixelSize = initialValue; // event listener for chosing size value and setting new canvas for (let i = 0; i < 3; i++) { radioValues[i].addEventListener('click', function(e){ initialValue = Number((e.target.value)); pixelSize = initialValue; //erasing existing pixels if (document.querySelectorAll('.pixel').length > 0) { const existingPixel = document.querySelectorAll('.pixel') for(let i = 0; i < existingPixel.length;i++){ existingPixel[i].remove(); } } // building new pixels for (let i = 0; i < pixelSize; i++){ let container = document.querySelector('.container'); let pixel = document.createElement('div'); pixel.setAttribute('class', 'pixel'); // part to get rid of if (pixelSize == 400) { pixel.style.height = "25px"; pixel.style.width = "25px"; } if (pixelSize == 1600) { pixel.style.height = "12.5px"; pixel.style.width = "12.5px"; } container.appendChild(pixel); } }) } .container { width: 500px; height: 500px; margin-left: auto; margin-right: auto; border: 1px solid grey; margin-top: 10%; display: flex; flex-wrap: wrap; padding: 0; } .pixel { height: 50px; width: 50px; border:1px solid grey; margin: 0; box-sizing: border-box; } <form> <input class="size_selection" type="radio" name="size" value="100" checked> <label for="size_selection">10x10</label> <input class="size_selection" type="radio" name="size" value="400"> <label for="size_selection">20x20</label> <input class="size_selection" type="radio" name="size" value="1600"> <label for="size_selection">40x40</label> </form> <div class="container"></div> <button id="clear">Clear</button>Acabo de refactorizar su secuencia de comandos para usar la cuadrícula css y las propiedades correspondientes grid-template-rows y grid-template-columns para que coincidan con su cuadrícula.
El uso de cuadrícula en este caso hace que sea mucho más fácil obtener el resultado que desea.
Solo mire a su alrededor, hice algunos cambios no solo en CSS sino también en HTML y JS. Espero eso ayude
let initialValue = 100; const radioValues = document.querySelectorAll('input[name=size]'); let pixelSize = initialValue; let container = document.getElementById('container'); // event listener for chosing size value and setting new canvas for (let i = 0; i < 3; i++) { radioValues[i].addEventListener('click', function(e) { initialValue = Number((e.target.value)); pixelSize = initialValue; //erasing existing pixels if (document.querySelectorAll('.pixel').length > 0) { const existingPixel = document.querySelectorAll('.pixel') for (let i = 0; i < existingPixel.length; i++) { existingPixel[i].remove(); } } // building new pixels // setting the correct number of columns and rows in the grid container.style.gridTemplateColumns = 'repeat(' + pixelSize + ', 1fr)'; container.style.gridTemplateRows = 'repeat(' + pixelSize + ', 1fr)'; for (let i = 0; i < pixelSize * pixelSize; i++) { let pixel = document.createElement('div'); pixel.classList.add('pixel'); container.appendChild(pixel); } }) } radioValues[0].click(); * { margin: 0; padding: 0; box-sizing: border-box; } form { text-align: center; margin: 2rem auto; } #container { width: 300px; height: 300px; margin: 2rem auto; border: 1px solid grey; display: grid; } .pixel { border: 1px solid gray; } <body> <form> <input class="size_selection" type="radio" name="size" value="10" checked> <label for="size_selection">10x10</label> <input class="size_selection" type="radio" name="size" value="20"> <label for="size_selection">20x20</label> <input class="size_selection" type="radio" name="size" value="40"> <label for="size_selection">40x40</label> </form> <div id="container"> </div> <button id="clear">Clear</button> </body>