1) What Is Control Flow?

Control Flow determines what happens next in your code. JavaScript runs top-to-bottom — but conditionals and loops can modify that path.

2) The if, else if, and else Statements

let score = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else {
  console.log("Grade: C or below");
}

Conditional Example in the Portfolio

let projects = 7;

if (projects >= 10) {
  console.log("Pro Developer 🧠");
} else if (projects >= 5) {
  console.log("Rising Star 🌟");
} else {
  console.log("Beginner ⚡");
}

3) Truthy and Falsy Values

Some values in JavaScript automatically evaluate as false in conditionals.

Falsy values:

• false
• 0
• “” (empty string)
• null
• undefined
• NaN

let username = "";

if (username) {
  console.log("Welcome back!");
} else {
  console.log("Please enter your name.");
}

4) Switch Statements

Use switch when checking multiple possible values of the same variable.

let theme = "dark";

switch (theme) {
  case "dark":
    console.log("Dark mode activated 🌙");
    break;
  case "light":
    console.log("Light mode activated ☀️");
    break;
  default:
    console.log("System default mode ⚙️");
}

5) Loops

Loops let you repeat code without duplication.

for Loop

for (let i = 1; i <= 5; i++) {
  console.log(`Project ${i}`);
}

while Loop

let count = 1;
while (count <= 3) {
  console.log(`Saving file ${count}`);
  count++;
}

for...of Loop

let projects = ["Portfolio", "Blog", "ShopBlocks"];

for (let project of projects) {
  console.log(`Working on: ${project}`);
}

6) Hands-On Practice

Exercise 1: Portfolio Level Badge

<p id="level-badge"></p>

const levelBadge = document.getElementById("level-badge");
let completedProjects = 8;
let badge;

if (completedProjects >= 10) {
  badge = "Gold";
} else if (completedProjects >= 5) {
  badge = "Silver";
} else {
  badge = "Bronze";
}

levelBadge.textContent = `🏅 Your Level: ${badge}`;

Exercise 2: Switch-Based Greeting

<p id="day-greeting"></p>

const dayGreeting = document.getElementById("day-greeting");
let day = new Date().getDay();
let message;

switch (day) {
  case 0: message = "Relax, it’s Sunday! 😎"; break;
  case 1: message = "Motivation Monday 💪"; break;
  case 2: message = "Tech Tuesday 🔧"; break;
  case 3: message = "Web Wednesday 💻"; break;
  case 4: message = "Thriving Thursday 🌟"; break;
  case 5: message = "Focus Friday 🚀"; break;
  case 6: message = "Social Saturday 🎉"; break;
}

dayGreeting.textContent = message;

Exercise 3: Portfolio Loop Generator

<ul id="project-list"></ul>

const projectList = document.getElementById("project-list");
const projects = ["Portfolio", "HTML Course", "JavaScript Demo", "WPNfinite Blog"];

for (let i = 0; i < projects.length; i++) {
  let li = document.createElement("li");
  li.textContent = `${i + 1}. ${projects[i]}`;
  projectList.appendChild(li);
}

7) Bonus: The Ternary Operator (Short if/else)

let mode = "dark";
let emoji = mode === "dark" ? "🌙" : "☀️";
console.log(`Current mode: ${emoji}`);

Same as:

if (mode === "dark") {
  emoji = "🌙";
} else {
  emoji = "☀️";
}

8) Quiz Time

for (let i = 1; i < 4; i++) {
  console.log(i);
}

🚀 Challenge Task: Experience Tracker

<p id="xp-tracker"></p>

const xpTracker = document.getElementById("xp-tracker");
let projects = 7;
let skills = ["HTML", "CSS", "JavaScript"];
let message = "";

if (projects >= 10) {
  message = "Pro Developer 🧠 — You’ve mastered multiple projects!";
} else if (projects >= 5) {
  message = "Rising Star 🌟 — Keep going, you’re leveling up!";
} else {
  message = "Beginner ⚡ — Every expert started here!";
}

xpTracker.textContent = `${message} Skills: ${skills.join(", ")}.`;

🏁 Module 3 Summary

• How to control logic with if, else, and switch
• How loops repeat actions automatically
• How truthy and falsy values work
• How to update your site dynamically using conditions

Next up → MODULE 4: Functions & Scope — Writing Reusable Code