maryluis
/
homeworks_Second_modul


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<!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 light</title>
</head>
<body>
    <div id="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-yellow" class="oneColor"></div> -->
            <div id="pedestrian-green" class="oneColor"></div>
        </div>
    </div>
    <button id="knopka">knopka</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 pressed = 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);
                    }

                    //await delay(4000);
                    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);
    </script>
</body>
</html>