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 get the CPU temperature using ADB?

import os # Function to get the CPU temperature using ADB def get_cpu_temperature():     try:         # Run the ADB command and redirect the output to a temporary file         os.system("adb shell cat /sys/class/thermal/thermal_zone0/temp > temp.txt")         # Read the temperature from the temporary file and convert to Celsius         with open("temp.txt", "r") as file:             temperature = int(file.read().strip()) / 1000.0             return temperature     except Exception as e:         print("Error:", e)         return None     finally:         # Remove the temporary file         os.remove("temp.txt") # Function to check temperature and trigger alarm if necessary def check_temperature_and_notify(threshold):     temperat...
Post a Comment
Read more

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