¡Soy nuevo en JavaScript y necesito ayuda!
Estoy tratando de crear algo como un teclado: creando una cuadrícula y luego insertando botones de Bootstrap con las letras del alfabeto en ellos. Quiero que sean 4 filas, cada una con 7 columnas. Traté de crear solo una fila con varias columnas, pero no funciona, crea solo una fila con una columna. ¿Cómo puedo solucionar esto?
HTML:
<div class="row justify-content-center container" id="buttons-space"></div>JavaScript:
var alphabet =["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]; function createKeyboard() { var space = document.getElementById("buttons-space"); var row = document.createElement("div"); row.id = "first-row"; row.className = "row container"; space.appendChild(row); for (var i = 1; i <= 7; ++i) { var col = document.createElement("div"); col.className = "col-1 my-2 mx-2"; document.getElementById("first-row").appendChild(col); var button = document.createElement("button"); button.className = "btn btn-warning"; button.style = "height: 40px; width: 40px"; button.id = alphabet[i]; button.innerText = alphabet[i]; col.appendChild(button); } }Debo usar solo JavaScript, no CSS.
const alphabet = Array(26).fill(0).map((x,i)=>String.fromCharCode(i+97)); document.querySelector('.grid-container').innerHTML = alphabet.map(alpha=>`<div class="grid-item">${alpha}</div>`).join(''); .grid-container { display: grid; grid-template-columns: repeat(7, 20px); background-color: #2196F3; padding: 2px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 2px; font-size: 15px; text-align: center; } <div class="grid-container"> </div>Quiero que sean 4 filas, cada una con 7 columnas.
Usar propiedades grid-template-columns dinámicamente dará 7 columnas a cada fila. ejemplo de w3schools .