Browse Source

HW-15 done

Olga_Brekhuntsova 2 years ago
parent
commit
9563ca51e1

+ 2 - 2
hw-js-14-async-await/js/chat.js

@@ -202,8 +202,8 @@ const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));
 async function checkLoop() {
     while (true) {
         await delay(5000);
-            getMessages(lastMessageId);
-}
+        getMessages(lastMessageId);
+       }
 }
 checkLoop();
 

+ 104 - 0
hw-js-15-async-await-2/.gitignore

@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

+ 12 - 0
hw-js-15-async-await-2/.prettierrc.json

@@ -0,0 +1,12 @@
+{
+    "printWidth": 80,
+    "tabWidth": 2,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "avoid",
+    "proseWrap": "always"
+  }

+ 3 - 0
hw-js-15-async-await-2/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}

+ 1 - 0
hw-js-15-async-await-2/README.md

@@ -0,0 +1 @@
+Хостинг http://hw_js_15.olgapistryak.fe.a-level.com.ua/

+ 65 - 0
hw-js-15-async-await-2/index.css

@@ -0,0 +1,65 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 30px;
+  text-align: center;
+}
+.wrapper {
+  border: solid rgb(54, 47, 47) 3px;
+  padding: 10px;
+  width: 100px;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: lightgray;
+  border-radius: 5px;
+  margin-bottom: 20px;
+}
+#rootSpeed.wrapper {
+  width: auto;
+}
+.lightColor {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background-color: rgb(54, 47, 47);
+  margin-bottom: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  color: antiquewhite;
+  font-weight: 700;
+  line-height: 450%;
+}
+#red.on {
+  background-color: red;
+}
+#yellow.on {
+  background-color: rgb(255, 224, 49);
+}
+#green.on {
+  background-color: green;
+}
+#redPed.on {
+  background-color: red;
+}
+#greenPed.on {
+  background-color: green;
+}
+#switchBtn {
+  margin-left: auto;
+  margin-right: auto;
+  width: 100px;
+  height: 50px;
+}
+#switchBtnPed {
+  margin-left: auto;
+  margin-right: auto;
+  width: 100px;
+  height: 50px;
+}
+.inputSpeed {
+  font-size: 12px;
+  width: 300px;
+}

+ 40 - 0
hw-js-15-async-await-2/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>hw-js-15-async-await-2</title>
+  <link href="index.css" rel="stylesheet" type="text/css" />
+ </head>
+
+<body>
+  <section class="trafficLights">
+    <h2>Vehicles Traffic Lights</h2>
+  <div id='root' class="wrapper">
+  </div>
+  <button id='switchBtn'>Switch color</button>
+  </section>
+  <section class="pedestrianTrafficLights">
+    <h2>Pedestrian Traffic Lights</h2>
+  <div id='rootPed' class="wrapper">
+  </div>
+  <button id='switchBtnPed'>Switch color</button>
+  </section>
+  <section class="speedTest">
+    <h2>Speed Test</h2>
+    <div id='rootSpeed' class="wrapper">
+      <input type="text" id='countInpt' class='inputSpeed' placeholder=" Введите кол-во кругов для параллельных запросов">
+      <input type="text" id='parallelInpt' class='inputSpeed' placeholder=" Введите кол-во запросов в одном круге">
+        <button id='speedBtn'>Run speedtest</button>
+    </div>
+   
+ 
+  </section>
+  <script src="/js/trafficLight.js" ></script>
+<script src="/js/pedestrianTrafficLight.js"></script>
+<script src="/js/speedtest.js"></script>
+  
+</body>
+
+</html>

+ 47 - 0
hw-js-15-async-await-2/js/pedestrianTrafficLight.js

@@ -0,0 +1,47 @@
+// PedestrianTrafficLight
+
+// -------------УСЛОВИЕ-------------
+// Напишите упрощенный светофор для пешеходов
+
+// Stage 2
+// Используя Promise.race, domEventPromise и кнопку в DOM сделайте пешеходный светофор с кнопкой, который также переключается по времени периодически.
+
+// Stage 3
+// Не давайте возможности пешеходам сильно наглеть - предусмотрите задержку, после которой будет работать кнопка.
+
+// -------------РЕШЕНИЕ-------------
+
+const pedColors = ['red', 'green'];
+function pedsTrafficLights() {
+    const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+
+
+    const domEventPromise = (knopka, eventName, time, pedDelay) => new Promise((resolve, reject) => {
+        async function promiseResolve(e) {
+            knopka.removeEventListener(eventName, promiseResolve);
+            await delay(pedDelay);
+            resolve(e)
+        };
+        async function listener() {
+            knopka.addEventListener(eventName, promiseResolve);
+            await delay(time);
+            reject(knopka.removeEventListener(eventName, promiseResolve));
+        }
+        listener();
+    });
+
+    async function trafficLight(root, colors, greenTime, redTime, pedDelay) {
+             root.innerHTML = colors.map(color => ` <div id=${color+'Ped'} class='lightColor'></div> `).join('');
+       
+        while (true) {
+            for (let color of colors) {
+                eval(color+'Ped').classList.toggle('on');
+                await Promise.race([delay(eval(`${color}Time`)), domEventPromise(switchBtnPed, 'click', eval(`${color}Time`), pedDelay).then(e => console.log('event click happens', e))]);
+                eval(color+'Ped').classList.toggle('on');
+            }
+        }
+    }
+    trafficLight(rootPed, pedColors, 5000, 4000, 1000);
+};
+pedsTrafficLights(rootPed, pedColors);
+

+ 98 - 0
hw-js-15-async-await-2/js/speedtest.js

