javascript
exercises
exercises.js⚡javascript
/**
* ============================================
* 1.1 Introduction to JavaScript - Exercises
* ============================================
*
* Complete these exercises to practice what you learned.
* Each exercise has instructions and a space for your solution.
*
* HOW TO USE:
* 1. Read the exercise description
* 2. Write your code in the space provided
* 3. Run the code in browser console or with an HTML file
* 4. Check if your output matches the expected output
* 5. Solutions are at the bottom (try not to peek!)
*/
// ============================================
// EXERCISE 1: Hello World
// ============================================
// Print "Hello, World!" to the console
// YOUR CODE HERE:
// Expected Output: Hello, World!
// ============================================
// EXERCISE 2: Multiple Console Logs
// ============================================
// Print your name, age, and favorite programming language
// on separate lines
// YOUR CODE HERE:
// Expected Output (example):
// John
// 25
// JavaScript
// ============================================
// EXERCISE 3: Console Warning and Error
// ============================================
// Create a warning message saying "Low battery!"
// Create an error message saying "Connection failed!"
// YOUR CODE HERE:
// ============================================
// EXERCISE 4: Console Table
// ============================================
// Create an array of 3 objects, each with properties:
// - fruit (string)
// - color (string)
// - price (number)
// Display them using console.table()
// YOUR CODE HERE:
// ============================================
// EXERCISE 5: Console Group
// ============================================
// Create a console group called "My Computer"
// Inside the group, log:
// - Brand: (your computer brand)
// - RAM: (your RAM)
// - OS: (your operating system)
// Close the group
// YOUR CODE HERE:
// ============================================
// EXERCISE 6: Timing Code
// ============================================
// Use console.time() and console.timeEnd() to measure
// how long it takes to run a loop from 0 to 100000
// Name your timer "My Loop Timer"
// YOUR CODE HERE:
// ============================================
// EXERCISE 7: Console Count
// ============================================
// Create a loop that runs 3 times
// Use console.count() with label "Iteration" inside the loop
// YOUR CODE HERE:
// Expected Output:
// Iteration: 1
// Iteration: 2
// Iteration: 3
// ============================================
// EXERCISE 8: Check Types
// ============================================
// Use typeof to check and log the type of each value:
// - 42
// - "Hello"
// - true
// - undefined
// - null
// - {}
// - []
// YOUR CODE HERE:
// ============================================
// EXERCISE 9: Basic Math
// ============================================
// Calculate and log the following:
// a) Sum of 156 and 289
// b) Product of 17 and 23
// c) 1000 divided by 8
// d) Remainder of 97 divided by 10
// e) 2 to the power of 10
// YOUR CODE HERE:
// ============================================
// EXERCISE 10: Call Stack Practice
// ============================================
// Create three functions: levelOne, levelTwo, levelThree
// levelOne should call levelTwo
// levelTwo should call levelThree
// levelThree should log "Bottom of the stack!"
// Call levelOne to start the chain
// YOUR CODE HERE:
// Expected Output:
// Bottom of the stack!
// ============================================
// EXERCISE 11: Console Assert
// ============================================
// Create a variable called score with value 85
// Use console.assert to check:
// a) score is greater than 50 (message: "Failed: Score too low")
// b) score is greater than 90 (message: "Score is not an A")
// c) score is a number (message: "Score must be a number")
// YOUR CODE HERE:
// ============================================
// EXERCISE 12: Console Trace
// ============================================
// Create a function called deepNested that:
// 1. Calls another function called middleFunction
// 2. middleFunction calls innerFunction
// 3. innerFunction uses console.trace() with message "Tracing call stack"
// Call deepNested() to see the trace
// YOUR CODE HERE:
// ============================================
// EXERCISE 13: Formatted Console Output
// ============================================
// Create an object called 'product' with:
// - name: "Laptop"
// - price: 999
// - inStock: true
// Log it using console.log() and console.dir()
// Note the difference in how they display
// YOUR CODE HERE:
// ============================================
// EXERCISE 14: Multiple Data Types
// ============================================
// Create variables of each type and log their typeof:
// - A number (store as 'myNumber')
// - A string (store as 'myString')
// - A boolean (store as 'myBoolean')
// - An object (store as 'myObject')
// - An array (store as 'myArray')
// - A function (store as 'myFunction')
// - undefined (store as 'myUndefined')
// YOUR CODE HERE:
// ============================================
// EXERCISE 15: Create Your Own HTML Page
// ============================================
// Create an HTML file that:
// 1. Has a heading saying "JavaScript Practice"
// 2. Has a button that, when clicked, shows an alert saying "Button clicked!"
// 3. Includes an external JavaScript file
//
// Write the HTML code as a comment below, then actually create the files
// YOUR HTML CODE (as comment):
/*
*/
// YOUR JAVASCRIPT CODE:
// ============================================
// BONUS EXERCISE: Debugger Statement
// ============================================
// Create a function called 'investigate' that:
// 1. Creates a variable x = 10
// 2. Has a debugger statement
// 3. Multiplies x by 2
// 4. Has another debugger statement
// 5. Returns x
// Call the function with DevTools open to step through
// YOUR CODE HERE:
// ============================================
// ============================================
// SOLUTIONS
// (Scroll down when ready)
// ============================================
// ============================================
/*
*/
// ============================================
// SOLUTION 1
// ============================================
// console.log("Hello, World!");
// ============================================
// SOLUTION 2
// ============================================
/*
console.log("John");
console.log(25);
console.log("JavaScript");
*/
// ============================================
// SOLUTION 3
// ============================================
/*
console.warn("Low battery!");
console.error("Connection failed!");
*/
// ============================================
// SOLUTION 4
// ============================================
/*
const fruits = [
{ fruit: "Apple", color: "Red", price: 1.50 },
{ fruit: "Banana", color: "Yellow", price: 0.75 },
{ fruit: "Grape", color: "Purple", price: 2.00 }
];
console.table(fruits);
*/
// ============================================
// SOLUTION 5
// ============================================
/*
console.group("My Computer");
console.log("Brand: Dell");
console.log("RAM: 16GB");
console.log("OS: Windows 11");
console.groupEnd();
*/
// ============================================
// SOLUTION 6
// ============================================
/*
console.time("My Loop Timer");
for (let i = 0; i < 100000; i++) {
// Empty loop
}
console.timeEnd("My Loop Timer");
*/
// ============================================
// SOLUTION 7
// ============================================
/*
for (let i = 0; i < 3; i++) {
console.count("Iteration");
}
*/
// ============================================
// SOLUTION 8
// ============================================
/*
console.log(typeof 42); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
*/
// ============================================
// SOLUTION 9
// ============================================
/*
console.log("Sum:", 156 + 289); // 445
console.log("Product:", 17 * 23); // 391
console.log("Division:", 1000 / 8); // 125
console.log("Remainder:", 97 % 10); // 7
console.log("Power:", 2 ** 10); // 1024
*/
// ============================================
// SOLUTION 10
// ============================================
/*
function levelOne() {
levelTwo();
}
function levelTwo() {
levelThree();
}
function levelThree() {
console.log("Bottom of the stack!");
}
levelOne();
*/
// ============================================
// SOLUTION 11
// ============================================
/*
const score = 85;
console.assert(score > 50, "Failed: Score too low");
console.assert(score > 90, "Score is not an A"); // This will show the message
console.assert(typeof score === 'number', "Score must be a number");
*/
// ============================================
// SOLUTION 12
// ============================================
/*
function deepNested() {
middleFunction();
}
function middleFunction() {
innerFunction();
}
function innerFunction() {
console.trace("Tracing call stack");
}
deepNested();
*/
// ============================================
// SOLUTION 13
// ============================================
/*
const product = {
name: "Laptop",
price: 999,
inStock: true
};
console.log(product);
console.dir(product);
*/
// ============================================
// SOLUTION 14
// ============================================
/*
let myNumber = 42;
let myString = "Hello";
let myBoolean = true;
let myObject = { key: "value" };
let myArray = [1, 2, 3];
let myFunction = function() { return "Hi"; };
let myUndefined;
console.log("myNumber:", typeof myNumber);
console.log("myString:", typeof myString);
console.log("myBoolean:", typeof myBoolean);
console.log("myObject:", typeof myObject);
console.log("myArray:", typeof myArray);
console.log("myFunction:", typeof myFunction);
console.log("myUndefined:", typeof myUndefined);
*/
// ============================================
// SOLUTION 15 - HTML
// ============================================
/*
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Practice</title>
</head>
<body>
<h1>JavaScript Practice</h1>
<button onclick="handleClick()">Click Me</button>
<script src="exercises.js"></script>
</body>
</html>
*/
// SOLUTION 15 - JavaScript
/*
function handleClick() {
alert("Button clicked!");
}
*/
// ============================================
// BONUS SOLUTION
// ============================================
/*
function investigate() {
let x = 10;
debugger;
x = x * 2;
debugger;
return x;
}
investigate(); // Run with DevTools open
*/