Loops

What you'll learn

• How to create and use for loops for repetitive tasks
• How to implement while loops for conditional iterations
• How to use do-while loops that execute at least once
• How to control loop flow with break statements
• How to avoid infinite loops and debug loop logic

Total Time: 45-60 minutes

:warning: IMPORTANT: Before You Start

:warning: Warning DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files.

:computer: Getting Started (5 minutes)

1. In each exercise below, click the Stackblitz link and familiarize yourself with the interface
2. Review the demo file to understand the expected outcomes
3. Choose your development environment:
   • Online: Work directly in StackBlitz
   • Local: Download the template using the Download Project button

Demo - How Loops Work

View Loops Demo

:computer: Loop Exercises

Exercise One: For Loop Practice - Repeat Text (10 minutes)

Open Exercise 1 Template

Objective: Write a program that logs "giraffe" 5 times using a for loop

Instructions:

1. Open the template link above
2. Initialize a variable called i and set it to 1
3. Set the condition: i is less than or equal to 5 (use <=)
4. Set the update: i++
5. Inside the loop, log the word "giraffe" to the console

:bulb: Tip Loop Structure: for(i=1; i<=5; i++) { console.log("giraffe"); }

Be careful with your conditions! Double-check before running to avoid infinite loops that can crash your browser.

Expected Output:

Exercise 2: For Loop with Conditional - Even Numbers (10 minutes)

Open Exercise 2 Template

Objective: Write a program that logs only even numbers from 1 to 10 using a for loop

Instructions:

1. Open the template link above
2. Initialize a variable called i and set it to 1
3. Set the condition: i is less than or equal to 10 (use <=)
4. Set the update: i++
5. Inside the loop, use an if statement to check if i is even
6. Log only the even numbers to the console

:bulb: Tip Even Number Check: Use the modulus operator % to check if a number is even:

if (i % 2 === 0) {
    // This number is even
}

Expected Output:

Exercise 3: While Loop - Countdown (8 minutes)

Open Exercise 3 Template

Objective: Write a program that counts down from 20 by steps of 5 using a while loop

Instructions:

1. Open the template link above
2. Declare a variable called i and set it to 20
3. Create a while loop with condition: i > 0
4. Inside the loop:
   • Log the current value of i
   • Decrease i by 5 (use i = i - 5)

:bulb: Tip While Loop Structure:

while(i > 0) {
    console.log(i);
    i = i - 5;
}

Remember to update your variable inside the loop, or it will run forever!

Expected Output:

Exercise 4: Do-While Loop - Count Up (8 minutes)

Open Exercise 4 Template

Objective: Write a program that counts from 1 to 7 using a do-while loop

Instructions:

1. Open the template link above
2. Declare a variable called i and set it to 1
3. Create a do-while loop structure
4. Inside the loop:
   • Log the current value of i
   • Increment i by 1 (use i++)
5. Set the condition: i <= 7

:bulb: Tip Do-While vs While: A do-while loop always executes at least once before checking the condition. This is useful when you need to run code at least one time regardless of the condition.

Expected Output:

Exercise 5: For Loop with Break - PIN Guessing Game (10 minutes)

Open Exercise 5 Template

Objective: Create a PIN guessing game that allows exactly 4 attempts using a for loop with break

Instructions:

1. Open the template link above
2. Set a correct PIN as a string (e.g., "1234")
3. Create a for loop that runs 4 times (i <= 4)
4. Inside the loop:
   • Use prompt() to ask "What is the four digit pin number?"
   • Check if the guess matches the correct PIN
   • If correct: alert "Unlocked!" and use break to exit
   • If wrong: alert "Sorry, wrong pin!"
5. The program automatically stops after 4 attempts

:bulb: Tip Using Break: The break statement immediately exits the loop when the correct PIN is entered:

if (guess === correctPin) {
    alert("Unlocked!");
    break;  // Exit the loop early
}

Expected Outputs:

Step 1 - PIN Prompt:

Step 2 - Wrong PIN Alert:

Step 3 - Correct PIN Alert:

:white_check_mark: Required Elements Checklist

Before submitting, ensure your projects include:

• Exercise 1: For loop that logs "giraffe" exactly 5 times
• Exercise 2: For loop with if-else condition for even numbers (1-10)
• Exercise 3: While loop counting down from 20 by steps of 5
• Exercise 4: Do-while loop counting from 1 to 7
• Exercise 5: PIN guessing game with:
  • Maximum 4 attempts
  • Break statement to exit early
  • Proper alerts for correct/incorrect guesses

:mag: Troubleshooting Common Issues

:warning: Warning Infinite Loop Prevention:

• Always double-check your loop conditions before running
• Make sure your update statement changes the loop variable
• Use browser's stop/reload button if stuck in an infinite loop

:bulb: Tip Debugging Tips:

• Add console.log() statements to track your loop variable
• Test with smaller numbers first (e.g., loop 3 times instead of 100)
• Check that your comparison operators (<, >, <=, >=) are correct

:emoji: Project Submission (5 minutes)

:information_source: Ready to submit? Make sure you've:

1. Completed all 5 exercises
2. Tested each loop to verify correct output
3. Checked that no infinite loops occur

Submit Your Projects Here

Great job completing your loop exercises! These fundamental concepts will be essential for creating dynamic and interactive JavaScript applications.