By Indira Viswesh and Angel Bulatao

1. Reference Guide

Vocabulary Meaning JavaScript example
Conditional Code that chooses what to do based on whether a condition is true or false. if (score >= 80) { console.log("Good"); }
Condition A test that evaluates to true or false. score >= 80
if statement Runs its code block when its condition is true. if (weekday) { console.log("School day"); }
else clause Runs when the preceding if condition is false. if (weekday) { wakeUp(); } else { sleepIn(); }
else if clause Checks another condition when the earlier condition was false. if (score >= 80) { grade = "A"; } else if (score >= 60) { grade = "Pass"; }
Nested conditional A conditional placed inside another conditional’s code block. if (weekday) { if (test) { study(); } }
Code block Statements grouped between curly braces {} and controlled by a conditional. if (test) { study(); }

Remember: JavaScript keywords such as if, else, and switch must be lowercase.

2. LxD Cycle

Define and Lesson Plan Overview

Define

  • POV: CSSE students need to understand how programs make decisions when an input is true or false. This helps them create different results in games and interactive projects.
  • Learning Goal: Students will create nested conditionals using if, else if, and else statements.

Ideate

  • How might we encourage students to ask, “What needs to be true for this code to run?” when building a game or project?
  • How might we show students that one conditional can contain another conditional?

Learning Objective: By the end of this lesson, you should be able to explain and create a nested conditional.

3. CS 111 Course Alignment

MiraCosta College’s CS 111 course description lists control structures among its programming-language basics. CS 111 teaches Java, while this lesson uses JavaScript, so this is a related-course connection rather than a claim that this lesson is an official CS 111 module.

The catalog does not specifically list conditionals or nested conditionals as separate topics. See the MiraCosta CS 111 course description.

4. Lesson Plan

Learning Objective: Understand nested conditionals and how to place if, else if, and else statements correctly.

Success Criteria: You can describe a nested conditional, explain how if, else if, and else differ, and create a conditional of your own.

Tech Talk (3–5 minutes)

A conditional is a decision in code. It lets a program choose different actions depending on whether a condition is true or false. The program checks conditions in order and runs the matching code block.

Common conditional structures include if, if...else, else if, and switch:

  1. if: Runs a block when its condition is true.
  2. if...else: Runs one block when the condition is true and another when it is false.
  3. else if: Checks another condition when the preceding if condition is false.
  4. switch: Selects among multiple cases.

Conditional Syntax

JavaScript keywords such as if, else, and switch must be lowercase. Capitalizing them as IF or If causes an error.

if statement

Use if to run a code block when a condition is true.

Code Runner Challenge

Run the code and notice how the if, else if, and else statements are written.

