js4online_homework/14/main.js

// Async/Await Homework 2
// Светофор
const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
const red = document.querySelector('.red')
const yellow = document.querySelector('.yellow')
const green = document.querySelector('.green')

async function trafficLight() {
   while (true) {
      changeLight(green)
      await delay(3000)
      changeLight(red)
      await delay(3000)
      changeLight(yellow)
      await delay(3000)
   }
}
trafficLight()

function changeLight(color) {
   if (color !== red && color !== yellow) {
      red.style.opacity = .2
      yellow.style.opacity = .2
      green.style.opacity = 1
   } if (color !== red && color !== green) {
      red.style.opacity = .2
      yellow.style.opacity = 1
      green.style.opacity = .2
   }
   if (color !== yellow && color !== green) {
      red.style.opacity = 1
      yellow.style.opacity = .2
      green.style.opacity = .2
   }
}

// PedestrianTrafficLight
const red1 = document.querySelector('.red1')
const green1 = document.querySelector('.green1')
let btn1 = document.querySelector('.btn1')
async function PedestrianTrafficLight() {
   while (true) {
      changePedestrianTrafficLight(red1)
      await Promise.race([delay(4100), new Promise((ok) => btn1.onclick = ok)])
      changePedestrianTrafficLight(green1)
      await Promise.race([delay(4100), new Promise((ok) => btn1.onclick = ok)])
   }
}
PedestrianTrafficLight()

btn1.addEventListener('click', () => {
   changeLight(red);
   changePedestrianTrafficLight(green1);
   btn1.disabled = true;
   setTimeout(() => { btn1.disabled = false }, 10000);
})

function changePedestrianTrafficLight(color1) {
   if (color1 !== red1) {
      red1.style.opacity = .2
      green1.style.opacity = 1
   }
   if (color1 !== green1) {
      red1.style.opacity = 1
      green1.style.opacity = .2
   }
}

// domEventPromise
let btn = document.querySelector('.btn')
function domEventPromise(button, eventName) {
   return new Promise(res => {
      button.addEventListener(eventName, (e) => res(e))
      button.removeEventListener(eventName, (e) => res(e))
   });
}
domEventPromise(btn, 'click')
   .then(e => console.log('event click happens', e)).then(e => (btn.disabled = true, e))