Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 31, 2021 03:07 pm GMT

How to style console.log();

I guess that your first code of JS was

console.log('Hello World')

even, mine was the same
same

So, have you wondered about styling it?

nevermind...

I am going to take the Discord warning message into account as an example

Discord Console Warning Message

Discord warning msg

  • If you have ever opened developer tools in Discord, you will find this warning msg from Discord... Check it out right now if you haven't (and listennn, don't paste any malicious code there)
  • So let's recreate the same warning message
  • Write some necessary HTML to link a JS file to it
  • Create a JS file and name it whatever you want
  • Now follow the steps below
console.log(text, styling)

When you style there will be two things you need to take note of.

  • text - Every text message starts with a prefix - %c; and it is a very important thing and without it, styling will not apply to the text
  • styling - Simple CSS

Let's head up to the code,

console.log('%cHold Up', 'color: #404EED; font-size: 60px; font-weight: bold;-webkit-text-stroke: 1px black;');console.log("%cIf someone told you to copy/paste something here you have an 11/10 chance you're being scammed", "color: black; font-size: 18px;")console.log("%cPasting anything in here could give attackers access to your Discord account.", "color: red; font-size: 18px; font-weight: bold;")

So, found this simple? If not you can dive into comments to ask questions...

Why not share your styling to the console.log(), I am very excited to see yours

Make sure to subscribe to my YouTube Channel I regularly upload some amazing web development videos...

Your support gives me motivation


Original Link: https://dev.to/snowbit/how-to-style-consolelog-3g2o

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To