Traffic signal light using Javascript

In this article, you will see the creation of a Traffic signal light using Javascript. Traffic lights, traffic signals, stoplights are signaling devices positioned at road intersections, pedestrian crossings, and other locations to control the flows of traffic.

To develop this application, we will use simple HTML, CSS, and Javascript. Basically, we are going to use setTimeout() and setInterval() methods of Javascript.

Traffic signal light using javascript
Traffic Signal Light

How to make traffic light using Javascript?

It is very simple to create a traffic light application using javascript. Follow the below steps:

  1. Write HTML Code
  2. Write CSS Code
  3. Write Javascript Code

1. HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Traffic Signal</title>
</head>
<body onload="timer;">
    <div id="traffic-signal">
        <div id="green"></div>
        <div id="yellow"></div>
        <div id="red"></div>
    </div>
    <div id="line1"></div>
    <div id="line2"></div>
</body>
</html>

Explanation:

  • We have defined three <div> for the green, yellow, and red color lights.
  • Putting all three lights into a container <div> defined with id="traffic-signal".
  • Other two more <div> are defined with id="line1" and id="line2" for the stand of traffic lights.
  • Calling timer on body load to start traffic light.

2. CSS Code

Here we have defined the CSS for the above-defined HTML elements.

#traffic-signal{
    border: 8px solid black;
    padding: 10px 3px;
    width: 50px;
    border-radius: 50px;
}
#traffic-signal > div{
    width:50px;
    height: 50px;
    border-radius: 50%;
    opacity: .3;
}
#line1{
    height:200px;
    width:10px;
    background:#000;
    margin-left:30px;
}
#line2{
    height:10px;
    width:70px;
    background:#000;
}
#green{
    background-color: green;
}
#yellow{
    background-color: yellow;
}
#red{
    background-color: red;
}

3. Javascript Code

function startTrafficSignal () {
    var green=document.getElementById("green");
    var red=document.getElementById("red");
    var yellow=document.getElementById("yellow");

    green.style.opacity=1;
    setTimeout(function () {
        green.style.opacity=.3;
        red.style.opacity=.3;
        yellow.style.opacity=1;
    },5000);

    setTimeout(function () {
        green.style.opacity=.3;
        red.style.opacity=1;
        yellow.style.opacity=.3;
    },7000);

    setTimeout(function () {
        green.style.opacity=1;
        red.style.opacity=.3;
        yellow.style.opacity=.3;
    },12000);
}

var timer=setInterval(function () {
    startTrafficSignal();
},12000);

startTrafficSignal();

Explanation:

  • We have defined a Timer(using setInterval() method) that will be called in every 12 seconds.
  • 12 seconds are divided for three lights ie. Green(5sec), Yellow(2sec), and Red(5sec).
  • We have defined a function startTrafficSignal() to show the specific light at the specified time.
  • We have used setTimeout() method inside startTrafficSignal() to show the specific light after specified milliseconds.
  • Here the logic for switching lights on and off is setting the css property opacity 1 and 0.3(1=on, .3=off).

Complete Code of Traffic light

Following is the complete code of Traffic light putting all HTML, CSS, and Javascript in a single file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Traffic Signal</title>
   <style>
	#traffic-signal{
		border: 8px solid black;
		padding: 10px 3px;
		width: 50px;
		border-radius: 50px;
	}
	#traffic-signal > div{
		width:50px;
		height: 50px;
		border-radius: 50%;
		opacity: .3;
	}
	#line1{
		height:200px;
		width:10px;
		background:#000;
		margin-left:30px;
	}
	#line2{
		height:10px;
		width:70px;
		background:#000;
	}
	#green{
		background-color: green;
	}
	#yellow{
		background-color: yellow;
	}
	#red{
		background-color: red;
	}
   </style>
	</head>
	<body onload="timer;">

	<div id="traffic-signal">
		<div id="green"></div>
		<div id="yellow"></div>
		<div id="red"></div>
	</div>
	<div id="line1"></div>
	<div id="line2"></div>
    <script>
	function startTrafficSignal () {
		var green=document.getElementById("green");
		var red=document.getElementById("red");
		var yellow=document.getElementById("yellow");

		green.style.opacity=1;
		setTimeout(function () {
			green.style.opacity=.3;
			red.style.opacity=.3;
			yellow.style.opacity=1;
		},5000);

		setTimeout(function () {
			green.style.opacity=.3;
			red.style.opacity=1;
			yellow.style.opacity=.3;
		},7000);

		setTimeout(function () {
			green.style.opacity=1;
			red.style.opacity=.3;
			yellow.style.opacity=.3;
		},12000);
	}

	var timer=setInterval(function () {
		startTrafficSignal();
	},12000);

	startTrafficSignal();
    </script>
</body>
</html>

Preview and Live Demo

Traffic signal lights in javascript
Traffic signal lights

Conclusion

Here you have seen how to create a Traffic signal light application using Javascript. We used setTimeout() and setInterval() method to develop it.

setTimeout() method basically we used for specific time delay and setInterval() method used to make a timer.

The CSS property called opacity has been used here to switch all three colors on and off.

Related Articles:

Share with friends

Leave a Comment

Your email address will not be published.