Guest Mode:Sign in with Google to permanently link this practical to your student record.

BCA Student Stories & UpdatesLive

Live GitHub Pages

You

Your StorySign in & share

Er. ManojActive nowPages

Day 24Control Flow & Algorithms2 Hours Practical

Push to GitHub to Complete

Loops & Iteration: for, while, and for...of Statements

Loops automate repetitive tasks by executing a block of code multiple times until a specified termination condition is met. They are the backbone of algorithms, data processing, and DOM rendering.

Interactive Learning Roadmap

Day 24 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Write standard 3-part for loops: initialization, condition, increment.

✔Understand while loops and prevent infinite loops with reliable exit conditions.

✔Iterate through collections cleanly using modern for...of syntax.

✔Calculate cumulative totals, running averages, and generate multiplication tables.

Day 24 MasterclassControl Flow & Algorithms

Loops & Iteration: for, while, and for...of Statements — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

Loops automate repetitive tasks by executing a block of code multiple times until a specified termination condition is met. They are the backbone of algorithms, data processing, and DOM rendering.

for loop: Best when the number of iterations is known in advance: for (let i = 0; i < n; i++).

while loop: Best when looping until a condition changes dynamically: while (condition).

for...of: The cleanest modern ES6 way to iterate over iterable items (Arrays, Strings, Sets).

break: Immediately exits the loop regardless of condition.

continue: Skips the remainder of the current iteration and jumps to the next iteration.

Infinite loop trap: Forgetting to increment the loop counter freezes browser tabs.

Dimaag Mein Bithane Ka Model

"Think of a for loop like an automatic lap counter on an athletic track: Start at lap 0; check if laps < 10; run one lap; increase count by 1; stop when count reaches 10."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

See how loops calculate running sums and iterate over subject names without repetitive code.

Calculating Running Sums and Iterating Arrayshtml

<!DOCTYPE html>
<html>
<body>
  <script>
    // 1. Classic for loop: Sum 1 to 10
    let totalSum = 0;
    for (let i = 1; i <= 10; i++) {
      totalSum += i;
    }
    console.log("Sum of 1 to 10:", totalSum); // 55

    // 2. Modern for...of loop: Array traversal
    const bcaSubjects = ["Computer Basics", "C Programming", "Discrete Math", "Communication"];
    for (const subject of bcaSubjects) {
      console.log("BCA Subject:", subject);
    }
  </script>
</body>
</html>

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

2 Coding Tasks

Interactive Coding TestAuto-Evaluates as you type

Day 24 Practical Task Test Studio

Test Score:0 / 2 Passed

1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests

Task 1Generate multiplication table with for loop

Write a for loop with let i = 1 to i <= 10 printing i * 7 via console.log.

⏳ WAITING

Task 2Sum credits using for...of loop

Iterate over the credits array using for (const credit of credits) and add each to totalCredits.

⏳ WAITING

2. Type HTML & CSS Code:index.html

index.html

⚡ Real-Time Testing Active

Tab inserts 2 spaces • Live DOM refresh268 chars

Live Browser Output:

🔒 http://localhost:5500/index.html

Live

Renders live HTML & CSS typed on the left.

Interactive Bug Detective

Spot the Bug: The Fatal Infinite Loop

Tap or click on the exact line below that contains the error:

Click any code line

⚠️ Broken Code Inspector

Tap buggy line

let count = 5;

while (count > 0) {

console.log("Count is:", count);

// Missing: count--;

// Browser will freeze and crash!

}

Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Because count is never decremented, count > 0 remains true permanently, resulting in an infinite loop that maxes out CPU and crashes the browser tab.

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 marks-analyzer.html

Student Marksheet Statistical Analyzer

•Create day-24/index.html with an array of 6 student test scores.
•Use a for loop to calculate the highest score, lowest score, and average marks.
•Use a while loop to simulate an exam timer countdown from 10 to 0.
•Display all calculated statistics cleanly in the DevTools console.

