Home Explore Help
Sign In
Sergei-Levshnia
/
homework
Watch 1
Star 0
Fork 0
Files Issues 2 Pull Requests 0 Wiki
Browse Source

basic trafficlight done

miskson 3 years ago
parent
196bdd6d70
commit
a0523a5fbb
2 changed files with 138 additions and 0 deletions
Unified View Show Diff Stats
  1. 14 0
      hw13-promisePt2/hometask/index.html
  2. 124 0
      hw13-promisePt2/hometask/script.js

+ 14 - 0
hw13-promisePt2/hometask/index.html
View File 

@@ -0,0 +1,14 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Hw 13 promise2</title>
 
+</head>
 
+<body>
 
+    <h1>Hw 13 promise2</h1>
 
+    
+    <script src="./script.js"></script>
 
+</body>
 
+</html>

+ 124 - 0
hw13-promisePt2/hometask/script.js
View File 

@@ -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)