Browse Source

done fucking hw sync 2

unknown 3 years ago
parent
commit
875490f551
3 changed files with 213 additions and 70 deletions
  1. 6 13
      src/index.html
  2. 181 0
      src/java-script/hw.js
  3. 26 57
      src/styles.css

+ 6 - 13
src/index.html

@@ -8,18 +8,11 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <form class="chatForm" id="chatForm">
-      <label>Write down your nick</label>
-      <input class="chatForm__input" id="nick" name="nick" />
-      <label>Write down your message</label>
-      <input
-        class="chatForm__input"
-        class="chatForm__input"
-        id="message"
-        name="message"
-      />
-      <button type="submit">Submit</button>
-    </form>
-    <div id="chat" class="chat"></div>
+    <div class="trafficLights" id="traffic">
+      <div class="trafficLights__off"></div>
+      <div class="trafficLights__off"></div>
+      <div class="trafficLights__off"></div>
+    </div>
+    <button id="resolvePromise" class="resolvePromise">Resolve Promise</button>
   </body>
 </html>

+ 181 - 0
src/java-script/hw.js

@@ -1 +1,182 @@
+'use strict';
 
+// Async/Await Homework 2
+
+// Светофор
+
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));
+const lights = document.getElementById('traffic').children;
+const red = lights[0];
+const yellow = lights[1];
+const green = lights[2];
+
+async function trafficLight() {
+  while (true) {
+    green.style.backgroundColor = 'gainsboro';
+    red.style.backgroundColor = 'red';
+    await delay(1000);
+    red.style.backgroundColor = 'gainsboro';
+    yellow.style.backgroundColor = 'yellow';
+    await delay(1000);
+    yellow.style.backgroundColor = 'gainsboro';
+    green.style.backgroundColor = 'green';
+    await delay(1000);
+  }
+}
+// trafficLight();
+
+// Stage 2
+const delayUpdated = (ms, el) =>
+  new Promise((resolve, _reject) => {
+    let n = Math.round(ms / 1000);
+    const intervalID = setInterval(handleInterval, 1000);
+    function handleInterval() {
+      if (n === 0) {
+        el.textContent = '';
+        clearInterval(intervalID);
+        return resolve(ms);
+      }
+      el.textContent = n;
+      n -= 1;
+    }
+  });
+
+async function trafficLightUpdated() {
+  while (true) {
+    green.style.backgroundColor = 'gainsboro';
+    red.style.backgroundColor = 'red';
+    await delayUpdated(9000, red);
+    red.style.backgroundColor = 'gainsboro';
+    yellow.style.backgroundColor = 'yellow';
+    await delayUpdated(3000, yellow);
+    yellow.style.backgroundColor = 'gainsboro';
+    green.style.backgroundColor = 'green';
+    await delayUpdated(9000, green);
+  }
+}
+
+// trafficLightUpdated();
+
+//domEventPromise + Stage 2 + Stage 3
+// i've done with my way, and do not see any sens in promise race because in this case!!!
+// can't stop promise countDown after btn was clicked and is does count to the end
+const domEventPromise = (btn, type, ms, el) =>
+  new Promise((resolve, _reject) => {
+    let n = Math.round(ms / 1000);
+    const intervalID = setInterval(handleInterval, 1000);
+
+    function handleInterval() {
+      if (n === 0) {
+        el.textContent = '';
+        clearInterval(intervalID);
+        return resolve(ms);
+      }
+      el.textContent = n;
+      n -= 1;
+    }
+
+    const handleResolve = async e => {
+      btn.style.backgroundColor = 'grey';
+      btn.setAttribute('disabled', '');
+      el.textContent = '';
+      clearInterval(intervalID);
+      resolve(e);
+      btn.removeEventListener(type, handleResolve);
+      await setTimeout(() => {
+        btn.removeAttribute('disabled');
+        btn.style.backgroundColor = 'green';
+      }, 2000);
+    };
+
+    btn.addEventListener(type, handleResolve);
+  });
+
+const btnResolvePromise = document.getElementById('resolvePromise');
+
+async function pedestrianTrafficLight() {
+  while (true) {
+    green.style.backgroundColor = 'gainsboro';
+    red.style.backgroundColor = 'red';
+    await domEventPromise(btnResolvePromise, 'click', 9000, red),
+      (red.style.backgroundColor = 'gainsboro');
+    yellow.style.backgroundColor = 'yellow';
+    await domEventPromise(btnResolvePromise, 'click', 3000, yellow),
+      (yellow.style.backgroundColor = 'gainsboro');
+    green.style.backgroundColor = 'green';
+    await domEventPromise(btnResolvePromise, 'click', 9000, green);
+  }
+}
+
+pedestrianTrafficLight();
+
+//speedTest
+
+const dataLuke = async () =>
+  fetch('https://swapi.py4e.com/api/people/1/')
+    .then(res => res.json())
+    .then(data => data)
+    .catch(() => {});
+
+async function speedTest(getPromise, count, parallel = 1) {
+  async function makeIterable(promise, n, parallel) {
+    const arr = [];
+    for (let i = 0; i < n; i++) {
+      const arrInner = [];
+      if (parallel > 1) {
+        for (let j = 0; j < parallel; j++) {
+          arrInner.push(promise);
+        }
+        arr.push(arrInner);
+      }
+      if (parallel < 2) {
+        arr.push(promise);
+      }
+    }
+    return arr;
+  }
+
+  const readyArr = await makeIterable(getPromise, count, parallel);
+  let querySpeed = 0;
+  let queryDuration = 0;
+  let parallelDuration = 0;
+  let parallelSpeed = 0;
+  const startLoop = performance.now();
+  await Promise.all([
+    ...readyArr.map(async el => {
+      if (typeof el === 'object') {
+        const start = await performance.now();
+        await Promise.all(el.map(async () => await getPromise()));
+        parallelDuration = (await performance.now()) - start;
+        return;
+      } else {
+        const start = await performance.now();
+        await getPromise();
+        queryDuration = (await performance.now()) - start;
+        return;
+      }
+    }),
+  ]).then(data => console.log(data, 'data'));
+
+  const duration = performance.now() - startLoop;
+  querySpeed = duration / (count * parallel);
+  parallelSpeed = duration / (count * parallel);
+
+  return {
+    duration,
+    querySpeed,
+    queryDuration,
+    parallelSpeed,
+    parallelDuration,
+  };
+}
+
+speedTest(() => delay(10000), 10, 10).then(result =>
+  console.log(result, 'result'),
+);
+
+speedTest(() => delay(1000), 10, 1).then(result =>
+  console.log(result, 'result'),
+);
+speedTest(() => dataLuke(), 20, 3).then(result =>
+  console.log(result, 'result'),
+);

