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 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

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

Interactive Coding TestAuto-Evaluates as you type

Day 23 Practical Task Test Studio

Test Score:0 / 2 Passed

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

Task 1Construct 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".

⏳ WAITING

Task 2Output grade to console

Log the award variable using console.log.

⏳ WAITING

2. Type HTML & CSS Code:index.html

index.html

⚡ Real-Time Testing Active

Tab inserts 2 spaces • Live DOM refresh210 chars

Live Browser Output:

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

Live

Renders live HTML & CSS typed on the left.

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

const role = "student";

let accessLevel = "";

switch (role) {

case "student":

accessLevel = "Read Only";

// Missing break!

case "admin":

accessLevel = "Full Access";

break;

}

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

mainhtml-css-projects

~/html-css-projects

mkdir day-23

Create a new project folder (day-23)

cd day-23

Change working directory to day-23

git checkout -b feature/day-23-conditionals

git add index.html

git commit -m "feat(day-23): add conditional branching and switch statements"

Commit staged changes with a descriptive message

git push origin feature/day-23-conditionals

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 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

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 23

mkdir day-23

Create a new project folder (day-23)

cd day-23

Change working directory to day-23

# 3. Create your code file: index.html

# (Write your Day 23 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 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 + 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-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— 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/✨ CREATE THIS FOLDER FOR TODAY (Day 23)— Control Flow: if-else if & switch Statements

└──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

Curriculum & Practical Systems Authored by Er. Manoj Kumar

NextSem Academy • BCA Practical Learning Portal

BCA Student Stories & UpdatesLive

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

Day 23 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

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

👨‍🏫3. Teacher Demonstration Code

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

Day 23 Practical Task Test Studio

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

Senior Developer Forensic Analysis:

📝Independent Practice: Assignment

University Traffic Light / Fee Discount Engine

🎓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