Pika
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            padding: 50px 0 0 100px;

        }

        #trafficLight {
            max-width: 200px;
            height: 700px;
            background-color: black;
        }

        #Red {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: gray;
            margin: 0 0 30px 0;

        }

        #Yellow {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: gray;
            margin: 0 0 30px 0;

        }

        #Green {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: gray;
            margin: 0;
        }

        h3 {
            padding: 90px 0 0 95px;

        }

        #pedestrianTrafficLight {
            max-width: 200px;
            height: 460px;
            background-color: black;
            margin-left: 100px;

        }

        #red {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: gray;
        }

        #green {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: gray;
        }

        button {
            width: 150px;
            height: 30px;
            margin: 20px 0 0 420px;
            display: inline;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="trafficLight">
            <div id="Red">
                <h3 id="timerRed"></h3>
            </div>
            <div id="Yellow">
                <h3 id="timerYellow"></h3>
            </div>
            <div id="Green">
                <h3 id="timerGreen"></h3>
            </div>
        </div>
        <div id="pedestrianTrafficLight">

            <div id="red">
                <h3 id="redTimer"></h3>
            </div>
            <div id="green">
                <h3 id="greenTimer"></h3>
            </div>


        </div>

    </div>
    <button id="knopka">Сhange</button>
    <script>
        const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

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

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

        async function trafficLight() {
            while (true) {
                if (true) {
                    Green.style.background = "#00FF00";
                    Red.style.background = "grey";
                    knopka.disabled = true
                    await delay(3000);
                    knopka.disabled = false
                    await Promise.race([
                        delay(5000),
                        domEventPromise(knopka, 'click').then((e) => console.log('event click happens', e))
                    ])
                }
                
                var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");

                var awaitGrey = await delay(1000);
                var styleGrey = (document.getElementById("Yellow").style.background = "grey");

                if (true) {
                    Red.style.background = "#FF0000";
                    Green.style.background = "grey";
                    knopka.disabled = true
                    await delay(3000);
                    knopka.disabled = false
                    await Promise.race([
                        delay(5000),
                        
                    ])
                }
                
                var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");

                var awaitGrey = await delay(2000);
                var styleGrey = (document.getElementById("Yellow").style.background = "grey");
            }
            // var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");

            // var awaitGrey = await delay(2000);
            // var styleGrey = (document.getElementById("Yellow").style.background = "grey");

            // var styleYeGreen = (document.getElementById("Green").style.background = "#00FF00");

            // var awaitGrey = await delay(6000);
            // var styleGrey = (document.getElementById("Green").style.background = "grey");

            // var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");

            // var awaitGrey = await delay(2000);
            // var styleGrey = (document.getElementById("Yellow").style.background = "grey");


        }
        // }
        trafficLight()


        // async function trafficLight() {
        //     while (true) {
        //         var styleRed = (document.getElementById("Red").style.background = "#FF0000");
        //         timer(5, timerRed)
        //         var awaitGrey = await delay(6000);
        //         var styleGrey = (document.getElementById("Red").style.background = "grey");

        //         var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
        //         timer(1, timerYellow)
        //         var awaitGrey = await delay(2000);
        //         var styleGrey = (document.getElementById("Yellow").style.background = "grey");

        //         var styleYeGreen = (document.getElementById("Green").style.background = "#00FF00");
        //         timer(5, timerGreen)
        //         var awaitGrey = await delay(6000);
        //         var styleGrey = (document.getElementById("Green").style.background = "grey");

        //         var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
        //         timer(1, timerYellow)
        //         var awaitGrey = await delay(2000);
        //         var styleGrey = (document.getElementById("Yellow").style.background = "grey");


        //     }
        // }
        // trafficLight()


        async function pedestrianTrafficLight() {
            while (true) {
                if (true) {
                    red.style.background = "#FF0000";
                    green.style.background = "grey";
                    knopka.disabled = true
                    await delay(3000);
                    knopka.disabled = false;
                    await Promise.race([
                        delay(5000),
                        domEventPromise(knopka, 'click').then((e) => {
                            console.log('event click happens', e)

                        })
                    ])
                    if (true) {
                        await delay(1000)
                        knopka.disabled = true
                        green.style.background = " #00FF00"
                        red.style.background = "grey"
                        await delay(8000)
                        red.style.background ="grey"
                        green.style.background = "grey"
                        await delay(2000)
                    }
                }
            }
        }
        pedestrianTrafficLight()


        async function speedtest(getPromise, count, parallel = 1) {
                let duration = performance.now();
                let initParallel = parallel;
                let promisArray = [];
                for (let i = 0; i < count; i++) {
                    promisArray[i] = getPromise();
                    parallel -= 1;
                    await Promise.all(promisArray);
                }

                console.log(promisArray);

                duration = performance.now() - duration;
                console.log(duration);
                console.log(initParallel * count);

                return {
                    duration: duration,
                    querySpeed: count / duration,
                    queryDuration: duration / count,
                    parallelSpeed: (count / duration) * initParallel,
                    parallelDuration: duration / (initParallel * count),
                };
            }

            speedtest(() => delay(1000), 10, 10).then((result) =>
                console.log(result)
            );
            speedtest(
                () =>
                    fetch("http://swapi.dev/api/people/1").then((res) =>
                        res.json()
                    ),
                1,
                2
            );
    </script>

</body>

</html>