Submission Evaluation Criteria: Ensure all loops include correct incrementors and exit conditions.

Exact Assignment Solution Code: marks-analyzer.html

Open Visual Studio Code on your PC (code .), create marks-analyzer.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BCA Day 24 - Student Marksheet Statistical Analyzer</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #0b1120;
      color: white;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    .analyzer-card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 16px;
      padding: 28px;
      max-width: 500px;
      width: 100%;
    }
    h1 { font-size: 20px; color: #38bdf8; margin-bottom: 12px; }
    pre {
      background: #0f172a;
      padding: 16px;
      border-radius: 8px;
      font-size: 13px;
      color: #34d399;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="analyzer-card">
    <h1>BCA Semester Marks Analyzer</h1>
    <pre id="output">Running statistical loops...</pre>
  </div>

  <script>
    // 6 Semester Subject Scores
    const subjectMarks = [78, 85, 92, 64, 88, 71];

    let sum = 0;
    let highest = subjectMarks[0];
    let lowest = subjectMarks[0];

    // For Loop: Compute statistics
    for (let i = 0; i < subjectMarks.length; i++) {
      const score = subjectMarks[i];
      sum += score;
      if (score > highest) highest = score;
      if (score < lowest) lowest = score;
    }

    const average = (sum / subjectMarks.length).toFixed(2);

    // While Loop: Simulated Exam Timer Countdown
    let timer = 5;
    const countdownSteps = [];
    while (timer > 0) {
      countdownSteps.push(`Exam Timer: ${timer}s remaining...`);
      timer--;
    }
    countdownSteps.push("Exam Timer: 0s - Time Up!");

    const result = `Marks Array: [${subjectMarks.join(", ")}]
Total Marks Scored: ${sum}/600
Highest Subject Mark: ${highest}
Lowest Subject Mark: ${lowest}
Average Percentage: ${average}%
--------------------------------
${countdownSteps.join("\n")}`;

    console.log(result);
    document.getElementById("output").textContent = result;
  </script>
</body>
</html>

Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

What is the main difference between a while loop and a do...while loop?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: html-css-projects

Windows 11 Terminal / VS Code

mainhtml-css-projects

~/html-css-projects

mkdir day-24

Create a new project folder (day-24)

cd day-24

Change working directory to day-24

git checkout -b feature/day-24-loops

git add index.html

git commit -m "feat(day-24): implement loops and array iteration algorithms"

Commit staged changes with a descriptive message

git push origin feature/day-24-loops

Push local commits directly to your remote GitHub repository

⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)

Completion Prerequisites VerificationIncomplete Steps

Google Login

✔ Required

VS Code Implementation

Step 4 Viva Check

Own GitHub Project

Required

Exact GitHub Setup Guide & Expected Structure

Day 24 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository

html-css-projects

Must be set to Public

2. Exact FolderNEW

day-24/ or bca-day-24/

Create inside repo root

3. Exact File NameREQUIRED

index.html

⚠️ No spaces or custom names

4. What to Submit Below

https://github.com/YOU/html-css-projects

Or direct link to index.html

Terminal Commands to Create & Push Day 24

mainhtml-css-projects

# 1. Enter your repository directory

cd html-css-projects

Change working directory to html-css-projects

# 2. Create the exact folder for Day 24

mkdir day-24

Create a new project folder (day-24)

cd day-24

Change working directory to day-24

# 3. Create your code file: index.html

# (Write your Day 24 homework code inside index.html)

# 4. Save, stage, commit and push to GitHub:

git add .

Stage all modified files and new assets for commit

10$

git commit -m "Day 24: Loops & Iteration: for, while, and for...of Statements"

Commit staged changes with a descriptive message

11$

git push origin main

Push local commits directly to your remote GitHub repository

⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)

How to Avoid "Could not find your practical code file" Errors:

1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.

2.Separate Day Folders: Create a new folder day-24/ for today so you don't overwrite previous days.

3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.

4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.

