How to create dynamic HTML and CSS based on Javascript [duplicate]

Question

I have been working on a project which generates Colorful numbers (Each digit has different colour, so random numbers and random colors).

My javascript code would give an output in this manner.

Output:

[ [ 7, 1, 6, 2 ], [ 2, 7, 6, 1 ], [ 3, 4, 5, 2 ] ]

[ [ 'green', 'red', 'yellow', 'magenta' ], [ 'magenta', 'green', 'yellow', 'red' ], [ 'magenta', 'yellow', 'green', 'red' ] ]

These are two lists. The second list indicates the color of the respective digits mentioned in the first list (And list is generates random colors and numbers everytime of output).

I want to know how can I make a CSS, which would dynamically allocate the colors from this list and also mention the numbers from the list into HTML?.

Answer 1

var numbers = [ [ 7, 1, 6, 2 ], [ 2, 7, 6, 1 ], [ 3, 4, 5, 2 ] ]  

var color = [ [ 'green', 'red', 'yellow', 'magenta' ], [ 'magenta', 'green', 'yellow', 'red' ], [ 'magenta', 'yellow', 'green', 'red' ] ]


var div = document.getElementById("demo")

for(i=0; i<numbers.length; i++){
  for(j=0; j<numbers[i].length; j++){
  
  div.innerHTML += `<div class="innerChild" style="color:${color[i][j]}">${numbers[i][j]}</div>`
  }
}

<div id="demo"></div>