NS
Guest Mode:

BCA Student Stories & UpdatesLive

Live GitHub Pages
You
Your StorySign in & share
Er. Manoj Kumar
D5
Er. ManojActive nowPages
Day 23Control Flow2 Hours Practical
Push to GitHub to Complete

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

Conditional statements direct the flow of program execution based on runtime conditions. When programs evaluate user inputs or calculation outputs, conditionals determine which branch of code executes.

Interactive Learning Roadmap

Day 23 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Implement multi-branch decision trees using if, else if, and else.
✔Construct semester grade categorizers (Grade A+, A, B, C, F) based on percentage.
✔Use switch...case statements with break and default clauses for discrete matching.
✔Evaluate truthy and falsy values (0, empty string, null, undefined, NaN).
Day 23 MasterclassControl Flow

Control Flow: Decision Making with if, else if, else & switch Statements — Comprehensive Practical Guide

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

Real-World Purpose Aur Zaroorat

Conditional statements direct the flow of program execution based on runtime conditions. When programs evaluate user inputs or calculation outputs, conditionals determine which branch of code executes.

if block: Executes only when its condition expression resolves to truthy.
else if: Tests consecutive mutually exclusive conditions when previous tests fail.
else: Acts as the fallback bucket when all preceding conditions evaluate to false.
switch (val): Compares a value against multiple case clauses using strict equality (===).
break statement: Crucial in switch cases to terminate execution and prevent accidental fall-through.
default clause: The fallback branch in a switch statement if no case matches.
Dimaag Mein Bithane Ka Model

"Think of conditional branching like a railway junction switch: based on the destination code signal, the track physically shifts to direct the train down track A, track B, or the main line."

💡 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 marks are classified into letter grades, and how a switch evaluates day schedules.

Grading Engine Using if-else and switch Casehtml
<!DOCTYPE html>
<html>
<body>
  <script>
    const score = 84;
    let letterGrade = "";

    if (score >= 90) {
      letterGrade = "A+";
    } else if (score >= 75) {
      letterGrade = "A";
    } else if (score >= 60) {
      letterGrade = "B";
    } else {
      letterGrade = "C";
    }
    console.log(`Score ${score} receives Grade: ${letterGrade}`);

    // Switch case example
    const dayOfWeek = "Monday";
    switch (dayOfWeek) {
      case "Monday":
        console.log("Schedule: BCA BCS-011 Practical Lab");
        break;
      case "Wednesday":
        console.log("Schedule: Mathematics Tutorial");
        break;
      default:
        console.log("Schedule: Self-Study & Revision");
    }
  </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
1Create Project Folder & Open in VS Code

Open ⊞ Windows Terminal or Command Prompt on your PC and execute:

Windows 11 Terminal / PowerShell
1$
mkdir bca-day-23
Create a new project folder (bca-day-23)
2$
cd bca-day-23
Change working directory to bca-day-23
3$
code .
Launch this folder immediately in Visual Studio Code
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)

💡 Tip: The command code . immediately opens the new project folder inside Visual Studio Code.

2Create index.html & Paste Starter Template

In VS Code Explorer (Ctrl + Shift + E), click New File, name it index.html, and paste this base template:

index.htmlhtml
<!DOCTYPE html>
<html>
<body>
  <script>
    const marks = 78;
    let award = "";

    // Task 1: Construct if-else if-else chain
    
    // Task 2: Log the final award result
    
  </script>
</body>
</html>
3Implement Practical Tasks in VS Code (Checklist)
0 / 2 Checked
Task 1

Construct if-else if grading chain

Check if marks >= 75 to assign award = "Distinction", else if marks >= 60 to assign award = "First Class", else award = "Pass".

Syntax / Hint: if (marks >= 75) { award = "Distinction"; } else if (marks >= 60) { award = "First Class"; } else { award = "Pass"; }
Task 2

Output grade to console

Log the award variable using console.log.

Syntax / Hint: console.log(award);
4Test & Preview Locally on Your PC
  • Right-click index.html in VS Code and select "Open with Live Server".
  • Alternatively, open File Explorer, navigate to bca-day-23, and double-click index.html to view in Google Chrome or Edge.
  • Verify all elements and styles look correct in the browser before pushing!
Code Complete in VS Code? Next Step:After implementing and verifying your code in VS Code, proceed to Step 3 (Bug Hunt) and Step 4 (Viva Check) before executing git push in Step 5!
Interactive Bug Detective

