illiaKozyr
/
Homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Светофор</title>
        <style>
            .container {
                padding-top: 30px;
                display: flex;
                justify-content: center;
            }
            #trafficLightBlock {
                background-color: black;
                max-width: 200px;
                height: 660px;
                padding: 30px;
            }
            #trafficLightPedestrian {
                margin-left: 100px;
                background-color: black;
                max-width: 200px;
                height: 430px;
                padding: 30px;
            }
            #red,
            #Red {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background-color: gray;
                margin: 0;
                margin-bottom: 30px;
            }
            #yellow {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background-color: gray;
                margin: 0;
                margin-bottom: 30px;
            }
            #green,
            #Green {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background-color: gray;
                margin: 0;
            }
            h1 {
                font-size: 80px;
                color: white;
                text-align: center;
                margin: 0;
                padding-top: 50px;
            }
            #knopka {
                margin-top: 50px;
                width: 200px;
                height: 50px;
                background-color: grey;
                color: white;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="trafficLightBlock">
                <div id="red">
                    <h1 id="redTimer"></h1>
                </div>
                <div id="yellow">
                    <h1 id="yellowTimer"></h1>
                </div>
                <div id="green">
                    <h1 id="greenTimer"></h1>
                </div>
            </div>
            <div id="trafficLightPedestrian">
                <div id="Red">
                    <h1 id="RedTimer"></h1>
                </div>
                <div id="Green">
                    <h1 id="GreenTimer"></h1>
                </div>
                <button id="knopka">Click to go</button>
            </div>
        </div>

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

            async function timerShow(sec, id) {
                for (sec; sec > 0; sec--) {
                    id.innerHTML = sec;
                    a = await delay(1000);
                    id.innerHTML = "";
                }
            }

            async function trafficLight() {
                while (true) {
                    // delay(1000).then(() => (document.getElementById("red").style.background = "red"))
                    // delay(2000).then(() => (document.getElementById("red").style.background = "grey"))
                    // delay(3000).then(() => (document.getElementById("yellow").style.background = "orange"))
                    // delay(4000).then(() => (document.getElementById("yellow").style.background = "grey"))
                    // delay(5000).then(() => (document.getElementById("green").style.background = "green"))
                    // delay(6000).then(() => (document.getElementById("green").style.background = "grey"))

                    let styleRed = (document.getElementById(
                        "red"
                    ).style.background = "red");

                    timerShow(4, redTimer);

                    var awaitRedGrey = await delay(5000);
                    var styleGrey = (document.getElementById(
                        "red"
                    ).style.background = "grey");
                    let styleYellow = (document.getElementById(
                        "yellow"
                    ).style.background = "yellow");

                    var awaitRedGrey = await delay(2000);
                    var styleGrey = (document.getElementById(
                        "yellow"
                    ).style.background = "grey");
                    let styleGreen = (document.getElementById(
                        "green"
                    ).style.background = "green");

                    timerShow(4, greenTimer);

                    var awaitRedGrey = await delay(5000);
                    var styleGrey = (document.getElementById(
                        "green"
                    ).style.background = "grey");
                    let styleYelloww = (document.getElementById(
                        "yellow"
                    ).style.background = "orange");

                    var awaitRedGrey = await delay(2000);
                    var styleGrey = (document.getElementById(
                        "yellow"
                    ).style.background = "grey");
                }
            }

            function domEventPromise(btn, eventName) {
                return new Promise((resolve, reject) => {
                    btn.addEventListener(eventName, (event) => {
                        resolve(event);
                    });
                    btn.removeEventListener(eventName, (event) => {
                        resolve(event);
                    });
                });
            }

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

            trafficLight();
            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>