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.
Table of Contents
How to make traffic light using Javascript?
It is very simple to create a traffic light application using javascript. Follow the below steps:
- Write HTML Code
- Write CSS Code
- 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 withid="traffic-signal". - Other two more
<div>are defined withid="line1"andid="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 insidestartTrafficSignal()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
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.