+ 26 - 57
src/styles.css

@@ -5,72 +5,41 @@ body{
   min-height: 100vh;
 }
 
-
-
-.chat{
-  background-color: gray;
-  min-height: 100vh;
-  padding: 30px;
-}
-.containerMsg{
-  margin-bottom: 5px;
+.trafficLights{
+  width: 100px;
+  margin: 0 auto;
   border-radius: 10px;
-  border: solid 3px rgb(3, 3, 3);
-  padding: 10px;
-  background-color: rgb(63, 61, 61);
-}
-
-.containerNick{
-  color: white;
-  font-size: 20px;
-  margin-bottom: 5px;
-}
-
-.containerMessage{
-  color: rgb(248, 175, 18);
-  font-size: 16px;
-  margin-bottom: 5px;
-}
-
-.containerTimestamp{
-  color: rgb(87, 241, 26);
-  font-size: 16px;
+  border: solid 4px black;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px;
+  background-color: grey;
 }
 
-.chatForm{
-  position: fixed;
-  bottom: 20px;
-  width: 20%;
-  left: 40%;
-  margin: 0;
+.trafficLights__off{
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: gainsboro;
+  border: solid 4px black;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  border-radius: 10px;
-  padding: 10px;
-  padding-bottom: 20px;
-  background-color: rgb(80, 78, 78);
-  z-index: 1;
+  font-size: 45px;
+  color: rgb(5, 5, 5);
 }
 
-.chatForm__input:first-child{
-  margin-right: 20px;
-}
-.chatForm__input{
-  margin-bottom: 5px;
-  width: 100%;
+.trafficLights__off:not(:last-child){
+  margin-bottom: 20px;
 }
 
-label{
-  margin-bottom: 5px;
-  color: rgb(249, 250, 252);
-  font-size: 18px;
-}
-
-button {
+.resolvePromise{
   background-color: green;
-  width: 100px;
-  font-size: 24px;
-  color: aliceblue;
+  color: white;
+  font-size: 35px;
+  display: block;
+  margin: 0 auto;
+  margin-top: 40px;
 }
 
+