JavaScript Programming Labs

Master JavaScript through hands-on coding challenges. Write real code, get instant feedback, and build practical web development skills.

JavaScript Fundamentals - Module 1

Write actual JavaScript code to solve each challenge. Your code is validated for correctness.

Lab 1: Variables & Data Types
Beginner
Coding Challenge
Your Task: Create a JavaScript program that stores and displays personal profile information using different variable declarations and data types.

Detailed Requirements:

1. String variable "name" using let - Store a person's full name (e.g., "Sarah Connor"). In JavaScript, strings can be created using single quotes 'text', double quotes "text", or template literals `text`. Use let for variables that may be reassigned later.

2. Number variable "age" using const - Store the person's age as a number (e.g., 28). JavaScript has only one number type that handles both integers and decimals. Use const for values that won't change - this prevents accidental reassignment and makes your intent clear.

3. Number variable "height" using let - Store height in meters with decimal precision (e.g., 1.72). Unlike some languages, JavaScript doesn't distinguish between integers and floats - both are simply "number" type. You can verify with typeof height.

4. Boolean variable "isStudent" using const - Store true or false to indicate student status. Note: JavaScript booleans are lowercase (true/false), unlike some languages. Booleans are essential for conditional logic and control flow.

Output Requirements:
Use console.log() to display each variable with a descriptive label. You can use template literals for clean output: console.log(`Name: ${name}`). Alternatively, use string concatenation with the + operator.

💡 Pro Tips:
let - Use for variables that will be reassigned
const - Use for variables that won't change (preferred when possible)
var - Older syntax, avoid in modern JavaScript (function-scoped, can cause bugs)
• Template literals use backticks: `Hello ${name}`
• Use typeof variable to check a variable's type
• Semicolons are optional but recommended for consistency

⚠️ Common Mistakes to Avoid:
• Don't use var - it has confusing scoping behavior
• Don't forget quotes around strings
• Don't capitalize true/false (it's not True/False)

Expected Output:
Name: Sarah Connor Age: 28 Height: 1.72 Is Student: true

Requirements Checklist

Declare a string variable "name" using let or const
Declare a number variable "age" using const
Declare a number variable "height" using let
Declare a boolean variable "isStudent"
Print all variables using console.log()
Code runs without errors
Console Output
// Click "Run Code" to execute your JavaScript // Your console.log() output will appear here
Hints & Tips
• String with let: let name = "Sarah Connor";
• Number with const: const age = 28;
• Decimal number: let height = 1.72;
• Boolean: const isStudent = true;
• Template literal output: console.log(`Age: ${age}`);
• Concatenation output: console.log("Age: " + age);
Progress: 0/6
Score: 0/100
0%

Lab Results

Review feedback below

Lab 2: Conditionals & Logic
Beginner
Coding Challenge
Your Task: Build a grade calculator that converts numeric scores to letter grades using conditional statements (if-else).

Detailed Requirements:

1. Declare a const variable "score" - Initialize with a test value between 0-100. Try different values (95, 82, 71, 65, 45) to test all grade paths. Use const since the score won't change during execution.

2. Declare a let variable "grade" - This will store the letter grade ('A', 'B', 'C', 'D', or 'F'). Use let because we'll assign a value inside the if-else blocks.

3. Implement grading logic using if-else chain:
   • if (score >= 90) → Grade A (Excellent - top performers)
   • else if (score >= 80) → Grade B (Good - above average)
   • else if (score >= 70) → Grade C (Average - meets expectations)
   • else if (score >= 60) → Grade D (Below Average - needs improvement)
   • else → Grade F (Failing - below 60)

4. Add pass/fail status: Any score of 60 or above is passing. Use a separate if-else or ternary operator to determine and print "PASSED" or "FAILED".

Key Concepts:
Order matters! Check from highest to lowest. Once a condition is true, remaining else-if blocks are skipped.
Comparison operators: >= (greater than or equal), > (greater than), === (strict equality), !== (strict inequality)
Ternary operator shortcut: const status = score >= 60 ? "PASSED" : "FAILED";