View IPYNB Source 
if (condition) {
  // Runs when the condition is true
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

else clause

Use else to run a code block when the if condition is false.

if (condition) {
  // Runs when the condition is true
} else {
  // Runs when the condition is false
}

else if clause

Use else if to check another condition when the earlier condition is false. The final else is optional.

Code Runner Challenge

Try changing these values and run the nested conditional again.

View IPYNB Source 
if (condition1) {
  // Runs when condition1 is true
} else if (condition2) {
  // Runs when condition1 is false and condition2 is true
} else {
  // Runs when both conditions are false
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

5. Guided Code Examples

A. Chained Conditionals: if, else if, and else

Code Runner Challenge

Run the nested conditional to identify numbers as odd or even and check whether they are divisible by 3.

View IPYNB Source 
%%js
// CODE_RUNNER: Run the code and notice how the if, else if, and else statements are written.

const time = 14;
let greeting;

if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

console.log(greeting);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Quick Check: Add an else if

Add an else if branch so a score of 60 prints a message between "Good" and "Needs improvement". Set score to 60 and run the cell to check your result.

Code Runner Challenge

Practice nested conditionals with a few months.

View IPYNB Source 
%%js

const score = 75;

if (score >= 80) {
  console.log("Good");
} else {
  console.log("Needs improvement");
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

B. Nested Conditionals: Morning Decisions

Think: Imagine your morning alarm rings and you must decide whether to get up, snooze for 5 more minutes, or go back to sleep.

First, check whether it is a school weekday or a weekend. Then, make another decision inside that first decision.

  • If it is a school weekday:
    • Check whether you have a test to study for.
    • If you have a test, get up and study.
    • Else, snooze your alarm for 5 more minutes.
  • Else (if it is a weekend):
    • Check whether you have homework.
    • If you have homework, get up and do it.
    • Else, go back to sleep.

The second decision is inside the first decision, so this is a nested conditional.

Code Runner Challenge

Loop from 1 through 100 and report odd/even and divisibility by 5.

View IPYNB Source 
%%js
// CODE_RUNNER: Try changing these values and run the nested conditional again.
const weekday = true;
const test = true;
const homework = false;

if (weekday) {
  // On a school weekday, check whether you have a test to study for.
  if (test) {
    console.log("Wake up and study for the test.");
  } else {
    console.log("Snooze the alarm for 5 more minutes.");
  }
} else {
  // On a weekend, check whether you have homework.
  if (homework) {
    console.log("Wake up and do your homework.");
  } else {
    console.log("Go back to sleep.");
  }
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

6. Hacks & Practice Tasks

Try it: Change the values in the code runners and run them again.

  • const creates a variable whose value cannot be reassigned.
  • Curly braces {} mark the code block controlled by an if, else if, or else statement.
  • The % operator gives the remainder after division. For example, 7 % 2 equals 1.

Challenge 1: Odd, Even, and Divisible by 3

Run the nested conditional to identify whether each number from 1 through 10 is odd or even and whether it is divisible by 3.

%%js

// CODE_RUNNER: Run the nested conditional to identify numbers as odd or even and check whether they are divisible by 3.

const NUMBERS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (const number of NUMBERS) {
  if (number % 2 === 0) {
    console.log(number + " is even");

    if (number % 3 === 0) {
      console.log(number + " is divisible by 3");
    } else {
      console.log(number + " is not divisible by 3");
    }
  } else {
    console.log(number + " is odd");

    if (number % 3 === 0) {
      console.log(number + " is divisible by 3");
    } else {
      console.log(number + " is not divisible by 3");
    }
  }
}

Challenge 2: Weather Patterns

You are a meteorologist tracking weather patterns for a few months. Use a for loop with nested conditionals to examine each month’s temperature, precipitation, and wind conditions.

For each month:

  1. Decide whether the temperature is hot, cold, or mild.
  2. Use a nested conditional to check precipitation for hot and cold months.
  3. For mild months, use a nested conditional to check whether the weather is windy or calm.

Run the example in the Code Runner first. Then change a temperature, precipitation amount, or wind value and run it again. Observe how the weather report changes.

%%js
// CODE_RUNNER: Practice nested conditionals with a few months.

const weatherPatterns = [
  { month: "January", temperature: 42, precipitation: 3.2, windy: true },
  { month: "April", temperature: 68, precipitation: 2.0, windy: false },
  { month: "July", temperature: 91, precipitation: 1.2, windy: false }
];

for (const weather of weatherPatterns) {
  console.log(weather.month + ":");

  if (weather.temperature >= 80) {
    if (weather.precipitation >= 3) {
      console.log("Hot with thunderstorms.");
    } else {
      console.log("Hot and mostly dry.");
    }
  } else if (weather.temperature <= 50) {
    if (weather.precipitation >= 3) {
      console.log("Cold with winter precipitation.");
    } else {
      console.log("Cold and mostly dry.");
    }
  } else {
    if (weather.windy) {
      console.log("Mild and windy.");
    } else {
      console.log("Mild and calm.");
    }
  }
}

7. Homework: Divisibility from 1 to 100

Write a program that loops through the numbers 1–100 and uses nested conditionals to report whether each number is odd or even and whether it is divisible by 5.

Requirements:

  1. Include a loop that visits every number from 1 through 100.
  2. Check whether each number is odd or even.
  3. Inside each odd/even branch, use a nested if to check whether the number is divisible by 5.
  4. Print a clear message for each number.
%%js
// CODE_RUNNER: Loop from 1 through 100 and report odd/even and divisibility by 5.

// TODO: Add the loop and nested conditionals described in the homework.

8. How to Submit

Complete your notebook, save it, and submit your portfolio or notebook link using the Google Form.

9. References

W3Schools. “JavaScript if…else Statements.” W3Schools, https://www.w3schools.com/JS/js_conditionals.asp. Accessed 27 Sept. 2026.

GeeksforGeeks. “Conditional Statements in JavaScript.” GeeksforGeeks, https://www.geeksforgeeks.org/javascript/conditional-statements-in-javascript/. Accessed 27 Sept. 2026.