Spot the Bug: Missing break in switch Statement (Fall-through)

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

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
const role = "student";
2
let accessLevel = "";
3
4
switch (role) {
5
case "student":
6
accessLevel = "Read Only";
7
// Missing break!
8
case "admin":
9
accessLevel = "Full Access";
10
break;
11
}
12
console.log("Access Level:", accessLevel); // Prints: Full Access! (Dangerous bug)
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Without a break statement, JavaScript execution falls through to subsequent case clauses regardless of whether they match.

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

📝Independent Practice: Assignment

📄 fee-engine.html

University Traffic Light / Fee Discount Engine

  • •Create day-23/index.html with interactive conditional logic.
  • •Implement an enrollment fee discount engine based on student category (General: 0%, OBC: 10%, SC/ST: 25%).
  • •Add input validation ensuring scores fall strictly between 0 and 100.
  • •Use console.log to present a structured receipt summary.
Submission Evaluation Criteria: Ensure the code contains both an if-else if chain and a switch statement.
Exact Assignment Solution Code: fee-engine.html

Open Visual Studio Code on your PC (code .), create fee-engine.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 23 - University Fee Discount Engine</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;
    }
    .card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 16px;
      padding: 28px;
      max-width: 480px;
      width: 100%;
    }
    h1 { font-size: 20px; color: #38bdf8; margin-bottom: 12px; }
    .receipt {
      background: #0f172a;
      border: 1px dashed #334155;
      padding: 16px;
      border-radius: 8px;
      font-family: monospace;
      font-size: 13px;
      color: #38bdf8;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>BCA Fee Discount Engine</h1>
    <div class="receipt" id="receipt">Generating fee structure receipt...</div>
  </div>

  <script>
    const standardSemesterFee = 7500; // in INR
    const studentCategory = "OBC";     // "General", "OBC", "SC", "ST"
    const meritScore = 85;             // 0 to 100

    let discountPercentage = 0;

    // Switch case for category concession
    switch (studentCategory.toUpperCase()) {
      case "SC":
      case "ST":
        discountPercentage = 25;
        break;
      case "OBC":
        discountPercentage = 10;
        break;
      case "GENERAL":
      default:
        discountPercentage = 0;
        break;
    }

    // Additional merit bonus (if meritScore >= 80, add extra 5%)
    if (meritScore >= 80 && meritScore <= 100) {
      discountPercentage += 5;
    }

    const discountAmount = (standardSemesterFee * discountPercentage) / 100;
    const finalFeePayable = standardSemesterFee - discountAmount;

    const receiptText = `==================================
   IGNOU BCA SEMESTER 1 FEE RECEIPT
==================================
Base Semester Fee : ₹${standardSemesterFee}
Student Category  : ${studentCategory}
Merit Score       : ${meritScore}/100
Total Discount    : ${discountPercentage}%
Discount Amount   : -₹${discountAmount}
----------------------------------
Final Fee Payable : ₹${finalFeePayable}
==================================`;

    console.log(receiptText);
    document.getElementById("receipt").innerHTML = receiptText.replace(/\n/g, "<br>").replace(/ /g, "&nbsp;");
  </script>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

Which of the following values is NOT falsy in JavaScript?

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

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-23
Create a new project folder (day-23)
2$
cd day-23
Change working directory to day-23
3$
git checkout -b feature/day-23-conditionals
4$
git add index.html
5$
git commit -m "feat(day-23): add conditional branching and switch statements"
Commit staged changes with a descriptive message
6$
git push origin feature/day-23-conditionals
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ 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 23 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-23/ or bca-day-23/
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 23
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 23
4$
mkdir day-23
Create a new project folder (day-23)
5$
cd day-23
Change working directory to day-23
6$
# 3. Create your code file: index.html
7$
# (Write your Day 23 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 23: Control Flow: Decision Making with if, else if, else & switch 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 + V✨ 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-23/ 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
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/Day 13 Prior Lesson
└──index.html
day-14/Day 14 Prior Lesson
└──index.html
day-15/Day 15 Prior Lesson
└──index.html
day-16/Day 16 Prior Lesson
└──index.html
day-17/Day 17 Prior Lesson
└──index.html
day-18/Day 18 Prior Lesson
└──index.html
day-19/Day 19 Prior Lesson
└──index.html
day-20/Day 20 Prior Lesson
└──index.html
└──styles.css
day-21/Day 21 Prior Lesson
└──index.html
day-22/Day 22 Prior Lesson
└──index.html
day-23/✨ CREATE THIS FOLDER FOR TODAY (Day 23)
└──index.htmlMust contain: if (...) { ... }, else if, switch, case
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 23 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 22: JavaScript Operators: Arithmetic, Strict Equality (===) & Logical Conditions first.

Complete Day 22 First
Day 22: JavaScript Operators: Arithmetic, Strict Equality (===) & Logical Conditions
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal