Home Explore Help
Register Sign In
Olga_Brekhuntsova
/
homework
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

HW-15 done

Olga_Brekhuntsova 2 years ago
parent
c89884e1de
commit
9563ca51e1
10 changed files with 436 additions and 2 deletions
Split View Show Diff Stats
  1. 2 2
      hw-js-14-async-await/js/chat.js
  2. 104 0
      hw-js-15-async-await-2/.gitignore
  3. 12 0
      hw-js-15-async-await-2/.prettierrc.json
  4. 3 0
      hw-js-15-async-await-2/.vscode/settings.json
  5. 1 0
      hw-js-15-async-await-2/README.md
  6. 65 0
      hw-js-15-async-await-2/index.css
  7. 40 0
      hw-js-15-async-await-2/index.html
  8. 47 0
      hw-js-15-async-await-2/js/pedestrianTrafficLight.js
  9. 98 0
      hw-js-15-async-await-2/js/speedtest.js
  10. 64 0
      hw-js-15-async-await-2/js/trafficLight.js

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

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

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

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

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

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

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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);