MODULE 3: Control Flow — Making Decisions with Logic

JavaScript Foundations • StreetGeek Academy

🧠 MODULE 3: Control Flow — Making Decisions with Logic

Learn how to control the flow of your code with conditionals and loops — enabling your portfolio to respond to different conditions and user interactions.

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.

Type	What It Does
Conditional statements	Make decisions (`if`, `else`, `switch`)
Loops	Repeat actions (`for`, `while`, `for...of`)

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");
}

💡 JavaScript checks each condition in order until one is true.

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 ⚡");
}

✅ Now you can categorize users dynamically.

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.");
}

✅ Output: Please enter your name. (empty string is falsy)

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 ⚙️");
}

💡 Always include break to prevent fall-through.

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}`;

✅ Dynamically updates based on completed projects.

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);
}

✅ Populates your page with a dynamic project list.

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

Show/Hide Questions

1) What’s the difference between if and switch?

2) What keyword stops a switch case?

3) Name all falsy values in JavaScript.

4) How many times will this loop run?

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

5) What’s the shorthand version of:
if (x) { y = "Yes"; } else { y = "No"; }?

🚀 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