Understanding if-else and switch Statements with a Traffic Light Simulator in JavaScript

AyokomiAyokomi
3 min read

Control structures are the backbone of decision-making in any programming language. Today, I’m breaking down how I used two core control structures — if-else and switch — to build a simple but functional Traffic Light Simulator using HTML, CSS, and JavaScript.

This is a beginner-friendly explanation, especially if you’re trying to understand when and how to use these conditional tools in real projects.

What Are Control Structures?

Control structures allow your program to make decisions and execute different blocks of code based on certain conditions. In JavaScript, two of the most common ones are:

  • if-else: best for binary or simple comparisons.

  • switch: ideal for multiple specific conditions that depend on the value of a single variable.

Let’s see how both apply to our traffic light project.

Traffic Light Simulator

We want to simulate a traffic light that changes from Red ➡ Green ➡ Yellow ➡ Red, and so on. Users can:

  • Click a button to manually change the light.

  • Activate auto mode, which switches lights every 2 seconds.

1. HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Traffic Light Simulator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Traffic Light Simulator</h1>
    <div class="traffic-light">
      <div id="red" class="light red"></div>
      <div id="yellow" class="light yellow"></div>
      <div id="green" class="light green"></div>
    </div>
    <button id="changeBtn">Change Light</button>
    <button id="autoBtn">Auto Mode</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

This sets up the UI: three lights and two buttons.

2. CSS Styling

.traffic-light {
  background: #333;
  padding: 20px;
  border-radius: 10px;
}

.light {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #999;
  opacity: 0.3;
  margin: 15px auto;
}

.red.on {
  background: red;
  opacity: 1;
}
.yellow.on {
  background: yellow;
  opacity: 1;
}
.green.on {
  background: green;
  opacity: 1;
}

Lights are normally dimmed (opacity: 0.3) until they're turned "on" by adding the .on class.

3. JavaScript Logic: Using switch

Here’s where control structures shine:

let current = "red";

function updateLights() {
  // Reset all lights
  document.getElementById("red").classList.remove("on");
  document.getElementById("yellow").classList.remove("on");
  document.getElementById("green").classList.remove("on");

  // Use a switch to turn on the correct light
  switch (current) {
    case "red":
      document.getElementById("red").classList.add("on");
      current = "green";
      break;
    case "green":
      document.getElementById("green").classList.add("on");
      current = "yellow";
      break;
    case "yellow":
      document.getElementById("yellow").classList.add("on");
      current = "red";
      break;
  }
}

Here’s what’s happening:

  • We track the current light using a variable current.

  • Each time the button is clicked, updateLights() runs.

  • A switch statement checks the current value and:

    • Turns on the right light.

    • Updates current to the next color.

Manual vs Auto Mode

Manual:

document.getElementById("changeBtn").addEventListener("click", updateLights);

Click the button and it manually calls updateLights() once.

Auto Mode: Using if to Toggle

let autoInterval = null;

document.getElementById("autoBtn").addEventListener("click", () => {
  if (autoInterval) {
    clearInterval(autoInterval);
    autoInterval = null;
    document.getElementById("autoBtn").textContent = "Auto Mode";
  } else {
    updateLights();
    autoInterval = setInterval(updateLights, 2000);
    document.getElementById("autoBtn").textContent = "Stop Auto";
  }
});

Here we use an if statement to:

  • Start auto mode if it’s not running.

  • Stop it if it’s already running.

This is a good example of how if-else is perfect when you're checking for true/false or on/off conditions.

✅ When to Use if-else vs switch

Use CaseRecommended Control
Multiple specific values (like light colors)switch
True/false or binary logic (on/off, yes/no)if-else
Complex conditions (like x > 5 && y < 10)if-else

Final Thoughts

This project helped me clearly understand where and when to use switch and if-else in JavaScript. They might seem simple at first, but in real applications like this traffic light, they're what brings the logic to life.

If you're learning JavaScript fundamentals, building small, real-world examples like this can make a big difference.

👉 You can find the full code on GitHub:
🔗 https://github.com/Feyisara2108/Control-Structures-if-else--switch

Thanks for reading!

0
Subscribe to my newsletter

Read articles from Ayokomi directly inside your inbox. Subscribe to the newsletter, and don't miss out.

@web3bridgealtschool africaJavaScript

Written by

Ayokomi
Ayokomi