¿Cómo se puede representar una secuencia dada de N dígitos (almacenada simplemente como una cadena en algún archivo de texto "digits.txt", como 3204815627....) como una matriz PxQ (donde PxQ=N) que consta de cuadrados (de R píxeles de ancho y largo), el color de cada cuadrado está determinado por su número de posición correspondiente en la secuencia dada de N dígitos.
Suponemos que cada dígito corresponde a un color específico (p. ej., 0=verde, 1=azul, 2=gris, etc.) y que los cuadrados están numerados del 1 al N consecutivamente a lo largo de las filas del arreglo.
Entonces, ¿se puede lograr lo anterior usando HTML, CSS y JavaScript de forma paramétrica basada en N, P, Q y R?
Hay una solución a su problema, aunque es complicado cuando se usa javascript de vainilla simple. ¡Hay soluciones más amigables si usa Vue, React o cualquier otro marco!
La lógica detrás de mi implementación es dividir la cadena que determina los colores que corresponden a cada fila, luego crear la tabla usando bucles for anidados. De esa manera, hacemos una fila e inmediatamente insertamos Q hijos en ella. Al anidar a los niños, cada niño obtiene su color correspondiente del colorMap (cadena N dividida en trozos de tamaño Q) y colorDict (establece un color para cada número).
No creo que esta sea la forma correcta de abordar el problema porque no deberías jugar mucho con tu CSS dentro de JS, pero esas fueron tus instrucciones.
let table = document.querySelector(".table"); let P = 10 let Q = 10 let N = "0541056150777841681110178988619751034375916404592404217345336296578302923224011014881438100594425472" // string generated from https://www.random.org/strings/?num=5&len=20&digits=on&unique=off&format=html&rnd=new function splitNumbers(N, P, Q) { res = N.match(new RegExp('.{0,' + Q + '}', 'g')); // regular expression to split the random number into chunks of size P return res } const colorDict = { "0": "white", "1": "blue", "2": "green", "3": "black", "4": "red", "5": "cyan", "6": "gray", "7": "black", "8": "black", "9": "black" } function createTable(N, P, Q) { let colorMap = splitNumbers(N, P, Q) for (let i = 0; i < P; i++) { table.appendChild(document.createElement("tr")).classList.add(`row-${i}`) // creates a new row with class name, added a class name so it would be easier to append a child to each row let currentRow = document.querySelector(`.row-${i}`) for (let j = 0; j < Q; j++) { currentRow.appendChild(document.createElement("td")).style.backgroundColor = colorDict[colorMap[i][j].toString()] // creates each table cross section, it adds background color based on the nuber from the color map we created } } } window.onload = (event) => { createTable(N, P, Q) // calls the function } .table { width: 100vw; height: 100vh; } <div> <table class="table"> </table> </div>