Console Hands-On 1

💻 Exercises

Complete these exercises using your browser's Console (F12):

This is a hands-on exercise that will help you understand console methods in JavaScript. For each exercise:

🤔 Think about how you would solve it
⌨️ Try writing the code in your brain 🧠 (or borrow someone else's)
👆 Click the exercise's button to see an example solution
🔄 Compare your approach with the example

Remember: There are often multiple valid ways to solve these exercises!

📝 Exercise 1: Basic Logging

Tasks:

Log your name using console.log()
Log a warning message about battery level
Log an error message about connection failure

  console.log('Your name here');
  console.warn('Warning: Battery at 10%');
  console.error('Error: Connection failed');

🎨 Exercise 2: Styled Output

Create a console message that:

Uses a blue color
Has a font size of 20px
Is bold

  console.log('%cYour styled message here', 'color: blue; font-size: 20px; font-weight: bold');

📊 Exercise 3: Grouping

Create a grouped console output for a car object with:

Main group named "Car Details"
Basic info (model, year)
Nested group for "Technical Specs"

  console.group('Car Details');
  console.log('Model: [Your car model]');
  console.log('Year: [Year]');
  console.group('Technical Specs');
  console.log('Engine: [Engine details]');
  console.log('Power: [Power details]');
  console.groupEnd();
  console.groupEnd();

📊 Exercise 4: Table of Superhero Bugs

Create a table of debugging superheroes:

Use console.table() to show bug-fighting heroes
Include: name, superpower, bugsSquashed
Add at least 3 debugging champions

  const debugHeroes = [
    { name: 'Captain Console', superpower: 'Log Vision', bugsSquashed: 9001 },
    { name: 'The Debuginator', superpower: 'Breakpoint Mastery', bugsSquashed: 8000 },
    { name: 'Stack Trace Girl', superpower: 'Error Whispering', bugsSquashed: 7500 }
  ];
  console.table(debugHeroes);

⏱️ Exercise 5: Debug Olympics

Create console timers for a Debug Olympics:

Start timer "BugHunting"
Find bugs for 2 seconds
Start timer "CodeSprinting"
Sprint for 1 second
End both timers

  console.time('BugHunting');
  setTimeout(() => {
    console.time('CodeSprinting');
    setTimeout(() => {
    console.timeEnd('CodeSprinting');
    console.timeEnd('BugHunting');
    }, 1000);
  }, 2000);

😄 Exercise 6: Console Comedy Club

Create funny console messages:

Use different console styles
Make at least one dad joke
Include emoji 🐛

  console.log('%cWhy do programmers prefer dark mode?', 'color: #FF69B4; font-size: 16px');
  console.log('%cBecause light attracts bugs! 🐛', 'color: #4CAF50; font-size: 20px; font-weight: bold');
  console.warn('Warning: Dad joke overload detected! 😄');