HW<14> 50%

HW014/index2.js

@@ -0,0 +1,126 @@
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+
+let dom1 = document.getElementById('color')
+let dom2 = document.getElementById('humanColor')
+
+let switchTraffic = true
+
+async function trafficLight(dom) {
+
+    let red = document.getElementById('red')
+    let yellow = document.getElementById('yellow')
+    let green = document.getElementById('green')
+    let redTimer = document.getElementById('redTimer')
+    let greenTimer = document.getElementById('greenTimer')
+
+    while (true) {
+        await delay(500)
+            .then(() => red.style.opacity = 1)
+
+        await delay(10000)
+            .then(() => red.style.opacity = 0.3)
+            .then(timer(10, redTimer))
+
+        await delay(500)
+            .then(() => yellow.style.opacity = 1)
+
+        await delay(1000)
+            .then(() => yellow.style.opacity = 0.3)
+
+        await delay(500)
+            .then(() => green.style.opacity = 1)
+
+        await delay(10000)
+            .then(() => green.style.opacity = 0.3)
+            .then(timer(10, greenTimer))
+
+        await delay(500)
+            .then(() => yellow.style.opacity = 1)
+
+        await delay(1000)
+            .then(() => yellow.style.opacity = 0.3)
+    }
+}
+
+let btn = document.getElementById('btn')
+
+async function humanTrafficLight(dom) {
+    //добавил обертку в html, указал параметр ради задания
+
+    let red = document.getElementById('humanRed')
+    let green = document.getElementById('humanGreen')
+
+    let redTimer = document.getElementById('humanRedTimer')
+    let greenTimer = document.getElementById('humanGreenTimer')
+
+    if (switchTraffic) {
+        while (true) {
+
+            await delay(500)
+                .then(() => green.style.opacity = 1)
+
+            await delay(10000)
+                .then(() => green.style.opacity = 0.3)
+                .then(timer(10, greenTimer))
+
+            await delay(1500)
+
+            await delay(500)
+                .then(() => red.style.opacity = 1)
+
+            await delay(10000)
+                .then(() => red.style.opacity = 0.3)
+                .then(timer(10, redTimer))
+
+            await delay(1500)
+        }
+    }
+    else {
+        while (true) {
+            await delay(500)
+                .then(() => red.style.opacity = 1)
+
+            await delay(10000)
+                .then(() => red.style.opacity = 0.3)
+                .then(timer(10, redTimer))
+
+            await delay(1500)
+
+            await delay(500)
+                .then(() => green.style.opacity = 1)
+
+            await delay(10000)
+                .then(() => green.style.opacity = 0.3)
+                .then(timer(10, greenTimer))
+
+            await delay(1500)
+        }
+    }
+
+}
+
+async function timer(time, value) {
+    for (time; time > 0; time--) {
+        value.innerHTML = time
+        await delay(1000)
+        value.innerHTML = ""
+    }
+}
+
+trafficLight(dom1)
+humanTrafficLight(dom2)
+
+function domEventPromise(click, eventName) {
+    return new Promise((resolve) => {
+        click.addEventListener(eventName, (e) => {
+            switchTraffic = !switchTraffic
+            humanTrafficLight(dom2)
+            resolve(e)
+        })
+        click.removeEventListener(eventName, (e) => {
+            resolve(e)
+        })
+    })
+}
+
+btn.onclick = () => domEventPromise(btn, 'click').then(e => console.log('event click happens', e))