@@ -0,0 +1,98 @@
+// speedtest
+
+// -------------УСЛОВИЕ-------------
+// Написать асинхронную функцию
+// async function speedtest(getPromise, count,parallel=1){
+// ....
+//     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)
+// где:
+// count - количество повторов
+// parallel - количество одновременных запросов/промисов в одном повторе
+// getPromise - функция, которая умеет вернуть нужный Вам промис для тестирования скорости его работы
+// которая будет в цикле count раз создавать parallel промисов с помощью переданной функции getPromise,
+// дожидаться выполнения всех parallel промисов, после чего цикл повторяется.
+// Замерить время общее время выполнения, и вычислить:
+// duration, общую длительность работы цикла
+// parallelDuration, среднее время обработки запроса параллельно (за какое время исполнилось parallel*count промисов),
+// paralledSpeed, скорость в запросах в миллисекунду
+// queryDuration, реальное среднее время запроса (отталкиваясь от count и времени работы цикла).
+// querySpeed, реальное средняя скорость запроса
+// Эти переменные вернуть в одном объекте-результате (см. заготовку выше)
+// Для отладки попробуйте на delay(пример выше есть, реальное время будет отличаться на единицы - десятки миллисекунд).
+// Потом можете попробовать на swapi.dev. Не создавайте чрезмерно много параллельных запросов.
+
+// -------------РЕШЕНИЕ-------------
+
+speedBtn.onclick = () => {
+    const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+    countInpt.value && (count=countInpt.value)&& (countInpt.value = '');
+    parallelInpt.value && (parallel = parallelInpt.value) && (parallelInpt.value = '');
+
+async function speedtest(getPromise, count, parallel = 1) {
+   let [duration, querySpeed, queryDuration, parallelSpeed, parallelDuration] = [0, 0, 0, 0, 0];
+
+    const startTimestamp = new Date();
+    let i = 1;
+    while (i <= count) {
+        let j = 1;
+        const promiseArray = [];
+        while (j <= parallel) { 
+           promiseArray.push(getPromise());
+            j++;
+        }
+        await Promise.all([...promiseArray]);
+        i++;
+    }
+    
+    const finalTimestamp = new Date();
+
+    duration = finalTimestamp - startTimestamp;
+    querySpeed = Math.round(count / duration*1000)/1000;
+    queryDuration = Math.round(1 / querySpeed*100)/100;
+    parallelSpeed =Math.round((parallel*count)/duration*100)/100;
+    parallelDuration =Math.round( 1 / parallelSpeed*100)/100;
+    let result = document.createElement('p');
+    result.innerText=JSON.stringify({duration,
+            querySpeed,
+            queryDuration,
+            parallelSpeed,
+            parallelDuration
+    });
+    rootSpeed.appendChild(result);
+  
+    return {duration,
+            querySpeed,
+            queryDuration,
+            parallelSpeed,
+            parallelDuration
+        };
+    
+}
+    
+    // speedtest(() => delay(1000), 10, 10).then(result => console.log(result));
+
+    speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), count, parallel);
+
+ };
+
+
+
+
+
+

+ 64 - 0
hw-js-15-async-await-2/js/trafficLight.js

@@ -0,0 +1,64 @@
+// Async / Await Homework 2
+
+// -------------УСЛОВИЕ-------------
+
+// Светофор
+// Используя асинхронную функцию и бесконечный цикл, просимулируйте светофор:
+// const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+
+// async function trafficLight(){
+//     while (true){
+//         включаем зеленый
+//         await delay(время зеленого)
+//         включаем желтый
+//         await delay(время желтого)
+//         включаем красный
+//         await delay(время красного)
+//     }
+// }
+// Для отображения включения того или иного света используйте один или три DOM-элемента.
+
+// Stage 2
+// Сделайте trafficLight более универсальной - добавьте в параметры DOM-элемент для отображения, а также время работы каждого цвета
+// domEventPromise
+// Реализуйте промисифицированную функцию, которая резолвит промис по событию в DOM:
+// domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))
+// Функция должна:
+// используя addEventListener повесить свой обработчик события на DOM element событие eventName
+// по событию зарезолвить промис отдав в качестве результата объект события
+// убрать обработчик с DOM-элемента, используя removeEventListener
+
+// -------------РЕШЕНИЕ-------------
+// Stage 1 & Stage 2
+  const colors = ['red', 'yellow', 'green', 'yellow'];
+function vehiclesTrafficLights() {
+    const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+    // const colorTime = { red: 3000, yellow: 1000, green: 3000 };
+  
+    // / Сделайте trafficLight более универсальной - добавьте в параметры DOM-элемент для отображения, а также время работы каждого цвета
+    const domEventPromise = (knopka, eventName, time) => new Promise((resolve, reject) => {
+        const promiseResolve = (e) => { knopka.removeEventListener(eventName, promiseResolve); resolve(e) };
+        async function listener() {
+            knopka.addEventListener(eventName, promiseResolve);
+            await delay(time);
+            reject(knopka.removeEventListener(eventName, promiseResolve));
+        }
+        listener();
+    });
+
+    async function trafficLight(root, colors, greenTime, yellowTime, redTime) {
+        const colorsNew = colors.slice(0, colors.length - 1);
+        root.innerHTML = colorsNew.map(color => ` <div id=${color} class='lightColor'></div> `).join('');
+       
+        while (true) {
+            for (let color of colors) {
+                eval(color).classList.toggle('on');
+                // await delay(eval(`${color}Time`));
+                await Promise.race([delay(eval(`${color}Time`)), domEventPromise(switchBtn, 'click', eval(`${color}Time`)).then(e => console.log('event click happens', e))]);
+                eval(color).classList.toggle('on');
+            }
+        }
+    }
+    trafficLight(root, colors, 5000, 3000, 5000);
+};
+vehiclesTrafficLights(root, colors);