Building a Traffic Lights System with JavaScript

Introduction

In this project, you will learn how to create a traffic lights system that changes the color of the light from red to green after a certain time interval. This project will help you understand the basics of JavaScript and how to manipulate the DOM to display different elements based on time-based events.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up a basic HTML and JavaScript project structure
• How to implement a function to change the display of the traffic light to red after 3 seconds
• How to implement a function to change the display of the traffic light to green after 6 seconds
• How to coordinate the execution of the red and green light functions using async/await
• How to test the traffic lights system and ensure it works as expected

🏆 Achievements

After completing this project, you will be able to:

• Manipulate the DOM using JavaScript to change the display of HTML elements
• Use setTimeout() to schedule time-based events
• Manage asynchronous operations with async/await
• Test and debug your JavaScript code

Set Up the Project Structure

In this step, you will set up the project structure and prepare the necessary files and folders.

1. Open the editor. You should see index.html, trafficlights.js and a few image files in the /home/labex/project directory.
2. Click on Go Live button in the bottom right corner of WebIDE, to run the project.
3. Open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Implement the Red Light Function

In this step, you will implement the function to change the light to red.

1. In the trafficlights.js file, locate the red() function.
2. Set a variable above the red function and give the initial value:

let trafficlightsTimer = 3000;
// function red() {...}

3. The red() function should change the display of the default light to none and the display of the red light to inline-block after 3 seconds.

function red() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      defaultlight.style.display = "none";
      redlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

Implement the Green Light Function

In this step, you will implement the function to change the light to green.

1. In the trafficlights.js file, locate the green() function.
2. The green() function should change the display of the red light to none and the display of the green light to inline-block after 3 seconds (6 seconds after the page load).

function green() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      redlight.style.display = "none";
      greenlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

Call the Traffic Lights Functions

In this step, you will call the trafficlights() function to start the traffic lights sequence.

1. In the trafficlights.js file, locate the trafficlights() function.
2. The trafficlights() function should call the red() and green() functions in sequence using the async/await syntax.

async function trafficlights() {
  await red();
  await green();
}

trafficlights();
module.exports = { trafficlights };

Test the Traffic Lights

1. Save the changes to the trafficlights.js file.
2. Refresh the page in your browser. You should see the traffic lights change from the default light to red, and then to green after 6 seconds. The finished result is as follows:

Congratulations! You have completed the Colour Changeable Light project. If you have any questions or need further assistance, feel free to ask.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.