Building a Traffic Light System in JavaScript

Traffic lights are an essential system in everyday life, controlling traffic and ensuring safety on the roads. Let’s build a simple traffic light program using JavaScript that provides instructions based on the color of the light: Red, Yellow, or Green.

Objective

Create a traffic light system that displays specific messages based on the light's color:

• Red: "Stop!"

• Yellow: "Slow Down."

• Green: "Go."

Understanding the Logic

Each traffic light color triggers a specific action:

1. Red Light: The system instructs drivers to stop.

2. Yellow Light: Drivers are prompted to slow down and prepare to stop.

3. Green Light: It signals that it is safe to proceed.

To implement this, we use the if statement to check the light color and execute the corresponding message.

JavaScript Code

Here’s the implementation of the traffic light system:

javascriptCopyEdit// Example traffic light color (uncomment one at a time to test)
let color = "red";      // Example 1: Red
// let color = "yellow"; // Example 2: Yellow
// let color = "green";  // Example 3: Green

// Traffic light logic
if (color === "red") {
    console.log("Stop! The light color is red.");
}

if (color === "yellow") {
    console.log("Slow down! The light color is yellow.");
}

if (color === "green") {
    console.log("Go! The light color is green.");
}

Output Examples

1. Red Light

When the color variable is set to "red":

Output:

vbnetCopyEditStop! The light color is red.

2. Yellow Light

When the color variable is set to "yellow":

Output:

csharpCopyEditSlow down! The light color is yellow.

3. Green Light

When the color variable is set to "green":

Output:

csharpCopyEditGo! The light color is green.

Enhancing the Code with else if

To make the code more efficient and avoid redundant checks, we can use the else if statement:

javascriptCopyEditlet color = "red"; // Change this value to test different outputs

if (color === "red") {
    console.log("Stop! The light color is red.");
} else if (color === "yellow") {
    console.log("Slow down! The light color is yellow.");
} else if (color === "green") {
    console.log("Go! The light color is green.");
} else {
    console.log("Invalid color! Please enter red, yellow, or green.");
}

Additional Enhancements

1. Dynamic Input: Use the prompt() method to allow users to input the light color dynamically in a browser environment.

    javascriptCopyEditlet color = prompt("Enter the traffic light color (red, yellow, green):").toLowerCase();
   
    if (color === "red") {
        console.log("Stop! The light color is red.");
    } else if (color === "yellow") {
        console.log("Slow down! The light color is yellow.");
    } else if (color === "green") {
        console.log("Go! The light color is green.");
    } else {
        console.log("Invalid color! Please enter red, yellow, or green.");
    }
   

2. Switch Statement: Use a switch statement for better readability when dealing with multiple conditions.

    javascriptCopyEditlet color = "yellow";
   
    switch (color) {
        case "red":
            console.log("Stop! The light color is red.");
            break;
        case "yellow":
            console.log("Slow down! The light color is yellow.");
            break;
        case "green":
            console.log("Go! The light color is green.");
            break;
        default:
            console.log("Invalid color! Please enter red, yellow, or green.");
    }
   

Key Takeaways

1. The if, else if, and switch statements are powerful tools for controlling program flow based on conditions.

2. Adding dynamic inputs or error handling improves the robustness of the program.

3. Real-world examples like traffic lights help reinforce programming concepts in an intuitive way.

Now you have a fully functional traffic light system in JavaScript. You can experiment further by adding more features like timers or animations for a real-world simulation!