|
|
@@ -0,0 +1,124 @@
|
|
|
+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')
|
|
|
+btn.innerText = 'click'
|
|
|
+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.addEventListener(eventName, doAndRemove)
|
|
|
+ })
|
|
|
+ return prom
|
|
|
+}
|
|
|
+domEventPromise(btn, 'click').then( (event) => console.log('event click happens', event))
|
|
|
+
|
|
|
+async function pedestrianTrafficLight (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 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)
|
|
|
+ }
|
|
|
+
|
|
|
+ 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'
|
|
|
+
|
|
|
+ Promise.race([delay, buttonPresed]).then(e => console.log(e))
|
|
|
+ await delay(greenTime)
|
|
|
+ green.style.boxShadow = 'none'
|
|
|
+ green.style.backgroundColor = 'black'
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+pedestrianTrafficLight(div, 3000, 3000, 3000)
|