📁 github.com/YOUR_USERNAME/html-css-projects

Branch: main

README.md# BCA Practical Portfolio overview

day-01/Day 1 Prior Lesson— HTML5 Boilerplate & First Webpage

└──index.html

day-02/Day 2 Prior Lesson— Heading Hierarchy & Text Formatting

└──index.html

day-03/Day 3 Prior Lesson— Hyperlinks & Accessible Images

└──index.html

day-04/Day 4 Prior Lesson— Lists & Navigation Menus

└──index.html

day-05/Day 5 Prior Lesson— Tables & Tabular Data Presentation

└──index.html

day-06/Day 6 Prior Lesson— Semantic HTML5 Layout

└──index.html

day-07/Day 7 Prior Lesson— HTML Forms & Input Controls

└──index.html

day-08/Day 8 Prior Lesson— HTML5 Form Validation & Regex

└──index.html

day-09/Day 9 Prior Lesson— HTML5 Media: Audio, Video & Embeds

└──index.html

day-10/Day 10 Prior Lesson— Sprint 1 Capstone: Developer Resume

└──index.html

└──styles.css

day-11/Day 11 Prior Lesson— CSS Box Model (Content, Padding, Border, Margin)

└──index.html

day-12/Day 12 Prior Lesson— CSS Display Modes & Document Flow

└──index.html

day-13/Day 13 Prior Lesson— CSS Positioning (Static, Relative, Absolute, Fixed, Sticky)

└──index.html

day-14/Day 14 Prior Lesson— Flexbox: 1D Layouts & Main Axis Alignment

└──index.html

day-15/Day 15 Prior Lesson— Flexbox: Cross Axis Alignment & Flex Items

└──index.html

day-16/Day 16 Prior Lesson— CSS Grid: 2D Layouts & Template Columns

└──index.html

day-17/Day 17 Prior Lesson— CSS Grid: Spanning & Grid Template Areas

└──index.html

day-18/Day 18 Prior Lesson— Responsive Design & Media Queries (Mobile-First)

└──index.html

day-19/Day 19 Prior Lesson— CSS Transitions & Micro-Interactions

└──index.html

day-20/Day 20 Prior Lesson— Sprint 2 Capstone: Responsive University Campus Portal

└──index.html

└──styles.css

day-21/Day 21 Prior Lesson— JavaScript Introduction: <script>, Variables & Types

└──index.html

day-22/Day 22 Prior Lesson— JavaScript Operators: Arithmetic & Strict Equality

└──index.html

day-23/Day 23 Prior Lesson— Control Flow: if-else if & switch Statements

└──index.html

day-24/✨ CREATE THIS FOLDER FOR TODAY (Day 24)— Loops & Iteration: for, while & for...of

└──index.htmlMust contain: for (let i = ...), while (...), for (const item of items)

Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 24 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 23: Control Flow: Decision Making with if, else if, else & switch Statements first.

Complete Day 23 First

Day 23: Control Flow: Decision Making with if, else if, else & switch Statements

Curriculum & Practical Systems Authored by Er. Manoj Kumar

NextSem Academy • BCA Practical Learning Portal

BCA Student Stories & UpdatesLive

Loops & Iteration: for, while, and for...of Statements

Day 24 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

Loops & Iteration: for, while, and for...of Statements — Comprehensive Practical Guide

👨‍🏫3. Teacher Demonstration Code

2. Hands-On Practical Lab: Follow Instructions in VS Code

Day 24 Practical Task Test Studio

Spot the Bug: The Fatal Infinite Loop

Senior Developer Forensic Analysis:

📝Independent Practice: Assignment

Student Marksheet Statistical Analyzer

🎓4. Viva Check: Mandatory Conceptual Test

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Exact GitHub Setup Guide & Expected Structure

Student Learning Dashboard

Guest Student

Computer Competency Test (CBT)100 MCQs

Practical Lesson UpdatesCoding Labs Only

Professional & Social IntegrationsPortfolio & Network