浏览代码

HW14 done

vladislavaSim 1 年之前
父节点
当前提交
4dcbee177f
共有 4 个文件被更改,包括 142 次插入38 次删除
  1. 1 1
      HW13/index.html
  2. 37 37
      HW13/main.js
  3. 44 0
      HW14/index.html
  4. 60 0
      HW14/main.js

+ 1 - 1
HW13/index.html

@@ -36,7 +36,7 @@
     <h1 class="chat-header">Chat</h1>
     <div id="content" class = "chat-header">
         <div class="form">
-            Nick : <input type="text" id = 'nick' >
+            Nick : <input type="text" id = 'nick' value="test">
             Message : <input type="text" id = 'msg'>
             <button id="sendButton">Отправить</button>
         </div>

+ 37 - 37
HW13/main.js

@@ -21,14 +21,14 @@ function jsonPost(url, data) {
     })
 }
 
-function messageDataCreator(message) {
-    return {
-        func: 'addMessage',
-        nick: $nickname.value,
-        message: message,
-    }
-}
-
+// function messageDataCreator(message) {
+//     return {
+//         func: 'addMessage',
+//         nick: $nickname.value,
+//         message: message,
+//     }
+// }
+//
 function showMessagesList(arr) {
     let $container = document.createElement('div')
     for(let msg of arr) {
@@ -44,45 +44,45 @@ function showMessagesList(arr) {
     msgHolder.prepend($container)
 }
 
-async function fetchData() {
-    let id = 0;
-    let resp = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: id})
-    let {data} = await resp
-    id = resp.nextMessageId
-    let list = data.slice(data.length - 50).reverse()
-    showMessagesList(list)
-    async function updMessages() {
+    async function getMessages() {
+        let id = 0;
         let resp = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: id})
-        let res = await resp
-        if(res.nextMessageId > id) {
-            id = res.nextMessageId
-            showMessagesList(res.data)
+        let {data, nextMessageId} = await resp
+        id = nextMessageId
+        let list = data.slice(data.length - 50).reverse()
+        showMessagesList(list)
+        if(nextMessageId > id) {
+            id = nextMessageId
+            showMessagesList(data)
         }
     }
 
-    let interval = setInterval(async () => {
-        await updMessages()
-    }, 3000)
-    sendBtn.onclick = async () => {
-       let resp = await jsonPost("http://students.a-level.com.ua:10012",
-            messageDataCreator($msg.value)
+    // let interval = setInterval(async () => {
+    //
+    // }, 3000)
+
+
+async function sendMessage(nick, message) {
+    console.log('test')
+        await jsonPost("http://students.a-level.com.ua:10012",
+            {
+                func: 'addMessage',
+                nick: nick,
+                message: message,
+            }
         )
-        $msg.value = ''
     }
-    return list
-}
 
-function getSomeData(data) {
-    let currentData = data
-    return function (){
-        return currentData
+sendBtn.onclick = sendAndCheck()
+    async function sendAndCheck() {
+        await getMessages()
+        await sendMessage($nickname.value, $msg.value)
+        $msg.value = ''
     }
-}
 
-async function chatMaker() {
-    showMessagesList(await fetchData())
+function delay(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms))
 }
-chatMaker()
 
 
 

+ 44 - 0
HW14/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>HW14</title>
+  <style>
+    .trafficLight {
+      width: 150px;
+      height: 350px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      background-color: black;
+    }
+    .trafficLight  div {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+    }
+    .red {
+      background-color: red;
+        opacity: .2;
+    }
+    .yellow {
+      background-color: yellow;
+        opacity: .2;
+    }
+    .green {
+      background-color: green;
+        opacity: .2;
+    }
+  </style>
+</head>
+<body>
+  <div class="trafficLight">
+    <div class="red"></div>
+    <div class="yellow"></div>
+    <div class="green"></div>
+  </div>
+<button class="btn">Button</button>
+  <script src="main.js"></script>
+</body>
+</html>

+ 60 - 0
HW14/main.js

@@ -0,0 +1,60 @@
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+
+const red = document.querySelector('.red')
+const yellow = document.querySelector('.yellow')
+const green = document.querySelector('.green')
+let col = red
+
+// async function trafficLight(){
+//     while (true){
+//         changeLight(green)
+//         await delay(3000)
+//         changeLight(yellow)
+//         await delay(2000)
+//         changeLight(red)
+//         await delay(3000)
+//     }
+// }
+// trafficLight().then()
+
+function changeLight(color) {
+    if(col !== color) {
+        col.style.opacity = .2
+        color.style.opacity = 1
+        col = color
+    } else {
+        color.style.opacity = 1
+    }
+}
+
+let btn = document.querySelector('.btn')
+
+function domEventPromise(button, eventName) {
+    return new Promise(res => {
+        button.addEventListener(eventName, (e) => res(e))
+
+        button.removeEventListener(eventName, (e) => res(e))
+    });
+}
+domEventPromise(btn, 'click')
+    .then(e => console.log('event click happens', e))
+
+let stopLightIsActive = true
+async function pedestrianTrafficLight() {
+    while(stopLightIsActive){
+            changeLight(red)
+            await delay(100)
+    }
+}
+pedestrianTrafficLight().then()
+btn.addEventListener('click', async () => {
+    stopLightIsActive = !stopLightIsActive
+        await delay(3000)
+        changeLight(yellow)
+        await delay(1000)
+        changeLight(green)
+        await delay(4000)
+        changeLight(yellow)
+        await delay(1000)
+        changeLight(red)
+});