w3resource

JavaScript: Add special characters to text to print in color in the console

JavaScript fundamental (ES6 Syntax): Exercise-65 with Solution

Write a JavaScript program to add special characters to text to print in color on the console (combined with console.log()).

  • Use template literals and special characters to add the appropriate color code to the string output.
  • For background colors, add a special character that resets the background color at the end of the string.

Sample Solution:

JavaScript Code:

//#Source https://bit.ly/2neWfJ2
// Define a function 'colorize' that takes any number of arguments and returns an object with colorized versions of the input strings.
const colorize = (...args) => ({
  black: `\x1b[30m${args.join(' ')}`,        // Black color
  red: `\x1b[31m${args.join(' ')}`,          // Red color
  green: `\x1b[32m${args.join(' ')}`,        // Green color
  yellow: `\x1b[33m${args.join(' ')}`,       // Yellow color
  blue: `\x1b[34m${args.join(' ')}`,         // Blue color
  magenta: `\x1b[35m${args.join(' ')}`,      // Magenta color
  cyan: `\x1b[36m${args.join(' ')}`,         // Cyan color
  white: `\x1b[37m${args.join(' ')}`,        // White color
  bgBlack: `\x1b[40m${args.join(' ')}\x1b[0m`,    // Black background
  bgRed: `\x1b[41m${args.join(' ')}\x1b[0m`,      // Red background
  bgGreen: `\x1b[42m${args.join(' ')}\x1b[0m`,    // Green background
  bgYellow: `\x1b[43m${args.join(' ')}\x1b[0m`,   // Yellow background
  bgBlue: `\x1b[44m${args.join(' ')}\x1b[0m`,     // Blue background
  bgMagenta: `\x1b[45m${args.join(' ')}\x1b[0m`,  // Magenta background
  bgCyan: `\x1b[46m${args.join(' ')}\x1b[0m`,     // Cyan background
  bgWhite: `\x1b[47m${args.join(' ')}\x1b[0m`     // White background
});

// Example usage:
console.log(colorize('foo').red);   
console.log(colorize('foo', 'bar').bgBlue);   
console.log(colorize(colorize('foo').yellow, colorize('foo').green).bgWhite);

Output:

foo
foo bar
foo foo

Flowchart:

flowchart: Add special characters to text to print in color in the console

Live Demo:

See the Pen javascript-basic-exercise-65-1 by w3resource (@w3resource) on CodePen.


Improve this sample solution and post your code through Disqus

Previous: Write a JavaScript program to get the first non-null / undefined argument.
Next: Write a JavaScript program to perform right-to-left function composition.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/javascript-exercises/fundamental/javascript-fundamental-exercise-65.php