IN-CLASS PRACTICAL (2 Hours) Lab Theme: Loops + DOM + Events FOR vs DO-WHILE (Different Purpose)

Marks Processing Lab (FOR vs DO-WHILE)

Students will build a simple form-based marks processor using Bootstrap, then apply DOM access, event handling, variables, operators, and two different loop roles: DO-WHILE (total & average) and FOR (PASS/FAIL counting).

Start Practical Submission

Class Flow

Type → Save → Refresh → Verify. Repeat for every task.
1) Setup 2) HTML + Form 3) JS (DOM + Events) 4) Loops Output

Outcomes

Target
  • Read input using getElementById()
  • Handle click using addEventListener()
  • Convert string → number (Number())
  • DO-WHILE → total & average
  • FOR → count PASS/FAIL
  • Output in Console + on page

Setup

Tools
  • VS Code
  • Chrome / Edge
  • Console: F12
  • Files: index.html, script.js

Rule of Thumb

Pro Tip
  • Label every console.log()
  • Keep IDs exactly same (avoid typo)
  • Type your JS (don’t paste) for learning
  • Use Step 1 first, then Step 2

IN-CLASS PRACTICAL TASKS

Students create their own folder + files and follow tasks below.
Pair / Small group allowed (2–3 students)
Task 1 Setup

Create folder and files

Student action:
  1. Create folder: RegNo_Marks_Loop_Lab
  2. Create files: index.html and script.js
  3. Open folder in VS Code
Example:
10DDT23F1705_Marks_Loop_Lab
Task 2 Starter HTML (Bootstrap CDN CSS)
Copy into index.html.
index.html Starter (Copy allowed) 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marks Processing Lab</title>

  <!-- Bootstrap CDN CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

  <div class="container py-5">
    <div class="row justify-content-center">
      <div class="col-lg-7">

        <div class="card shadow-sm">
          <div class="card-body">
            <h1 class="h5 mb-2">Marks Processing Lab</h1>
            <p class="text-muted mb-3">
              Enter marks (comma separated). Use Step 1 first, then Step 2.
            </p>

            <div class="mb-3">
              <label class="form-label">Marks (comma separated)</label>
              <input type="text" id="marks" class="form-control" placeholder="e.g. 60,45,80,30">
              <div class="form-text">PASS rule: mark ≥ 50</div>
            </div>

            <div class="d-flex flex-wrap gap-2">
              <button id="btnDoWhile" class="btn btn-success">Step 1: Total & Average (DO-WHILE)</button>
              <button id="btnFor" class="btn btn-primary">Step 2: Count PASS/FAIL (FOR)</button>
              <button id="btnClear" class="btn btn-dark">Clear</button>
            </div>

            <hr>

            <div id="output" class="alert alert-secondary mb-0">
              Result will appear here
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- Bootstrap JS (for components) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Your JS file -->
  <script src="script.js"></script>
</body>
</html>
Verification:
  1. Open index.html in Chrome/Edge
  2. Ensure inputs + 3 buttons appear
  3. Open Console (F12) and keep it open
Task 3 JS Connection Test
In script.js, TYPE:
script.js TYPE (copy disabled) 
console.clear();
console.log("✅ script.js connected");
Verification:
Save → Refresh → Console shows ✅ script.js connected.
Task 4 DOM Access (Get Elements)
In script.js, TYPE:
script.js TYPE (copy disabled) 
const marksInput = document.getElementById("marks");
const btnDoWhile = document.getElementById("btnDoWhile");
const btnFor     = document.getElementById("btnFor");
const btnClear   = document.getElementById("btnClear");
const output     = document.getElementById("output");

console.log(marksInput, btnDoWhile, btnFor, btnClear, output);
Verification:
Refresh → ensure Console logs are NOT null.
Important:
Kalau mana-mana keluar null, itu sebab ID tak match atau JS load sebelum HTML.
Task 5 Event Handling (Click)
Bind events safely (TYPE):
script.js TYPE (copy disabled) 
document.addEventListener("DOMContentLoaded", function () {
  btnDoWhile.addEventListener("click", function () {
    console.log("✅ Step 1 clicked");
  });

  btnFor.addEventListener("click", function () {
    console.log("✅ Step 2 clicked");
  });

  btnClear.addEventListener("click", function () {
    console.log("✅ Clear clicked");
  });
});
Verification:
Refresh → click each button → Console shows the correct log.
Task 6 Helper Function (Input → Array)
TYPE this helper (for reuse):
script.js TYPE (copy disabled) 
function getMarksArray() {
  let text = marksInput.value;
  return text.split(",").map(x => Number(x.trim()));
}
Verification:
In Console type: getMarksArray() after entering 60,45,80. You should see [60,45,80].
Task 7 Step 1 Function: DO-WHILE (Total & Average)
TYPE function for Step 1:
script.js TYPE (copy disabled) 
function calculateStats() {

  console.clear();
  console.log("=== DO-WHILE: TOTAL & AVERAGE ===");

  let marks = getMarksArray();

  let i = 0;
  let total = 0;

  do {
    total += marks[i];
    i++;
  } while (i < marks.length);

  let average = total / marks.length;

  console.log("Total =", total);
  console.log("Average =", average.toFixed(2));

  output.className = "alert alert-info mb-0";
  output.innerHTML =
    "Total Marks = <b>" + total + "</b><br>" +
    "Average Marks = <b>" + average.toFixed(2) + "</b>";
}
Verification:
Enter 60,45,80,30 → click Step 1 → output shows total & average.
Task 8 Step 2 Function: FOR (Count PASS/FAIL)
TYPE function for Step 2:
script.js TYPE (copy disabled) 
function countPassFail() {

  console.clear();
  console.log("=== FOR LOOP: PASS / FAIL COUNT ===");

  let marks = getMarksArray();

  let pass = 0;
  let fail = 0;

  for (let i = 0; i < marks.length; i++) {
    if (marks[i] >= 50) {
      pass++;
      console.log("Mark", i + 1, "=", marks[i], "→ PASS");
    } else {
      fail++;
      console.log("Mark", i + 1, "=", marks[i], "→ FAIL");
    }
  }

  console.log("Total PASS =", pass);
  console.log("Total FAIL =", fail);

  output.className = "alert alert-success mb-0";
  output.innerHTML =
    "Total PASS = <b>" + pass + "</b><br>" +
    "Total FAIL = <b>" + fail + "</b>";
}
Verification:
Click Step 2 → output shows PASS/FAIL count + Console shows each mark status.
Task 9 Clear Function
TYPE clear function:
script.js TYPE (copy disabled) 
function clearOutput() {
  console.clear();
  output.className = "alert alert-secondary mb-0";
  output.innerHTML = "Result cleared";
  marksInput.value = "";
}
Verification:
Click Clear → input cleared + output reset.
Task 10 Final Wiring (Connect Buttons → Functions)
Replace your click logs inside DOMContentLoaded with function calls (TYPE):
script.js TYPE (copy disabled) 
document.addEventListener("DOMContentLoaded", function () {

  btnDoWhile.addEventListener("click", calculateStats);
  btnFor.addEventListener("click", countPassFail);
  btnClear.addEventListener("click", clearOutput);

});
Final test cases:
  • 50,50,50
  • 10,20,30
  • 80,70,90,40
  • 49,50,51

Submission (Deliverables)