HW/HW014/index2.js

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

let dom1 = document.getElementById('color')
let dom2 = document.getElementById('humanColor')

let switchTraffic = true

async function trafficLight(dom) {

    let red = document.getElementById('red')
    let yellow = document.getElementById('yellow')
    let green = document.getElementById('green')
    let redTimer = document.getElementById('redTimer')
    let greenTimer = document.getElementById('greenTimer')

    while (true) {
        await delay(500)
            .then(() => red.style.opacity = 1)

        await delay(10000)
            .then(() => red.style.opacity = 0.3)
            .then(timer(10, redTimer))

        await delay(500)
            .then(() => yellow.style.opacity = 1)

        await delay(1000)
            .then(() => yellow.style.opacity = 0.3)

        await delay(500)
            .then(() => green.style.opacity = 1)

        await delay(10000)
            .then(() => green.style.opacity = 0.3)
            .then(timer(10, greenTimer))

        await delay(500)
            .then(() => yellow.style.opacity = 1)

        await delay(1000)
            .then(() => yellow.style.opacity = 0.3)
    }
}

let btn = document.getElementById('btn')

async function humanTrafficLight(dom) {
    //добавил обертку в html, указал параметр ради задания

    let red = document.getElementById('humanRed')
    let green = document.getElementById('humanGreen')

    let redTimer = document.getElementById('humanRedTimer')
    let greenTimer = document.getElementById('humanGreenTimer')

    if (switchTraffic) {
        while (true) {

            await delay(500)
                .then(() => green.style.opacity = 1)

            await delay(10000)
                .then(() => green.style.opacity = 0.3)
                .then(timer(10, greenTimer))

            await delay(1500)

            await delay(500)
                .then(() => red.style.opacity = 1)

            await delay(10000)
                .then(() => red.style.opacity = 0.3)
                .then(timer(10, redTimer))

            await delay(1500)
        }
    }
    else {
        while (true) {
            await delay(500)
                .then(() => red.style.opacity = 1)

            await delay(10000)
                .then(() => red.style.opacity = 0.3)
                .then(timer(10, redTimer))

            await delay(1500)

            await delay(500)
                .then(() => green.style.opacity = 1)

            await delay(10000)
                .then(() => green.style.opacity = 0.3)
                .then(timer(10, greenTimer))

            await delay(1500)
        }
    }

}

async function timer(time, value) {
    for (time; time > 0; time--) {
        value.innerHTML = time
        await delay(1000)
        value.innerHTML = ""
    }
}

trafficLight(dom1)
humanTrafficLight(dom2)

function domEventPromise(click, eventName) {
    return new Promise((resolve) => {
        click.addEventListener(eventName, (e) => {
            switchTraffic = !switchTraffic
            humanTrafficLight(dom2)
            resolve(e)
        })
        click.removeEventListener(eventName, (e) => {
            resolve(e)
        })
    })
}

btn.onclick = () => domEventPromise(btn, 'click').then(e => console.log('event click happens', e))