This video is part 2 of How to style console.log() output with CSS. In this video, I am going to explain about how can we create a generic logic so that we can easily style console log output and do it bit faster.
Issue Faced
So, right now in order to apply a css styling to multiple console.log() output, we would do something like this:
console.log("%cSome text here 1", "color:green" );
console.log("%cSome text here 2", "color:red" );
console.log("%cSome text here 3", "color:blue" );
console.log("%cSome text here 4", "color:green" );
console.log("%cSome text here 5", "color:red" );
console.log("%cSome text here 6", "color:blue" );
You can see in the above examples, only the console log text is changing and the style is being repeated multiple times. I think we can create a generic logic and just call few functions and pass the text as a parameter to those functions and that would handle the styling for us.
Solution
So first, we create a main logColor function:
function logColor(color, args) {
console.log("%c" + args.join(" "), "color:" + color);
}
Then we create a generic log object:
const log = {
green: (...args) => logColor("green", args),
red: (...args) => logColor("red", args),
blue: (...args) => logColor("blue", args),
};
and then we can call it like:
log.green("Some text here 1");
log.red("Some text here 2");
log.blue("Some text here 3");
As you can see, we can now use these methods anywhere in your project without typing %c (CSS format specifier) and color name part every time. Yay!
Please check out this video where the solution for this issue is explained in full details:
Wrap Up
I hope you will find this video useful and learn something new in the process. If you want to learn more HTML, CSS, JavaScript and web development tips & tricks, please make sure to subscribe on YouTube!