Skip to content

Instantly share code, notes, and snippets.

@Masheen88

Masheen88/colorfulConsoleLogs.js

Last active September 4, 2024 19:33
Show Gist options
  • Save Masheen88/eb0ddb3351a39799158dd5705f36a58a to your computer and use it in GitHub Desktop.
Save Masheen88/eb0ddb3351a39799158dd5705f36a58a to your computer and use it in GitHub Desktop.
Download ZIP
Colorful Console Logs!
Raw
colorfulConsoleLogs.js
//NOTE colored console log
//Colors the console log text blue and the font size 30px
someCoolVariable = "Hello World!";
//Outputs red text
// `Text/Variables/Etc..`,`CSS Styles`
console.log(`%c Hello World!`, `color: red;`); // %c is a placeholder for css styling
// This test is in white
console.log(
`%c
${someCoolVariable} 123456
`,
`color: white;`
);
// Outputs blue text
console.log(
`%c
${someCoolVariable} 123
`,
`color: blue;`
);
//Console log with additional css styling flash colors yellow and blue
console.log(
`%c
${someCoolVariable} 123
`,
`color: blue; font-size: 16px; -webkit-text-stroke: 0.25px white;`
);
const myElement = document.getElementById("SomeNiceText");
const myButton = document.getElementById("myButton");
const myBody = document.getElementById("myBody");
const fragment = document.createDocumentFragment();
console.log("This is my fragment:", fragment);
const li = fragment
.appendChild(document.createElement("section"))
.appendChild(document.createElement("ul"))
.appendChild(document.createElement("li"));
li.textContent = "hello world";
// console.log("This is my element:", myElement.innerHTML);
// This adds an event listencing on click to my button
myButton.addEventListener("click", (event) => {
console.log("This is my HTML text:", myElement); //This logs my element to the console
// myBody.appendChild(myElement);
myBody.appendChild(fragment);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment