Is it possible to display a variety of color schemes in just one console.log()?

Question

My task involves working with an array of hexadecimal values,

"colors": ["#d5dd90","#e6bb45","#ef9770"]

To log these out in different colors, I used the following method:

colors.forEach((value)=>{
  console.log('%cABC', `background: ${value};`);
})

This generates three separate console.log() entries:

ABC

______________

ABC

______________

ABC

______________

Each 'ABC' displays in a different color, one for each item in the array.

Now, I aim to display each item on individual lines like so:

ABC ABC ABC

______________

The idea is to have one log() call for each array element, styled with its respective color.

I accomplished this using the code below:

let colors= ["#d5dd90","#e6bb45","#ef9770"] console.log('%cABC %cABC %cABC', color:${colors[0]}, color:${colors[1]}, color:${colors[2]});

Given that I have multiple arrays, the challenge now lies in implementing this within a for() loop.

Answer 1

Answer №1

%c is a versatile tool that can be utilized multiple times within a string for logging purposes.

const colors = ["#d5dd90","#e6bb45","#ef9770"];
console.log(colors.map(c => `%c${c}`).join(''), ...colors.map(c => `background: ${c};`));

To see the outcome, open your browser console

Answer 2

%c is a versatile tool that can be utilized multiple times within a string for logging purposes.

const colors = ["#d5dd90","#e6bb45","#ef9770"];
console.log(colors.map(c => `%c${c}`).join(''), ...colors.map(c => `background: ${c};`));

To see the outcome, open your browser console