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

async function trafficLight(dom){
    dom = document.getElementById('color')
    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)
    }
} 

async function humanTrafficLight(dom){
    dom = document.getElementById('humanColor')
    let red = document.getElementById('humanRed')
    let green = document.getElementById('humanGreen') 
    let btn = document.getElementById('btn')
    let redTimer = document.getElementById('humanRedTimer')
    let greenTimer = document.getElementById('humanGreenTimer')

    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)

    }
} 

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

trafficLight()
humanTrafficLight()

function domEventPromise(click, eventName) {
        return new Promise((resolve, reject) => {
            click.addEventListener(eventName, (e) => {
                resolve(e)
            })
            click.removeEventListener(eventName, (e) => {
                resolve(e)
            })
        })
    }
btn.onclick = () => domEventPromise(btn, 'click').then( e => console.log('event click happens', e))