Guest Mode:
BCA Student Stories & UpdatesLive
You
Day 22JavaScript Basics2 Hours Practical
Push to GitHub to Complete
JavaScript Operators: Arithmetic, Strict Equality (===) & Logical Conditions
Operators allow you to perform calculations and make comparisons in code. In JavaScript, understanding type coercion and the distinction between loose equality (==) and strict equality (===) is fundamental to writing bug-free software.
Interactive Learning Roadmap
Day 22 Step-by-Step Practical Flow
🎯1. What You Will Learn Today
✔Master arithmetic operations (+, -, *, /, %) and increment/decrement operators.
✔Understand why strict equality (===) is mandatory over loose equality (==).
✔Evaluate compound boolean expressions using AND (&&), OR (||), and NOT (!).
✔Compute university exam percentage scores and verify admission eligibility.
Day 22 MasterclassJavaScript Basics
JavaScript Operators: Arithmetic, Strict Equality (===) & Logical Conditions — Comprehensive Practical Guide
Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.
Real-World Purpose Aur Zaroorat
Operators allow you to perform calculations and make comparisons in code. In JavaScript, understanding type coercion and the distinction between loose equality (==) and strict equality (===) is fundamental to writing bug-free software.
Arithmetic: Standard math (+, -, *, /) plus modulo (%) for finding remainders.
Strict Equality (===): Compares BOTH value and data type without automatic type conversion.
Loose Equality (==): Performs implicit type coercion (e.g. "5" == 5 evaluates to true!), which leads to security and logic bugs.
Logical AND (&&): Returns true only if both operands evaluate to truthy.
Logical OR (||): Returns true if at least one operand evaluates to truthy.
Logical NOT (!): Inverts the boolean truthiness of an operand.
Dimaag Mein Bithane Ka Model
"Loose equality (==) is like an airport gate agent who lets a passenger through because their movie prop paper bill says 100. Strict equality (===) inspects both the printed value AND whether it is real government currency of the expected material."
💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.
👨🏫3. Teacher Demonstration Code
Notice how "100" == 100 is true, but "100" === 100 is false because string !== number.
Comparing Strict vs Loose Equality & Eligibility Checkhtml
<!DOCTYPE html>
<html>
<body>
<script>
const userAge = 19;
const hasCollegeID = true;
// Strict equality comparison
console.log("5 == '5' (Loose):", 5 == '5'); // true (Coerced)
console.log("5 === '5' (Strict):", 5 === '5'); // false (Different types)
// Logical condition
const isEligibleForExam = (userAge >= 18) && hasCollegeID;
console.log("Eligible for Exam:", isEligibleForExam);
</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 22 Practical Task Test Studio
Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Calculate percentage score
Compute percentage by dividing obtainedMarks by totalMarks, multiplying by 100, and storing in const percentage.
⏳ WAITING
Task 2Check pass eligibility with comparison
Declare const isPassed which evaluates to true if percentage >= 40, and log the result.
⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing ActiveTab inserts 2 spaces • Live DOM refresh292 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
LiveRenders live HTML & CSS typed on the left.
Interactive Bug Detective
Spot the Bug: Accidental Single Equals Assignment in Condition
Tap or click on the exact line below that contains the error:
Click any code line⚠️ Broken Code Inspector
Tap buggy line1
let marks = 35;2
if (marks = 100) { // Bug: Single equals assignment instead of comparison!3
console.log("Distinction Student!");4
}Stuck? Need a detective clue before checking the solution?
Senior Developer Forensic Analysis:
Single equals (=) is an assignment operator, not a comparison. (marks = 100) assigns 100 to marks, which evaluates to truthy (100 is truthy), always executing the if block regardless of actual marks.
Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!
📝Independent Practice: Assignment
📄 eligibility-calculator.htmlAdmission Eligibility Calculator Script
- •Create day-22/index.html with student test scores.
- •Implement arithmetic formulas for total, average, and percentage.
- •Write compound logical conditions: (mathScore >= 60 && physicsScore >= 55 && csScore >= 65).
- •Print formatted PASS/FAIL criteria to the browser console.
Submission Evaluation Criteria: Ensure your script uses strict equality (===) and proper logical operators.
Exact Assignment Solution Code: eligibility-calculator.html
Open Visual Studio Code on your PC (code .), create eligibility-calculator.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 22 - Admission Eligibility Calculator</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;
}
.calc-card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 16px;
padding: 32px;
max-width: 480px;
width: 100%;
}
h1 { font-size: 20px; color: #38bdf8; margin-bottom: 16px; }
.result-box {
background: #0f172a;
padding: 16px;
border-radius: 10px;
font-family: monospace;
font-size: 13px;
color: #cbd5e1;
line-height: 1.8;
}
.status { font-weight: bold; font-size: 16px; margin-top: 12px; }
.pass { color: #10b981; }
.fail { color: #ef4444; }
</style>
</head>
<body>
<div class="calc-card">
<h1>BCA Admission Eligibility Check</h1>
<div class="result-box" id="resultBox">Computing eligibility...</div>
</div>
<script>
// Test Scores
const mathScore = 72;
const physicsScore = 65;
const csScore = 88;
// Arithmetic Formulas
const totalMarks = mathScore + physicsScore + csScore;
const maxMarks = 300;
const average = (totalMarks / 3).toFixed(2);
const percentage = ((totalMarks / maxMarks) * 100).toFixed(2);
// Compound Logical Condition
const isEligible = (mathScore >= 60 && physicsScore >= 55 && csScore >= 65);
const logOutput = `Mathematics: ${mathScore}/100
Physics: ${physicsScore}/100
Computer Science: ${csScore}/100
------------------------------
Total: ${totalMarks}/${maxMarks}
Average: ${average}
Percentage: ${percentage}%`;
console.log(logOutput);
console.log("Admission Status:", isEligible ? "ELIGIBLE FOR ADMISSION" : "NOT ELIGIBLE");
document.getElementById("resultBox").innerHTML = `
<div>${logOutput.replace(/\n/g, "<br>")}</div>
<div class="status ${isEligible ? 'pass' : 'fail'}">
Status: ${isEligible ? "✓ ELIGIBLE FOR BCA ADMISSION" : "✕ NOT ELIGIBLE"}
</div>
`;
</script>
</body>
</html>Verified Assignment Code Solution (100% Tested & Ready to Run)
🎓4. Viva Check: Mandatory Conceptual Test
What is the evaluated output of the expression: typeof (5 + "5") in JavaScript?
5. Mandatory Step: Push to GitHub to Unlock Next Lesson
Target Repo: html-css-projects
Windows 11 Terminal / VS Code
main
1$
mkdir day-22
Create a new project folder (day-22)
2$
cd day-22
Change working directory to day-22
3$
git checkout -b feature/day-22-operators
4$
git add index.html
5$
git commit -m "feat(day-22): implement javascript operators and strict equality"
Commit staged changes with a descriptive message
6$
git push origin feature/day-22-operators
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
✔ RequiredVS Code Implementation
Step 4 Viva Check
Own GitHub Project
RequiredExact GitHub Setup Guide & Expected Structure
Day 22 RequirementsFollow 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-22/ or bca-day-22/
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 22
main
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 22
4$
mkdir day-22
Create a new project folder (day-22)
5$
cd day-22
Change working directory to day-22
6$
# 3. Create your code file: index.html
7$
# (Write your Day 22 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 22: JavaScript Operators: Arithmetic, Strict Equality (===) & Logical Conditions"
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-22/ 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: mainREADME.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/✨ CREATE THIS FOLDER FOR TODAY (Day 22)
└──index.htmlMust contain: ===, !==, &&, ||
Sequential Progression Enforced
You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 22 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 21: JavaScript Introduction: <script> Tag, Variables (let, const) & Data Types first.
Complete Day 21 FirstCurriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal