ilya_shyian
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
							<!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>
    </head>
    <body>
        <style>
            .light {
                width: 250px;
                height: 250px;
                margin-top: 15px;
                border-radius: 50%;
            }
            .trafficLightWrapper {
                display: flex;
                justify-content: space-between;
            }
            #trafficLightBlock,
            #predestrianTrafficLightBlock {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                width: 300px;
                height: fit-content;
                border: 1px solid black;
            }
        </style>
        <div class="trafficLightWrapper">
            <div id="trafficLightBlock">
                <div id="" class="light green"></div>
                <div id="" class="light yellow"></div>
                <div id="" class="light red"></div>
            </div>

            <div id="predestrianTrafficLightBlock">
                <div id="" class="light green"></div>
                <div id="" class="light red"></div>

                <button id="stopButton">STOP</button>
            </div>
        </div>

        <script>
            const changeLightColor = (parent, light) => {
                parent.querySelector(`.${light}`).style.background = light;

                [...parent.querySelectorAll(`.light`)]
                    .filter((el) => !el.classList.contains(light))
                    .map((el) => (el.style.background = "none"));
            };
            const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
//CВЕТОФОР
            // async function trafficLight(params = {}) {
            //     let { element, yellow = null, red = null, green = null } = params;
            //     while (true) {
            //         if (green) {
            //             changeLightColor(element, "green");
            //             await delay(green);
            //         }

            //         if (yellow) {
            //             changeLightColor(element, "yellow");
            //             await delay(yellow);
            //         }
            //         if (red) {
            //             changeLightColor(element, "red");
            //             await delay(red);
            //         }
            //         if (yellow) {
            //             changeLightColor(element, "yellow");
            //             await delay(yellow);
            //         }
            //     }
            // }

            // trafficLight({
            //     element: trafficLightBlock,
            //     red: 3000,
            //     yellow: 1000,
            //     green: 3000,
            // });

//DOMEVENTPROMISE

            // const domEventPromise = (element, event) => {
            //     return new Promise((resolve, reject) => {
            //         element.addEventListener(event, (e) => {
            //             resolve(e);
            //         });
            //     });
            // };

            // domEventPromise(document, "click").then((e) => console.log("event click happens", e));

//PEDESTRIANTRAFFICLIGHT
            // let isStopButtonReady = true;
            // const domEventPromise = (element, event) => {
            //     return new Promise((resolve, reject) => {
            //         isStopButtonReady &&
            //             element.addEventListener(event, (e) => {
            //                 isStopButtonReady = false;
            //                 setTimeout(() => (isStopButtonReady = true), 5000);
            //                 resolve(e);
            //             });
            //     });
            // };

            // async function trafficLight(params = {}) {
            //     let { element, yellow = null, red = null, green = null } = params;
            //     while (true) {
            //         if (green) {
            //             changeLightColor(element, "green");
            //             await delay(green);
            //         }

            //         if (yellow) {
            //             changeLightColor(element, "yellow");
            //             await delay(yellow);
            //         }
            //         if (red) {
            //             changeLightColor(element, "red");
            //             await Promise.race([delay(red), domEventPromise(stopButton, "click")]);
            //         }
            //         if (yellow) {
            //             changeLightColor(element, "yellow");
            //             await delay(yellow);
            //         }
            //     }
            // }

            // trafficLight({
            //     element: predestrianTrafficLightBlock,
            //     red: 3000,
            //     green: 2000,
            // });

//SPEEDTEST
            // async function speedtest(getPromise, count, parallel = 1) {
            //     let duration = 0;

            //     for (let i = 0; i < count; i++) {
            //         let promises = [];
            //         let time1 = performance.now();
            //         for (let promiseIndex = 1; promiseIndex <= parallel; promiseIndex++) {
            //             promises[promises.length] = getPromise();
            //         }

            //         await Promise.all(promises);
            //         let time2 = performance.now();
            //         duration += Math.floor(time2 - time1);
            //     }

            //     let time2 = performance.now();
            //     let querySpeed = +(count / duration).toFixed(5);
            //     let queryDuration = duration / parallel;
            //     let parallelSpeed = +((count * parallel) / duration).toFixed(5);
            //     let parallelDuration = duration / (count * parallel);

            //     return {
            //         duration,
            //         querySpeed,
            //         queryDuration,
            //         parallelSpeed,
            //         parallelDuration,
            //     };
            // }

            // speedtest(() => delay(1000), 10, 10).then((result) => console.log(result));
            // // {duration: 10000,
            // // querySpeed: 0.001, //1 тысячная запроса за миллисекунду
            // // queryDuration: 1000, //1000 миллисекунд на один реальный запрос в среднем
            // // parallelSpeed: 0.01  // 100 запросов за 10000 миллисекунд
            // // parallelDuration: 100 // 100 запросов за 10000 миллисекунд
            // speedtest(() => fetch("http://swapi.dev/api/people/1").then((res) => res.json()), 10, 5).then((result) =>
            //     console.log(result)
            // );
        </script>
    </body>
</html>