Skip to content

T
Traffic-signal
Commit 8813b9d0 authored by Muhammad Ameen's avatar Muhammad Ameen 💻
Browse files
Options

Traffic Signal

parent 55ee5ce3
Show whitespace changes
Inline Side-by-side
Showing with 182 additions and 94 deletions
app.js
View file @ 8813b9d0
......@@ -6,15 +6,16 @@ let secondRed = document.getElementById("secondRed");
let secondYellow = document.getElementById("secondYellow");
let secondGreen = document.getElementById("secondGreen");
// let thirdRed = document.getElementById("thirdRed");
// let thirdYellow = document.getElementById("thirdYellow");
// let thirdGreen = document.getElementById("thirdGreen");
let thirdRed = document.getElementById("thirdRed");
let thirdYellow = document.getElementById("thirdYellow");
let thirdGreen = document.getElementById("thirdGreen");
// let fourthRed = document.getElementById("fourthRed");
// let fourthYellow = document.getElementById("fourthYellow");
// let fourthGreen = document.getElementById("fourthGreen");
let fourthRed = document.getElementById("fourthRed");
let fourthYellow = document.getElementById("fourthYellow");
let fourthGreen = document.getElementById("fourthGreen");
let time = 6000;
let isThree = 0;
let isFour = 0;
let sec1 = 0;
let red = true;
......@@ -28,11 +29,11 @@ const trafficSignal1 = () => {
red = false;
yellow = true;
green = false;
sec1 = 3000;
sec1 = 12000;
console.log("first red");
clearInterval(x);
x = setInterval(() => {
clearInterval(firstInterval);
firstInterval = setInterval(() => {
trafficSignal1();
console.log(sec1);
}, sec1);
......@@ -45,8 +46,8 @@ const trafficSignal1 = () => {
sec1 = 1000;
console.log("second red");
clearInterval(x);
x = setInterval(() => {
clearInterval(firstInterval);
firstInterval = setInterval(() => {
trafficSignal1();
console.log(sec1);
}, sec1);
......@@ -58,139 +59,220 @@ const trafficSignal1 = () => {
red = true;
yellow = false;
green = false;
sec1 = 2000;
sec1 = 3000;
clearInterval(x);
x = setInterval(() => {
clearInterval(firstInterval);
firstInterval = setInterval(() => {
trafficSignal1();
console.log(sec1);
}, sec1);
}
};
let x = setInterval(() => {
let firstInterval = setInterval(() => {
trafficSignal1();
console.log(sec1);
}, sec1);
// Second Signal
// Second Signal ====================================
let sec2 = 0;
let red2 = true;
let red2 = false;
let yellow2 = false;
let green2 = false;
let green2 = true;
const trafficSignal2 = () => {
console.log(sec2);
if (red2 === true && yellow2 === false && green2 === false) {
secondRed.style.backgroundColor = "red";
secondGreen.style.backgroundColor = "gray";
red2 = false;
yellow2 = true;
if (red2 === false && yellow2 === false && green2 === true) {
secondRed.style.backgroundColor = "gray";
secondYellow.style.backgroundColor = "gray";
secondGreen.style.backgroundColor = "green";
red2 = true;
yellow2 = false;
green2 = false;
sec2 = 6000;
sec2 = 3000;
console.log("first red");
isThree = 0;
clearInterval(y);
y = setInterval(() => {
clearInterval(secondInterval);
secondInterval = setInterval(() => {
trafficSignal2();
console.log(sec2);
}, sec2);
} else if (red2 === false && yellow2 === true && green2 === false) {
secondRed.style.backgroundColor = "gray";
secondYellow.style.backgroundColor = "yellow";
secondGreen.style.backgroundColor = "gray";
red2 = false;
yellow2 = false;
green2 = true;
sec2 = 1000;
console.log("second red");
clearInterval(y);
y = setInterval(() => {
clearInterval(secondInterval);
secondInterval = setInterval(() => {
trafficSignal2();
console.log(sec2);
}, sec2);
} else if (red2 === false && yellow2 === false && green2 === true) {
secondRed.style.backgroundColor = "gray";
} else if (red2 === true && yellow2 === false && green2 === false) {
secondRed.style.backgroundColor = "red";
secondYellow.style.backgroundColor = "gray";
secondGreen.style.backgroundColor = "green";
secondGreen.style.backgroundColor = "gray";
console.log("third red");
red2 = true;
yellow2 = false;
red2 = false;
yellow2 = true;
green2 = false;
sec2 = 3000;
sec2 = 12000;
clearInterval(y);
y = setInterval(() => {
clearInterval(secondInterval);
secondInterval = setInterval(() => {
trafficSignal2();
console.log(sec2);
}, sec2);
}
};
let y = setInterval(() => {
let secondInterval = setInterval(() => {
trafficSignal2();
console.log(sec2);
}, sec2);
// trafficSignal1();
// trafficSignal2();
// const trafficSignal2 = () => {
// firstRed.style.backgroundColor = "red";
// firstGreen.style.backgroundColor = "gray";
// firstYellow.style.backgroundColor = "gray";
// secondRed.style.backgroundColor = "gray";
// secondYellow.style.backgroundColor = "gray";
// secondGreen.style.backgroundColor = "green";
// };
// const trafficSignal3 = () => {
// firstRed.style.backgroundColor = "red";
// firstGreen.style.backgroundColor = "gray";
// firstYellow.style.backgroundColor = "gray";
// Signal 3====================================
let sec3 = 0;
let red3 = true;
let yellow3 = false;
let green3 = false;
const trafficSignal3 = () => {
console.log(sec3);
if (red3 === true && yellow3 === false && green3 === false) {
thirdRed.style.backgroundColor = "red";
thirdYellow.style.backgroundColor = "gray";
thirdGreen.style.backgroundColor = "gray";
red3 = false;
yellow3 = true;
green3 = false;
if (isThree === 0) {
sec3 = 3000;
} else {
sec3 = 12000;
}
console.log("first red");
// secondRed.style.backgroundColor = "red";
// secondYellow.style.backgroundColor = "gray";
// secondGreen.style.backgroundColor = "gray";
clearInterval(thirdInterval);
thirdInterval = setInterval(() => {
trafficSignal3();
console.log(sec3);
}, sec3);
} else if (red3 === false && yellow3 === true && green3 === false) {
thirdRed.style.backgroundColor = "gray";
thirdYellow.style.backgroundColor = "yellow";
thirdGreen.style.backgroundColor = "gray";
red3 = false;
yellow3 = false;
green3 = true;
sec3 = 1000;
console.log("second red");
// thirdRed.style.backgroundColor = "gray";
// thirdYellow.style.backgroundColor = "gray";
// thirdGreen.style.backgroundColor = "green";
clearInterval(thirdInterval);
thirdInterval = setInterval(() => {
trafficSignal3();
console.log(sec3);
}, sec3);
} else if (red3 === false && yellow3 === false && green3 === true) {
thirdRed.style.backgroundColor = "gray";
thirdYellow.style.backgroundColor = "gray";
thirdGreen.style.backgroundColor = "green";
console.log("third red");
red3 = true;
yellow3 = false;
green3 = false;
sec3 = 3000;
isThree = 1;
isFour = 0;
clearInterval(thirdInterval);
thirdInterval = setInterval(() => {
trafficSignal3();
console.log(sec3);
}, sec3);
}
};
// fourthRed.style.backgroundColor = "gray";
// fourthYellow.style.backgroundColor = "yellow";
// };
let thirdInterval = setInterval(() => {
trafficSignal3();
console.log(sec3);
}, sec3);
// const trafficSignal4 = () => {
// firstRed.style.backgroundColor = "red";
// firstGreen.style.backgroundColor = "gray";
// firstYellow.style.backgroundColor = "gray";
// Signal 4 ====================================
// secondRed.style.backgroundColor = "red";
// secondYellow.style.backgroundColor = "gray";
// secondGreen.style.backgroundColor = "gray";
let sec4 = 0;
let red4 = true;
let yellow4 = false;
let green4 = false;
// thirdRed.style.backgroundColor = "red";
// thirdYellow.style.backgroundColor = "gray";
// thirdGreen.style.backgroundColor = "gray";
const trafficSignal4 = () => {
console.log(sec4);
// fourthRed.style.backgroundColor = "gray";
// fourthYellow.style.backgroundColor = "gray";
// fourthGreen.style.backgroundColor = "green";
// };
if (red4 === true && yellow4 === false && green4 === false) {
fourthRed.style.backgroundColor = "red";
fourthYellow.style.backgroundColor = "gray";
fourthGreen.style.backgroundColor = "gray";
red4 = false;
yellow4 = true;
green4 = false;
console.log("first red");
// let interval3 = setInterval(() => {
// trafficSignal3();
if (isFour === 0) {
sec4 = 7000;
} else {
sec4 = 12000;
}
// // clearInterval(interval2);
// }, 16000);
clearInterval(fourthInterval);
fourthInterval = setInterval(() => {
trafficSignal4();
console.log(sec4);
}, sec4);
} else if (red4 === false && yellow4 === true && green4 === false) {
fourthRed.style.backgroundColor = "gray";
fourthYellow.style.backgroundColor = "yellow";
fourthGreen.style.backgroundColor = "gray";
red4 = false;
yellow4 = false;
green4 = true;
sec4 = 1000;
// setInterval(() => {
// trafficSignal4();
console.log("second red");
clearInterval(fourthInterval);
fourthInterval = setInterval(() => {
trafficSignal4();
console.log(sec4);
}, sec4);
} else if (red4 === false && yellow4 === false && green4 === true) {
fourthRed.style.backgroundColor = "gray";
fourthYellow.style.backgroundColor = "gray";
fourthGreen.style.backgroundColor = "green";
console.log("third red");
red4 = true;
yellow4 = false;
green4 = false;
sec4 = 3000;
isFour = 1;
clearInterval(fourthInterval);
fourthInterval = setInterval(() => {
trafficSignal4();
console.log(sec4);
}, sec4);
}
};
// clearInterval(interval3);
// trafficSignal1();
// }, 20000);
let fourthInterval = setInterval(() => {
trafficSignal4();
console.log(sec4);
}, sec4);
index.html
View file @ 8813b9d0
......@@ -12,25 +12,25 @@
<h1 class="heading">Traffic Signal</h1>
<div class="mainContainer">
<div class="firstDiv">
<div id="firstRed" class="red1 red"></div>
<div id="firstRed" class="red1 red">1111</div>
<div id="firstYellow" class="yellow1 yellow"></div>
<div id="firstGreen" class="green1 green"></div>
</div>
<div class="secondDiv">
<div id="secondRed" class="red2 red"></div>
<div id="secondRed" class="red2 red">2222</div>
<div id="secondYellow" class="yellow2 yellow"></div>
<div id="secondGreen" class="green2 green"></div>
</div>
<!-- <div class="thirdDiv">
<div id="thirdRed" class="red3 red"></div>
<div class="thirdDiv">
<div id="thirdRed" class="red3 red">3333</div>
<div id="thirdYellow" class="yellow3 yellow"></div>
<div id="thirdGreen" class="green3 green"></div>
</div>
<div class="fourthDiv">
<div id="fourthRed" class="red4 red"></div>
<div id="fourthRed" class="red4 red">4444</div>
<div id="fourthYellow" class="yellow4 yellow"></div>
<div id="fourthGreen" class="green4 green"></div>
</div> -->
</div>
</div>
</div>
......
style.css
View file @ 8813b9d0
......@@ -19,6 +19,7 @@
.fourthDiv {
background-color: black;
padding: 15px;
border-radius: 10px;
}
.red,
......@@ -30,4 +31,9 @@
background-color: gray;
margin-top: 20px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment