Skip to main content

Traffic light program using javascript | An automated traffic signal project in javascript

 

TRAFFIC SIGNAL PROJECT WITH AUTO COUNT DOWN











Code : signal.html


<html>

<head>
<title>Signal
</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.img_cls {
height: 100px;
}

#signal {
width: 70px;
height: 200px;
background: #333;
padding-top: 5px;
margin: auto;
}

#signal_line {
width: 10px;
height: 50px;
background: #333;
padding-top: 5px;
margin: auto;
}

#signal_piler {
width: 170px;
height: 30px;
background: #333;
padding-top: 5px;
margin: auto;
}

#stop {
width: 50px;
height: 50px;
background: #777;
border-radius: 50%;
display: block;
margin: 10px;
}

#wait {
width: 50px;
height: 50px;
background: #777;
border-radius: 50%;
display: block;
margin: 10px;
}

#go {
width: 50px;
height: 50px;
background: #777;
border-radius: 50%;
display: block;
margin: 10px;
}

#tp_img {
height: 250px;
}
</style>
</head>

<body>
<h1 class="text text-center text-info">TRAFFIC SIGNAL PROJECT WITH AUTO COUNT DOWN</h1>
<hr>
<div class="col-sm-12">
<div class="col-sm-3">
<img src="../tp.png" id="tp_img">
</div>
<div class="col-sm-6">
<div class="col-sm-12">

<div class="col-sm-3">
<img src="../stop.jpg" onClick="stopTraffic()" class="img_cls">
</div>
<div class="col-sm-3">
<img src="../go.jpg" onClick="goTraffic()" class="img_cls">
<div class="col-sm-12">
<h4 class="text text-center text-info" id="goTimer"></h4>
</div>
</div>
<div class="col-sm-3">
<img src="../wait.jpeg" onClick="waitTraffic()" class="img_cls">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="signal">
<span id="stop"></span>
<span id="wait"></span>
<span id="go"></span>
</div>
<div id="signal_line"></div>
<div id="signal_piler"></div>
</div>
</div>
</body>
<script>
let idleTime = 0;

function stopTraffic() {
idleTime = 0;
document.getElementById("stop").style.background = "red";
document.getElementById("wait").style.background = "#777";
document.getElementById("go").style.background = "#777";
setInterval(timerIncrement, 1000);
}

function waitTraffic() {
idleTime = 0;
document.getElementById("stop").style.background = "#777";
document.getElementById("wait").style.background = "#dfcb00";
document.getElementById("go").style.background = "#777";
setInterval(timerIncrement, 1000);
}

function goTraffic() {
document.getElementById("stop").style.background = "#777";
document.getElementById("wait").style.background = "#777";
document.getElementById("go").style.background = "#019845";
}

function timerIncrement() {
document.getElementById("goTimer").innerText = "Signal will be Green in on count of 5, counter started " +
idleTime;
if (idleTime > 5) {
document.getElementById("goTimer").innerText = "";
}
if (idleTime > 5) {
goTraffic();
}
idleTime++;
}
</script>

</html>

Comments

Post a Comment

Popular posts from this blog

Top 10 topics to make YouTube video in angular

  Here are ten topic suggestions for making YouTube videos on Angular: Getting Started with Angular: An Introduction to the Angular Framework Components in Angular: Understanding and Creating Angular Components Directives in Angular: Understanding and Using Angular Directives Angular Routing: Setting up Routes and Navigation in Angular Applications Forms in Angular: Creating and Validating Forms with Angular Reactive Forms Pipes in Angular: Understanding and Using Angular Pipes to Transform Data Services in Angular: Creating and Using Angular Services for Data Management Angular Animations: Adding Animations to Angular Applications Angular Material: Implementing Material Design in Angular Applications Advanced Angular Topics: Exploring Advanced Angular Topics like Lazy Loading, AOT Compilation, and Dynamic Components.
Post a Comment
Read more

Top 5 javascript frameworks

  Here are the top 5 JavaScript frameworks : React: Developed and maintained by Facebook, React is a popular JavaScript library for building user interfaces. Angular: Developed and maintained by Google, Angular is a complete framework for building dynamic web applications. Vue.js: A relatively new JavaScript framework, Vue.js has gained a lot of popularity in recent years for its simplicity and performance. Ember.js: Ember.js is a JavaScript framework that emphasizes conventions over configuration, making it a good choice for complex web applications. Backbone.js: Backbone.js is a lightweight JavaScript framework that provides structure for web applications, particularly those that need to work with a lot of data. It's worth noting that the popularity of these frameworks can change over time, and different frameworks may be better suited for different types of projects and use cases.
Post a Comment
Read more