'pedestrianTraficLight' function written

hw13-promisePt2/hometask/script.js

@@ -1,51 +1,7 @@
 const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
 
-// async function trafficLight(parent, redTime=4000, yellowTime=2000, greenTime=2000){
-//     let container = document.createElement('div')
-//     container.style.backgroundColor = 'grey'
-//     container.style.width = 'fit-content'
-//     container.style.padding = '5px'
-
-//     let red = document.createElement('div')
-//     let yellow = document.createElement('div')
-//     let green = document.createElement('div')
-//     let elems = [red, yellow, green]
-    
-//     for(let item of elems) {
-//         item.style.backgroundColor = 'black'
-//         item.style.width = '100px'
-//         item.style.height = '100px'
-//         item.style.borderRadius = '100%'
-//         item.style.margin = '10px'
-//         container.append(item)
-//     }
-
-//     parent.append(container)
-//     while (true){
-//         red.style.backgroundColor = 'red'
-//         red.style.boxShadow = '0px 2px 10px red'
-
-//         await delay(redTime)
-//         red.style.boxShadow = 'none'
-//         red.style.backgroundColor = 'black'
-//         yellow.style.backgroundColor = 'yellow'
-//         yellow.style.boxShadow = '0px 2px 10px yellow'
-
-//         await delay(yellowTime)
-//         yellow.style.boxShadow = 'none'
-//         yellow.style.backgroundColor = 'black'
-//         green.style.backgroundColor = 'lightgreen'
-//         green.style.boxShadow = '0px 2px 10px lightgreen'
-
-//         await delay(greenTime)
-//         green.style.boxShadow = 'none'
-//         green.style.backgroundColor = 'black'
-//     }
-// }
-
 let div = document.createElement('div')
 document.body.append(div)
-//trafficLight(div, 5000, 3000, 2000)
 
 //domEventPromise
 let btn = document.createElement('button')
@@ -55,17 +11,16 @@ document.body.append(btn)
 function domEventPromise(elem, eventName) {
   let prom = new Promise((resolve, reject) => {
     function doAndRemove(event) {
-        elem.removeEventListener(eventName, doAndRemove)
-        //console.log('clicked')
-        resolve(event)
+      elem.removeEventListener(eventName, doAndRemove)
+      resolve(event)
     }
     elem.addEventListener(eventName, doAndRemove)
   })
   return prom
 }
-domEventPromise(btn, 'click').then( (event) => console.log('event click happens', event))
+domEventPromise(btn, 'click').then((event) => console.log('event click happens', event))
 
-async function pedestrianTrafficLight  (parent, redTime=4000, yellowTime=2000, greenTime=2000) {
+async function pedestrianTrafficLight(parent, redTime = 4000, yellowTime = 2000, greenTime = 2000) {
   let container = document.createElement('div')
   container.style.backgroundColor = 'grey'
   container.style.width = 'fit-content'
@@ -74,51 +29,55 @@ async function pedestrianTrafficLight  (parent, redTime=4000, yellowTime=2000, g
   let btn = document.createElement('button')
   btn.innerText = 'pedestrian button'
 
-  let red = document.createElement('div')
-  let yellow = document.createElement('div')
-  let green = document.createElement('div')
-  let elems = [red, yellow, green]
-  
-  for(let item of elems) {
-      item.style.backgroundColor = 'black'
-      item.style.width = '100px'
-      item.style.height = '100px'
-      item.style.borderRadius = '100%'
-      item.style.margin = '10px'
-      container.append(item)
+  let colors = []
+  for(let i = 0; i < 3; i++) {
+    let color = document.createElement('div')
+    color.style.backgroundColor = 'black'
+    color.style.width = '100px'
+    color.style.height = '100px'
+    color.style.borderRadius = '100%'
+    color.style.margin = '10px'
+    container.append(color)
+    colors.push(color)
   }
 
   container.append(btn)
   parent.append(container)
 
-  while (true){
-      let buttonPresed = domEventPromise(btn, 'click')
-      Promise.race([delay, buttonPresed]).then(e => console.log(e))
-      red.style.backgroundColor = 'red'
-      red.style.boxShadow = '0px 2px 10px red'
-
-      await delay(redTime)
-      Promise.race([delay, buttonPresed]).then(e => console.log(e))
-      red.style.boxShadow = 'none'
-      red.style.backgroundColor = 'black'
-      yellow.style.backgroundColor = 'yellow'
-      yellow.style.boxShadow = '0px 2px 10px yellow'
-
-      Promise.race([delay, buttonPresed]).then(e => console.log(e))
-      await delay(yellowTime)
-      yellow.style.boxShadow = 'none'
-      yellow.style.backgroundColor = 'black'
-      green.style.backgroundColor = 'lightgreen'
-      green.style.boxShadow = '0px 2px 10px lightgreen'
+  while (true) {
+    let pressed = false
+    btn.disabled = false
+    switch ('red') {
+      case 'red':
+        colors[0].style.backgroundColor = 'red'
+        colors[0].style.boxShadow = '0px 2px 10px red'
+        await Promise.race([delay(redTime), domEventPromise(btn, 'click')]).then((e) => {
+          if (typeof e === 'object') {
+            pressed = true
+          }
+        })
+        colors[0].style.boxShadow = 'none'
+        colors[0].style.backgroundColor = 'black'
+
+      case 'yellow':
+        if (pressed === true) break;
+        colors[1].style.backgroundColor = 'yellow'
+        colors[1].style.boxShadow = '0px 2px 10px yellow'
+        await Promise.race([delay(yellowTime), domEventPromise(btn, 'click')]).then((e) => {
+          if (typeof e === 'object') {
+            pressed = true
+          }
+        })
+        colors[1].style.boxShadow = 'none'
+        colors[1].style.backgroundColor = 'black'
+    }
 
-      Promise.race([delay, buttonPresed]).then(e => console.log(e))
-      await delay(greenTime)
-      green.style.boxShadow = 'none'
-      green.style.backgroundColor = 'black'
+    colors[2].style.backgroundColor = 'lightgreen'
+    colors[2].style.boxShadow = '0px 2px 10px lightgreen'
+    btn.disabled = true
+    await delay(greenTime)
+    colors[2].style.boxShadow = 'none'
+    colors[2].style.backgroundColor = 'black'
   }
-
-
-
 }
-
 pedestrianTrafficLight(div, 3000, 3000, 3000)