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

What is JavaScript? Why JavaScript? How to use javascript?

 WWH JavaScript Watch here with full example and with github:  Watch Now 1. Question. What is JavaScript? Answer :- Javascript is a scripting language. And it's basically used to make web pages more user-friendly and more interactive.     Few Important points related to javascript:- JavaScript is an untyped language.(What does it mean?) Unlike c/java or other programming languages, you don't need to define/declare type of variables JavaScript is an interpreted language.(Means?) Programs written in c/c+ or java, you need to compile first and after that, u can get output. but codes/programs written in javascript will give you output without compilation process. 2. Question. Why JavaScript?  Answer:- Javascript is basically used to make web pages more authentic. For example, you have a signup form of a user and there is a Pincode input box and you want to get the city on the input of pin code so you can add this functionality into your web page with the help of jav...
Post a Comment
Read more