💡 Pro Tips:
• Always use === instead of == for comparison (strict equality avoids type coercion bugs)
• You can use a ternary operator for simple if-else: condition ? valueIfTrue : valueIfFalse
• Curly braces {} are optional for single-line if statements, but recommended for clarity

⚠️ Common Mistakes to Avoid:
• Using = (assignment) instead of === (comparison) in conditions
• Forgetting else if and using just if (would check all conditions)
• Not initializing the grade variable before using it

Expected Output:
Score: 85 Grade: B Status: PASSED

Requirements Checklist

Declare a const variable "score" with a test value
Use if statement to check for grade A (score >= 90)
Include else-if for grades B, C, D
Include else block for grade F
Print pass/fail status using a conditional
Code compiles and runs correctly
Console Output
// Click "Run Code" to execute your JavaScript
Hints & Tips
• Score declaration: const score = 85;
• Grade declaration: let grade;
• If syntax: if (score >= 90) { grade = "A"; }
• Else-if syntax: else if (score >= 80) { grade = "B"; }
• Ternary for status: const status = score >= 60 ? "PASSED" : "FAILED";
• Use === for strict equality comparison
Progress: 0/6
Score: 0/100
0%

Lab Results

Review feedback below

Lab 3: Loops & FizzBuzz
Intermediate
Coding Challenge
Your Task: Implement the famous FizzBuzz challenge - one of the most common programming interview questions that tests your understanding of loops, conditionals, and the modulo operator.

Detailed Requirements:

1. Create a for loop that iterates from 1 to 20 (inclusive).
   Syntax: for (let i = 1; i <= 20; i++) { ... }
   • let i = 1 - initialization (start at 1, use let for block scoping)
   • i <= 20 - condition (continue while i is 20 or less)
   • i++ - increment (add 1 to i after each iteration)

2. For each number, apply these rules IN THIS EXACT ORDER:
   • If divisible by BOTH 3 AND 5 → print "FizzBuzz"
   • Else if divisible by 3 only → print "Fizz"
   • Else if divisible by 5 only → print "Buzz"
   • Else → print the number itself

Key Concept - Modulo Operator (%):
The % operator returns the remainder after division. If i % 3 === 0, then i divides evenly by 3 (no remainder), meaning i IS divisible by 3.
Examples: 9 % 3 = 0 (divisible), 10 % 3 = 1 (not divisible), 15 % 5 = 0 (divisible)

⚠️ CRITICAL - Order Matters!
You MUST check FizzBuzz (both 3 AND 5) FIRST! Why? Numbers like 15 are divisible by both 3 and 5. If you check "Fizz" first, you'll print "Fizz" instead of "FizzBuzz" because the Fizz condition will match before reaching FizzBuzz.

💡 Pro Tips:
• Use let in for loops: for (let i = 1; ...) - this keeps i scoped to the loop
• Logical AND operator: && - both conditions must be true
• Logical OR operator: || - at least one condition must be true
• Alternative check for divisible by both: i % 15 === 0 (since 15 = 3 × 5)

⚠️ Common Mistakes to Avoid:
• Checking Fizz or Buzz before FizzBuzz
• Using var instead of let in the loop
• Forgetting === (using = instead, which assigns rather than compares)
• Off-by-one error: make sure you include 20 with <= not <

Expected Output (first 15 numbers):
1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz

Requirements Checklist

Create a for loop from 1 to 20 using let
Check FizzBuzz first (divisible by both 3 AND 5)
Check for Fizz (divisible by 3)
Check for Buzz (divisible by 5)
Print the number if none of the above
Output matches expected FizzBuzz pattern
Console Output
// Expected: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, 16, 17, Fizz, 19, Buzz
Hints & Tips
• For loop: for (let i = 1; i <= 20; i++) { }
• Check both first: if (i % 3 === 0 && i % 5 === 0)
• Alternative: if (i % 15 === 0) (since 15 = 3 × 5)
• Modulo example: 15 % 3 === 0 is true (15 ÷ 3 = 5, no remainder)
• Print number: console.log(i);
• Print text: console.log("Fizz");
Progress: 0/6
Score: 0/100
0%

Lab Results

Review feedback below