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

How to call API in angular & with an example of PHP API

How to call API in angular & with an example of PHP API . Software required:- Node ->  https://nodejs.org/en/download/ VS Code ->  https://code.visualstudio.com/download Angular CLI -> npm install - g @angular / cli To understand how to call API in angular follow the below steps:- Step:1 Project Setup 1. Create a project in angular ->  ng new project name 2. Install npm -> npm i 3. Import HttpClientModule in app.module.ts -> import { HttpClientModule } from '@angular/common/http' ; 4. Add provider providers : [ WebserviceService ], example -> ng new crudInAngularPHP Step:2 API Service 1. Create a service with name webservice -> ng g s services/webservice 2. import modules import { HttpClient, HttpHeaders, HttpRequest, HttpEvent } from '@angular/common/http'; 3 .    C all constructor  constructor( private http: HttpClient) 4. Add a common function to get a response of API with name postRequest:-      ...
Post a Comment
Read more

How to import and read XML bulk data into angular versions 2, 5, 6, 8, 10

xml import in angular,how to read xml in angular,how to import xml in angular,angular xml example,angular with mukund,mukund programming tutorials,upload excel file in angular,angular 6/7/8 tutorial in hindi,xml import into angular,xml file upload,file upload,how to,xml file upload error,how to read xml in angular 8,xml import in angularjs,xml file upload exploit,file upload in html and javascript,angular tutorial in hindi
Post a Comment
Read more

How To Use Hostinger File Manager Updated 2021 In Hindi And English

hostinger webhosting in hindi,how to upload file on hostinger,hpanel file upload in hostinger hindi/english,8677040031,hpanel file manager file upload hostinger,blog.marketingdukaan.com,how to use hostinger file manager (updated 2020) in hindi and english,mukund programming tutorials,how to open wordpress dashboard in hostinger,hostinger tutorial in hindi,hostinger web hosting review in hindi
Post a Comment
Read more