Estoy creando un juego Jeopardy (siguiendo un tutorial) El código no arroja errores, pero las columnas de encabezado de mi elemento div JS para mis categorías no se muestran en las columnas que se muestran en filas, así como mis cuadros de pistas no se alinean correctamente en las columnas
Tengo mi secuencia de comandos JS en la parte inferior de mi página, he deconstruido y reconstruido el código para tratar de identificar mi problema sin suerte.
para una imagen aquí está el enlace de codepen: https://codepen.io/NP27/pen/zYELarE
El código es el siguiente:
<title>Document</title> </head> <body> <div class="app"> <header class="top-header"> <h1>Trivia Game Show</h1> <p class="score">Score <span class="score-count"></span></p> </header> <!--container for the board--> <div class="board"></div> <!--categories get injected here-->CSS:
* { box-sizing: border-box; } html, body { height: 100%; } body { font-family: sans-serif; color: white; font-size: 2vw; text-align: center; padding: 1em; background: linear-gradient(180deg, #2e2e3a 0%, #0c0c2c 100%); } .top-header { display: flex; justify-content: space-between; align-items: center; text-shadow: var(--text-shadow); }Guión JS:
renderCategory(category) { let column = document.createElement("div"); column.classList.add("column"); column.innerHTML = ( `<header>${category.title}</header><ul></ul>` ) this.boardElement.appendChild(column); }