CodeNewbie Community 🌱

Cover image for Commit22 //#JavaScript30 - Day 9 [Console Tricks!]
Janet Webster
Janet Webster

Posted on

Commit22 //#JavaScript30 - Day 9 [Console Tricks!]

#webdev #fundamentals #javascript #shecoded

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>
Enter fullscreen mode Exit fullscreen mode

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!', '💩');
Enter fullscreen mode Exit fullscreen mode

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.

Shit string

    // Styled
    console.log('%c I am some great text', 
    'font-size: 50px; backgound:red; text-shadow: 10px 10px 0 blue');
Enter fullscreen mode Exit fullscreen mode

Third, running styles through the console log. The RED isn't showing up in mine on VSC.

Styled console log

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!')
Enter fullscreen mode Exit fullscreen mode

Turns the console message into a yellow yield sign message.

Warn console

console.error(`You've made a grave error!`)
Enter fullscreen mode Exit fullscreen mode

Turns the console message into a x red stop sign.

Error console

console.info(`I thought you should know!`);
Enter fullscreen mode Exit fullscreen mode

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.

Info console

console.assert(1 === 2, `That is wrong! Don't you know maths?`);
Enter fullscreen mode Exit fullscreen mode

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.

Assert console

const p = document.querySelector('p');
    console.assert(p.classList.contains('ouch'), 'No, it does not contain that!')
Enter fullscreen mode Exit fullscreen mode

Assert can also be used to identify if something is contained, like above. p contains 'p', but it does not contain 'ouch'.

Assert console contain

console.clear();
Enter fullscreen mode Exit fullscreen mode

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.

Clear console

console.log(p);
console.dir(p);
Enter fullscreen mode Exit fullscreen mode

Dir console will allow you to see everything on that element, so we are seeing everything on the paragraph element listed in the console.

Dir 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}`);
    });
Enter fullscreen mode Exit fullscreen mode

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.

Group console

And you can make them default to collapsed as well.

console.groupCollapsed(`${dog.name}`);
Enter fullscreen mode Exit fullscreen mode

Group collapsed console

    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');
Enter fullscreen mode Exit fullscreen mode

Count console will simply count how many times something is console logged.

Count console

console.time('fetching data');
    fetch('https://api.github.com/users/wesbos')
    .then(data => data.json())
    .then(data => {
      console.timeEnd('fetching data');
    });
Enter fullscreen mode Exit fullscreen mode

Time console gives you an amount of time for how long it took (in this example) to fetch the data.

Time console

console.table(dogs);
Enter fullscreen mode Exit fullscreen mode

We love this one! Table console displays the data in a nice clean table for you.

Table console

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)

Read next

doriansabitov profile image

Top Salesforce Automotive Apps

Dorian Sabitov -

baseqs profile image

Game

Barek -

bog2544 profile image

Interest

Bog2544 -

jasonbrown112 profile image

How Null's Brawl Game Could Be Good for Health

jasonbrown112 -