const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));

async function trafficLight() {
  while (true) {
    const green = document.querySelector(".green");
    const yellow = document.querySelector(".yellow");
    const red = document.querySelector(".red");

    green.style.background = "green";
    red.style.background = "black";
    var numGreen = 5;
    const timerGreen = () => {
      numGreen--;
      numGreen === 0
        ? (green.style.color = "black") && (red.style.color = "black")
        : setTimeout(timerGreen, 1000) && (green.style.color = "white");
      green.innerHTML = numGreen;
    };
    setTimeout(timerGreen, 1000);
    await delay(5000); // включаем зеленый

    green.style.background = "black";
    yellow.style.background = "yellow";
    var numYellow = 3;
    const timerYellow = () => {
      numYellow--;
      numYellow === 0
        ? (yellow.style.color = "black")
        : setTimeout(timerYellow, 1000) && (yellow.style.color = "white");
      yellow.innerHTML = numYellow;
    };
    setTimeout(timerYellow, 1000);
    await delay(3000); // включаем желтый

    yellow.style.background = "black";
    red.style.background = "red";
    var numRed = 7;
    const timerRed = () => {
      numRed--;
      numRed === 0
        ? (red.style.color = "black")
        : setTimeout(timerRed, 1000) && (red.style.color = "white");
      red.innerHTML = numRed;
    };
    setTimeout(timerRed, 1000);
    await delay(7000) // включаем красный
  }
}

trafficLight();