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"); ...@@ -6,15 +6,16 @@ let secondRed = document.getElementById("secondRed");
let secondYellow = document.getElementById("secondYellow"); let secondYellow = document.getElementById("secondYellow");
let secondGreen = document.getElementById("secondGreen"); let secondGreen = document.getElementById("secondGreen");
// let thirdRed = document.getElementById("thirdRed"); let thirdRed = document.getElementById("thirdRed");
// let thirdYellow = document.getElementById("thirdYellow"); let thirdYellow = document.getElementById("thirdYellow");
// let thirdGreen = document.getElementById("thirdGreen"); let thirdGreen = document.getElementById("thirdGreen");
// let fourthRed = document.getElementById("fourthRed"); let fourthRed = document.getElementById("fourthRed");
// let fourthYellow = document.getElementById("fourthYellow"); let fourthYellow = document.getElementById("fourthYellow");
// let fourthGreen = document.getElementById("fourthGreen"); let fourthGreen = document.getElementById("fourthGreen");
let time = 6000; let isThree = 0;
let isFour = 0;
let sec1 = 0; let sec1 = 0;
let red = true; let red = true;
...@@ -28,11 +29,11 @@ const trafficSignal1 = () => { ...@@ -28,11 +29,11 @@ const trafficSignal1 = () => {
red = false; red = false;
yellow = true; yellow = true;
green = false; green = false;
sec1 = 3000; sec1 = 12000;
console.log("first red"); console.log("first red");
clearInterval(x); clearInterval(firstInterval);
x = setInterval(() => { firstInterval = setInterval(() => {
trafficSignal1(); trafficSignal1();
console.log(sec1); console.log(sec1);
}, sec1); }, sec1);
...@@ -45,8 +46,8 @@ const trafficSignal1 = () => { ...@@ -45,8 +46,8 @@ const trafficSignal1 = () => {
sec1 = 1000; sec1 = 1000;
console.log("second red"); console.log("second red");
clearInterval(x); clearInterval(firstInterval);
x = setInterval(() => { firstInterval = setInterval(() => {
trafficSignal1(); trafficSignal1();
console.log(sec1); console.log(sec1);
}, sec1); }, sec1);
...@@ -58,139 +59,220 @@ const trafficSignal1 = () => { ...@@ -58,139 +59,220 @@ const trafficSignal1 = () => {
red = true; red = true;
yellow = false; yellow = false;
green = false; green = false;
sec1 = 2000; sec1 = 3000;
clearInterval(x); clearInterval(firstInterval);
x = setInterval(() => { firstInterval = setInterval(() => {
trafficSignal1(); trafficSignal1();
console.log(sec1); console.log(sec1);
}, sec1); }, sec1);
} }
}; };
let x = setInterval(() => { let firstInterval = setInterval(() => {
trafficSignal1(); trafficSignal1();
console.log(sec1); console.log(sec1);
}, sec1); }, sec1);
// Second Signal // Second Signal ====================================
let sec2 = 0; let sec2 = 0;
let red2 = true; let red2 = false;
let yellow2 = false; let yellow2 = false;
let green2 = false; let green2 = true;
const trafficSignal2 = () => { const trafficSignal2 = () => {
console.log(sec2); console.log(sec2);
if (red2 === true && yellow2 === false && green2 === false) { if (red2 === false && yellow2 === false && green2 === true) {
secondRed.style.backgroundColor = "red"; secondRed.style.backgroundColor = "gray";
secondGreen.style.backgroundColor = "gray"; secondYellow.style.backgroundColor = "gray";
red2 = false; secondGreen.style.backgroundColor = "green";
yellow2 = true; red2 = true;
yellow2 = false;
green2 = false; green2 = false;
sec2 = 6000; sec2 = 3000;
console.log("first red"); console.log("first red");
isThree = 0;
clearInterval(y); clearInterval(secondInterval);
y = setInterval(() => { secondInterval = setInterval(() => {
trafficSignal2(); trafficSignal2();
console.log(sec2); console.log(sec2);
}, sec2); }, sec2);
} else if (red2 === false && yellow2 === true && green2 === false) { } else if (red2 === false && yellow2 === true && green2 === false) {
secondRed.style.backgroundColor = "gray"; secondRed.style.backgroundColor = "gray";
secondYellow.style.backgroundColor = "yellow"; secondYellow.style.backgroundColor = "yellow";
secondGreen.style.backgroundColor = "gray";
red2 = false; red2 = false;
yellow2 = false; yellow2 = false;
green2 = true; green2 = true;
sec2 = 1000; sec2 = 1000;
console.log("second red"); console.log("second red");
clearInterval(y); clearInterval(secondInterval);
y = setInterval(() => { secondInterval = setInterval(() => {
trafficSignal2(); trafficSignal2();
console.log(sec2); console.log(sec2);
}, sec2); }, sec2);
} else if (red2 === false && yellow2 === false && green2 === true) { } else if (red2 === true && yellow2 === false && green2 === false) {
secondRed.style.backgroundColor = "gray"; secondRed.style.backgroundColor = "red";
secondYellow.style.backgroundColor = "gray"; secondYellow.style.backgroundColor = "gray";
secondGreen.style.backgroundColor = "green"; secondGreen.style.backgroundColor = "gray";
console.log("third red"); console.log("third red");
red2 = true; red2 = false;
yellow2 = false; yellow2 = true;
green2 = false; green2 = false;
sec2 = 3000; sec2 = 12000;
clearInterval(y); clearInterval(secondInterval);
y = setInterval(() => { secondInterval = setInterval(() => {
trafficSignal2(); trafficSignal2();
console.log(sec2); console.log(sec2);
}, sec2); }, sec2);
} }
}; };
let y = setInterval(() => { let secondInterval = setInterval(() => {
trafficSignal2(); trafficSignal2();
console.log(sec2); console.log(sec2);
}, sec2); }, sec2);
// trafficSignal1(); // Signal 3====================================
// trafficSignal2();
let sec3 = 0;
// const trafficSignal2 = () => { let red3 = true;
// firstRed.style.backgroundColor = "red"; let yellow3 = false;
// firstGreen.style.backgroundColor = "gray"; let green3 = false;
// firstYellow.style.backgroundColor = "gray";
const trafficSignal3 = () => {
// secondRed.style.backgroundColor = "gray"; console.log(sec3);
// secondYellow.style.backgroundColor = "gray";
// secondGreen.style.backgroundColor = "green"; if (red3 === true && yellow3 === false && green3 === false) {
// }; thirdRed.style.backgroundColor = "red";
thirdYellow.style.backgroundColor = "gray";
// const trafficSignal3 = () => { thirdGreen.style.backgroundColor = "gray";
// firstRed.style.backgroundColor = "red"; red3 = false;
// firstGreen.style.backgroundColor = "gray"; yellow3 = true;
// firstYellow.style.backgroundColor = "gray"; green3 = false;
if (isThree === 0) {
sec3 = 3000;
} else {
sec3 = 12000;
}
console.log("first red");
// secondRed.style.backgroundColor = "red"; clearInterval(thirdInterval);
// secondYellow.style.backgroundColor = "gray"; thirdInterval = setInterval(() => {
// secondGreen.style.backgroundColor = "gray"; 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"; clearInterval(thirdInterval);
// thirdYellow.style.backgroundColor = "gray"; thirdInterval = setInterval(() => {
// thirdGreen.style.backgroundColor = "green"; 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"; let thirdInterval = setInterval(() => {
// fourthYellow.style.backgroundColor = "yellow"; trafficSignal3();
// }; console.log(sec3);
}, sec3);
// const trafficSignal4 = () => { // Signal 4 ====================================
// firstRed.style.backgroundColor = "red";
// firstGreen.style.backgroundColor = "gray";
// firstYellow.style.backgroundColor = "gray";
// secondRed.style.backgroundColor = "red"; let sec4 = 0;
// secondYellow.style.backgroundColor = "gray"; let red4 = true;
// secondGreen.style.backgroundColor = "gray"; let yellow4 = false;
let green4 = false;
// thirdRed.style.backgroundColor = "red"; const trafficSignal4 = () => {
// thirdYellow.style.backgroundColor = "gray"; console.log(sec4);
// thirdGreen.style.backgroundColor = "gray";
// fourthRed.style.backgroundColor = "gray"; if (red4 === true && yellow4 === false && green4 === false) {
// fourthYellow.style.backgroundColor = "gray"; fourthRed.style.backgroundColor = "red";
// fourthGreen.style.backgroundColor = "green"; fourthYellow.style.backgroundColor = "gray";
// }; fourthGreen.style.backgroundColor = "gray";
red4 = false;
yellow4 = true;
green4 = false;
console.log("first red");
// let interval3 = setInterval(() => { if (isFour === 0) {
// trafficSignal3(); sec4 = 7000;
} else {
sec4 = 12000;
}
// // clearInterval(interval2); clearInterval(fourthInterval);
// }, 16000); 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(() => { console.log("second red");
// trafficSignal4(); 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); let fourthInterval = setInterval(() => {
// trafficSignal1(); trafficSignal4();
// }, 20000); console.log(sec4);
}, sec4);
index.html
View file @ 8813b9d0
...@@ -12,25 +12,25 @@ ...@@ -12,25 +12,25 @@
<h1 class="heading">Traffic Signal</h1> <h1 class="heading">Traffic Signal</h1>
<div class="mainContainer"> <div class="mainContainer">
<div class="firstDiv"> <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="firstYellow" class="yellow1 yellow"></div>
<div id="firstGreen" class="green1 green"></div> <div id="firstGreen" class="green1 green"></div>
</div> </div>
<div class="secondDiv"> <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="secondYellow" class="yellow2 yellow"></div>
<div id="secondGreen" class="green2 green"></div> <div id="secondGreen" class="green2 green"></div>
</div> </div>
<!-- <div class="thirdDiv"> <div class="thirdDiv">
<div id="thirdRed" class="red3 red"></div> <div id="thirdRed" class="red3 red">3333</div>
<div id="thirdYellow" class="yellow3 yellow"></div> <div id="thirdYellow" class="yellow3 yellow"></div>
<div id="thirdGreen" class="green3 green"></div> <div id="thirdGreen" class="green3 green"></div>
</div> </div>
<div class="fourthDiv"> <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="fourthYellow" class="yellow4 yellow"></div>
<div id="fourthGreen" class="green4 green"></div> <div id="fourthGreen" class="green4 green"></div>
</div> --> </div>
</div> </div>
</div> </div>
......
style.css
View file @ 8813b9d0
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
.fourthDiv { .fourthDiv {
background-color: black; background-color: black;
padding: 15px; padding: 15px;
border-radius: 10px;
} }
.red, .red,
...@@ -30,4 +31,9 @@ ...@@ -30,4 +31,9 @@
background-color: gray; background-color: gray;
margin-top: 20px; margin-top: 20px;
margin-bottom: 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