![Cover image for Commit22 //#JavaScript30 - Day 9 [Console Tricks!]](https://community.codenewbie.org/images/3tzIAnK3789apecjHLVAbgerNY1TCdBvsqy67LLQbKc/rs:fill:1000:420/g:sm/mb:500000/ar:1/aHR0cHM6Ly9jb21t/dW5pdHkuY29kZW5l/d2JpZS5vcmcvcmVt/b3RlaW1hZ2VzL3Vw/bG9hZHMvYXJ0aWNs/ZXMvaWMycTc4anox/YmxidTg4M2w1dHku/anBn)
Photo of my VSC console
I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!
Today's challenge comes from JavaScript30.
Doesn't look as fun as yesterday's challenge, but we will slog through it!
Last night I went to my first week night practice since before the pandemic. It was really good to prepare with my teammates before our game this Saturday out in Asheville. Today I am pretty dead though. Just sore and tired and having a hard time focusing.
Yesterday I also heard back from a company that I've been in discussions with. They are bringing me in for another round, so I have a lot of excitement and anxiety swirling around that. I'll be meeting with my career coach to properly plan for it and make sure I have all my remaining questions ready.
So yeah! Lots of excitement and anxiety in general right now between that and the game tomorrow. I'm playing in the B team game and then I'll be reffing the A team game (5+hrs on skates!). Which... then makes it hard for me to properly eat and feed myself to make sure I'm staying on my weight gain trajectory. All of that to say, I'm having a hard time focusing today. Anyways... enough about all of that. Let's dive in!
JavaScript30 - Day 9
<body>
<p onClick="makeGreen()">×BREAK×DOWN×</p>
<script>
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
function makeGreen() {
const p = document.querySelector('p');
p.style.color = '#BADA55';
p.style.fontSize = '50px';
}
</script>
</body>
This is what we are starting off with today. Pretty basic. When you click the text it applies the styles listed in the makeGreen function.
From my quick preview of this lesson it seems we are just running a lot of console.log types and learning some interesting tips/tricks in JavaScript.
// Regular
console.log('hello');
// Interpolated
console.log('Hello, I am a %s string!', '💩');
The first one, the regular console log! The second one I've never seen before is called the Interpolated console log where we run the %s through it.
// Styled
console.log('%c I am some great text',
'font-size: 50px; backgound:red; text-shadow: 10px 10px 0 blue');
Third, running styles through the console log. The RED isn't showing up in mine on VSC.
It appears to be because I function in "dark mode" for my console. Anyways, you have to put %c in front of what you want to style, then in your second argument you type in the styles.
console.warn('Oh noooooo!')
Turns the console message into a yellow yield sign message.
console.error(`You've made a grave error!`)
Turns the console message into a x red stop sign.
console.info(`I thought you should know!`);
This one should turn your console message into a blue (i) icon message. My console doesn't do this and I'm only using Chrome at the moment. It still prints the message.
console.assert(1 === 2, `That is wrong! Don't you know maths?`);
The assert console log will run the message if the assertion you are making is wrong. So if this was change to 1 === 1, then message in back ticks would not display.
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'No, it does not contain that!')
Assert can also be used to identify if something is contained, like above. p contains 'p', but it does not contain 'ouch'.
console.clear();
Clear will clear your console log. This will clear any script generated prior to it. So you could place this at the bottom of your JS file if you don't want anyone to see your console messages.
console.log(p);
console.dir(p);
Dir console will allow you to see everything on that element, so we are seeing everything on the paragraph element listed in the console.
dogs.forEach(dog => {
console.group(`${dog.name}`);
console.log(`This is ${dog.name} and they are ${dog.age} years old. Which is ${dog.age * 7} dog years old.`);
console.groupEnd(`${dog.name}`);
});
Group console is a great way to group a bunch of console log messages together. Now.. my console log message is already combined into one cuz I went off script, but you can see how it would function in the screen shot.
And you can make them default to collapsed as well.
console.groupCollapsed(`${dog.name}`);
console.count('Wes');
console.count('Wes');
console.count('Wes');
console.count('Sew');
console.count('Wes');
console.count('Wes');
console.count('Sew');
console.count('Sew');
console.count('Sew');
console.count('Sew');
console.count('Sew');
console.count('Sew');
Count console will simply count how many times something is console logged.
console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
.then(data => data.json())
.then(data => {
console.timeEnd('fetching data');
});
Time console gives you an amount of time for how long it took (in this example) to fetch the data.
console.table(dogs);
We love this one! Table console displays the data in a nice clean table for you.
That's it! Man he should have called this Console Cardio! Cuz that's what it felt like.
Check out the GitHub Repo here
Do you have any fun tips or tricks to share? Post in the comments below!
Top comments (0)