Browse Source

add tasks

serg155alternate 2 years ago
parent
commit
51f0aec708

+ 4 - 3
HW15 generator and async await 2/index.html

@@ -14,12 +14,13 @@
 <body>
     <div class="container">
         <div class="wrapper">
-           <!--  <div class="green"></div>
-            <div class="yellow"></div>
-            <div class="red"></div> -->
         </div>
         
+        <div class="wrapper1">
+         </div>
     </div>
+    <button id="knopka">click</button>
+    
     <script src="script.js"></script>
 </body>
 

+ 46 - 3
HW15 generator and async await 2/script.js

@@ -34,7 +34,7 @@ async function trafficLight(rootElClass, greenDelay, redDelay, yellowDelay){
     while (true){
         root.children[0].style.backgroundColor = 'green';
         root.children[2].style.backgroundColor = '';
-        await delay(greenDelay);
+        // await delay(greenDelay);
         root.children[1].style.backgroundColor = 'yellow';
         root.children[0].style.backgroundColor = '';
         await delay(redDelay)
@@ -46,5 +46,48 @@ async function trafficLight(rootElClass, greenDelay, redDelay, yellowDelay){
 }
 trafficLight('.wrapper', 1000, 800, 2000);
 
-//domEventPromise
-//Реализуйте промисифицированную функцию, которая резолвит промис по событию в DOM:
+// domEventPromise
+// Реализуйте промисифицированную функцию, которая резолвит промис по событию в DOM:
+
+// domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))
+
+//  Функция должна:
+// используя addEventListener повесить свой обработчик события на DOM element событие eventName
+// по событию зарезолвить промис отдав в качестве результата объект события
+// убрать обработчик с DOM-элемента, используя removeEventListener
+
+function domEventPromise(element, eventName){
+    return new Promise(function (resolve, reject){ 
+        const resolver = (e) => {
+           resolve(e.target) 
+           removeEventListener(eventName, resolver);
+        };
+        element.addEventListener(eventName, resolver);  
+    })
+
+}
+domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))
+
+// PedestrianTrafficLight
+// Напишите упрощенный светофор для пешеходов
+// Stage 3
+// Не давайте возможности пешеходам сильно наглеть - предусмотрите задержку, после которой будет работать кнопка.
+
+
+async function PedestrianTrafficLight(rootElClass, greenDelay, redDelay){
+    let root = document.querySelector(rootElClass);
+    for (let i = 0; i < 2; i++){
+        let div = document.createElement('div');
+        div.style.backgroundColor = 'black';
+        root.append(div);
+    }
+    while (true){
+        root.children[0].style.backgroundColor = 'green';
+        root.children[1].style.backgroundColor = '';
+        await delay(greenDelay);
+        root.children[1].style.backgroundColor = 'red';
+        root.children[0].style.backgroundColor = '';
+        await delay(redDelay)
+    }
+}
+PedestrianTrafficLight('.wrapper1', 3000,2500);

+ 22 - 1
HW15 generator and async await 2/style.css

@@ -15,7 +15,8 @@
     width: 70px;
     align-items: center;
     background-color: rgb(231, 220, 220);
-    box-shadow: black -5px 5px;
+    box-shadow: black -5px 5px; 
+    margin-bottom: 20px;
 }
 .wrapper div {
     width: 50px;
@@ -25,3 +26,23 @@
     background-color: rgb(130, 128, 128);
 }
 
+.wrapper1{
+    display: flex;
+    flex-direction: column;
+    border: solid 3px black;
+    width: 70px;
+    align-items: center;
+    background-color: rgb(231, 220, 220);
+    box-shadow: black -5px 5px;
+}
+.wrapper1 div {
+    width: 50px;
+    height: 50px;
+    margin-top: 3px;
+    margin-bottom: 5px;
+    border-radius: 100%;
+    background-color: rgb(130, 128, 128);
+   
+}
+
+