maryluis
/
homeworks_Second_modul


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Traffic light2</title>
</head>
<body>
    <div class="traffic-lightS">
        <div id="traffic-light" class="lights">
            <div id="red" class="oneColor"></div>
            <div id="yellow" class="oneColor"></div>
            <div id="green" class="oneColor"></div>
        </div>
        <div id="pedestrian-light" class="lights">
            <div id="pedestrian-red" class="oneColor"></div>
            <div id="pedestrian-green" class="oneColor"></div>
        </div>
    </div>

    <button id="knopka">knopka</button>
    <div class="traffic-lightS">
        <div id="pedestrian-light-async" class="lights">
            <div id="pedestrian2-red" class="oneColor"></div>
            <div id="pedestrian2-green" class="oneColor"></div>
        </div>
    </div>
    <button id="promise">promise</button>

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


        let red = document.getElementById("red");
        let yellow = document.getElementById("yellow");
        let green = document.getElementById("green");
        let pedRed = document.getElementById("pedestrian-red");
        let pedYellow = document.getElementById("pedestrian-yellow");
        let pedGreen = document.getElementById("pedestrian-green");
        let redlight;

        let pedRed2 = document.getElementById("pedestrian2-red");
        let pedGreen2 = document.getElementById("pedestrian2-green");
        let promise = document.getElementById("promise")
        let buttonPushed = false;

        async function trafficLight(){
                while (true){
                    
                    red.style = "background-color: red";
                    let redSec = 5;
                    for (let i = redSec; i > 0; i--) {
                        red.innerText = redSec;
                        redSec -=1;
                        await delay(1000);
                    }

                    yellow.style = "background-color: yellow";
                    red.innerText = ""
                    await delay(500);
                    red.style = "background-color: black";
                    await delay(500);

                    yellow.style = "background-color: black"
                    green.style = "background-color: green";
                    let greenSec = 20;
                    for(let i = greenSec; i > 0; i--) {
                        green.innerText = greenSec;
                        await delay(1000);
                        greenSec -=1;
                    }

                    
                    yellow.style = "background-color: yellow";
                    green.innerText = "";
                    await delay(500);
                    green.style = "background-color: black";
                    await delay(500);
                    yellow.style = "background-color: black";
            }
        }
        trafficLight()
        async function pedestrianTrafficLight(msc){
            while(true) {
                if(redlight == false) {
                    redlight = true;
                    pedRed.style = "background-color: red";
                    pedGreen.style = "background-color: black";
                    await delay(21000)
                } else {
                    redlight = false;
                    pedRed.style = "background-color: black";        
                    pedGreen.style = "background-color: green";
                    await delay(6000);
                }              
            }         
        }
        pedestrianTrafficLight()


        function domEventPromise(element, eventName) {
            return new Promise(resolve => {
                element.addEventListener(eventName, ev => {
                    resolve(ev)
                    element.removeEventListener(eventName, this)
                });              
            }) 
        }


        async function greenOn() {
            if(redlight == true) {
                    pedRed.style = "background-color: black";                   
                    pedGreen.style = "background-color: green";
                    red.style = "background-color: red";
                    green.style = "background-color: black; color: black";
                    
                    let redSec = 5;
                    for (let i = redSec; i > 0; i--) {
                        red.innerText = redSec;
                        redSec -=1;
                        await delay(1000);
                    }

                    red.innerText = "";
                    yellow.style = "background-color: yellow";  
                    await delay(500);
                    red.style = "background-color: black";
                    await delay(500);
                    yellow.style = "background-color: black";
                    green.style = "background-color: green";     
                    pedRed.style = "background-color:red";
                    pedGreen.style = "background-color: black";
           
         
                }
            }

        
        setInterval(() => {
            domEventPromise(knopka, 'click').then( e => addEventListener("click", greenOn()))
        }, 20000);


        async function PromiseTraffic() {
            var flag = true;
            let timeDelay = 15000;
            while(true) {
                pedRed2.style = "background-color: red";
                pedGreen2.style = "background-color: black";
                
                if(flag) {
                    var res = await Promise.race([delay(timeDelay), domEventPromise2(promise, 'click')]);
                } else {
                    var res = await delay(timeDelay);
                }
                
                if(res != timeDelay) {
                    flag = false;
                    setTimeout(() => {
                        flag = true;
                    }, 20000);
                }

                pedRed2.style = "background-color: black";
                pedGreen2.style = "background-color: green";
                
                await delay(5000);             
            }
        }

        PromiseTraffic()


        function domEventPromise2(element, eventName) {
            return new Promise(resolve => {
                var fnc = event => {
                    resolve(event)
                    element.removeEventListener(eventName, fnc)
                };

                element.addEventListener(eventName, fnc);              
            }) 
        }

         
    </script>
</body>
</html>