Traffic signal in progress

app.js

+let firstRed = document.getElementById("firstRed");
+let firstYellow = document.getElementById("firstYellow");
+let firstGreen = document.getElementById("firstGreen");
+
+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 fourthRed = document.getElementById("fourthRed");
+// let fourthYellow = document.getElementById("fourthYellow");
+// let fourthGreen = document.getElementById("fourthGreen");
+
+let time = 6000;
+
+let sec1 = 0;
+let red = true;
+let yellow = false;
+let green = false;
+
+const trafficSignal1 = () => {
+  if (red === true && yellow === false && green === false) {
+    firstRed.style.backgroundColor = "red";
+    firstGreen.style.backgroundColor = "gray";
+    red = false;
+    yellow = true;
+    green = false;
+    sec1 = 3000;
+    console.log("first red");
+
+    clearInterval(x);
+    x = setInterval(() => {
+      trafficSignal1();
+      console.log(sec1);
+    }, sec1);
+  } else if (red === false && yellow === true && green === false) {
+    firstRed.style.backgroundColor = "gray";
+    firstYellow.style.backgroundColor = "yellow";
+    red = false;
+    yellow = false;
+    green = true;
+    sec1 = 1000;
+    console.log("second red");
+
+    clearInterval(x);
+    x = setInterval(() => {
+      trafficSignal1();
+      console.log(sec1);
+    }, sec1);
+  } else if (red === false && yellow === false && green === true) {
+    firstRed.style.backgroundColor = "gray";
+    firstYellow.style.backgroundColor = "gray";
+    firstGreen.style.backgroundColor = "green";
+    console.log("third red");
+    red = true;
+    yellow = false;
+    green = false;
+    sec1 = 2000;
+
+    clearInterval(x);
+    x = setInterval(() => {
+      trafficSignal1();
+      console.log(sec1);
+    }, sec1);
+  }
+};
+
+let x = setInterval(() => {
+  trafficSignal1();
+  console.log(sec1);
+}, sec1);
+
+//   Second Signal
+
+let sec2 = 0;
+let red2 = true;
+let yellow2 = false;
+let green2 = false;
+
+const trafficSignal2 = () => {
+  console.log(sec2);
+
+  if (red2 === true && yellow2 === false && green2 === false) {
+    secondRed.style.backgroundColor = "red";
+    secondGreen.style.backgroundColor = "gray";
+    red2 = false;
+    yellow2 = true;
+    green2 = false;
+    sec2 = 6000;
+    console.log("first red");
+
+    clearInterval(y);
+    y = setInterval(() => {
+      trafficSignal2();
+      console.log(sec2);
+    }, sec2);
+  } else if (red2 === false && yellow2 === true && green2 === false) {
+    secondRed.style.backgroundColor = "gray";
+    secondYellow.style.backgroundColor = "yellow";
+    red2 = false;
+    yellow2 = false;
+    green2 = true;
+    sec2 = 1000;
+    console.log("second red");
+
+    clearInterval(y);
+    y = setInterval(() => {
+      trafficSignal2();
+      console.log(sec2);
+    }, sec2);
+  } else if (red2 === false && yellow2 === false && green2 === true) {
+    secondRed.style.backgroundColor = "gray";
+    secondYellow.style.backgroundColor = "gray";
+    secondGreen.style.backgroundColor = "green";
+    console.log("third red");
+    red2 = true;
+    yellow2 = false;
+    green2 = false;
+    sec2 = 3000;
+
+    clearInterval(y);
+    y = setInterval(() => {
+      trafficSignal2();
+      console.log(sec2);
+    }, sec2);
+  }
+};
+
+let y = 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";
+
+//   secondRed.style.backgroundColor = "red";
+//   secondYellow.style.backgroundColor = "gray";
+//   secondGreen.style.backgroundColor = "gray";
+
+//   thirdRed.style.backgroundColor = "gray";
+//   thirdYellow.style.backgroundColor = "gray";
+//   thirdGreen.style.backgroundColor = "green";
+
+//   fourthRed.style.backgroundColor = "gray";
+//   fourthYellow.style.backgroundColor = "yellow";
+// };
+
+// const trafficSignal4 = () => {
+//   firstRed.style.backgroundColor = "red";
+//   firstGreen.style.backgroundColor = "gray";
+//   firstYellow.style.backgroundColor = "gray";
+
+//   secondRed.style.backgroundColor = "red";
+//   secondYellow.style.backgroundColor = "gray";
+//   secondGreen.style.backgroundColor = "gray";
+
+//   thirdRed.style.backgroundColor = "red";
+//   thirdYellow.style.backgroundColor = "gray";
+//   thirdGreen.style.backgroundColor = "gray";
+
+//   fourthRed.style.backgroundColor = "gray";
+//   fourthYellow.style.backgroundColor = "gray";
+//   fourthGreen.style.backgroundColor = "green";
+// };
+
+// let interval3 = setInterval(() => {
+//   trafficSignal3();
+
+//   //   clearInterval(interval2);
+// }, 16000);
+
+// setInterval(() => {
+//   trafficSignal4();
+
+//   clearInterval(interval3);
+//   trafficSignal1();
+// }, 20000);

index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Traffic Signal</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div>
+      <h1 class="heading">Traffic Signal</h1>
+      <div class="mainContainer">
+        <div class="firstDiv">
+          <div id="firstRed" class="red1 red"></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="secondYellow" class="yellow2 yellow"></div>
+          <div id="secondGreen" class="green2 green"></div>
+        </div>
+        <!-- <div class="thirdDiv">
+          <div id="thirdRed" class="red3 red"></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="fourthYellow" class="yellow4 yellow"></div>
+          <div id="fourthGreen" class="green4 green"></div>
+        </div> -->
+      </div>
+    </div>
+
+    <script src="./app.js"></script>
+  </body>
+</html>

style.css

+.heading {
+  text-align: center;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  text-decoration: underline;
+  word-spacing: 2px;
+  letter-spacing: 1.4px;
+  font-size: 50px;
+}
+
+.mainContainer {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 100px;
+}
+
+.firstDiv,
+.secondDiv,
+.thirdDiv,
+.fourthDiv {
+  background-color: black;
+  padding: 15px;
+}
+
+.red,
+.yellow,
+.green {
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  background-color: gray;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}