Home Explore Help
Sign In
Varvar
/
Homework
Watch 1
Star 0
Fork 0
Files Issues 32 Pull Requests 0 Wiki
Browse Source

HW YB2NKR8B2LL done

Varvara Huza 3 years ago
parent
bc62d62dc6
commit
895b664bf0
3 changed files with 235 additions and 5 deletions
Unified View Show Diff Stats
  1. 1 5
      Homework_13/main.js
  2. 129 0
      Homework_14/index.html
  3. 105 0
      Homework_14/main.js

+ 1 - 5
Homework_13/main.js
View File 

@@ -70,8 +70,4 @@ let delay = (ms) => new Promise((fulfill, reject) => {
 
   setTimeout(() => fulfill(ms), ms)
 
   setTimeout(() => fulfill(ms), ms)
 
 })
 
 })
 
 
 
-Promise.race([delay(200), myfetch('https://swapi.dev/api/people/4/')]).then(res => console.log(res))
 
-
 
-
 
-
 
-  
+Promise.race([delay(200), myfetch('https://swapi.dev/api/people/4/')]).then(res => console.log(res))

+ 129 - 0
Homework_14/index.html
View File 

@@ -0,0 +1,129 @@
 
+<!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>Document</title>
 
+    <script src="main.js" defer></script>
 
+    <style>
 
+        body {
 
+            margin: 0;
 
+            padding: 0;
 
+            color: #fff;
 
+            background-color: #000;
 
+            font-family: Verdana, Geneva, Tahoma, sans-serif
 
+        }
 
+
 
+        input {
 
+            margin: 5px;
 
+            width: 100%;
 
+            box-sizing: border-box;
 
+            padding: 5px 10px;
 
+        }
 
+        
+        button {
 
+            padding: 10px 25px;
 
+            font-weight: bold;
 
+            font-family: inherit;
 
+            margin: 10px 5px 5px;
 
+            background-color: #222;
 
+            color: inherit;
 
+            width: 100%;
 
+            cursor: pointer;
 
+        }
 
+
 
+        .wrapper {
 
+            min-height: 100vh;
 
+            max-height: 100vh;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        
+        .messages-area {
 
+            overflow-x: hidden;
 
+            display: flex;
 
+            flex-direction: column-reverse;
 
+            align-items: flex-start;
 
+            flex-grow: 2;
 
+            padding: 15px;
 
+        }
 
+
 
+        .inputs-area {
 
+            background-color: #333;
 
+            display: flex;
 
+            padding: 10px;
 
+            align-items: center;
 
+        }
 
+
 
+        .inputs-container {
 
+            display: flex;
 
+            flex-direction: column;
 
+            margin-right: 65px;
 
+        }
 
+
 
+        .add {
 
+            font-weight: bold;
 
+            font-size: 45px;
 
+            text-shadow: 2px -2px 0 rgb(243, 165, 63)
 
+        }
 
+
 
+        .message {
 
+            display: flex;
 
+            flex-direction: column;
 
+            margin-bottom: 10px;
 
+            padding: 7px;
 
+            background-color: #767676;
 
+            border-radius: 5px;
 
+            max-width: 50%;
 
+        }
 
+
 
+        .message .nickname {
 
+            font-weight: bold;
 
+            margin-bottom: 3px;
 
+        }
 
+
 
+        .message .message-text {
 
+            margin-bottom: 5px;
 
+        }
 
+
 
+        .message .time {
 
+            font-size: 0.8em;
 
+            opacity: 0.6;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="wrapper">
 
+        <div class="inputs-area">
 
+            <div class="inputs-container">
 
+                <label>
 
+                    Nickname:
 
+                    <input id="nickname" type="text">
 
+                </label>
 
+                
+                <label>
 
+                    Message:
 
+                    <input id="messageText" type="text">
 
+                </label>
 
+
 
+                <button id="send">SEND</button>
 
+            </div>
 
+            <div class='add'>ЗДЕСЬ МОГЛА БЫТЬ ВАША РЕКЛАМА</div>
 
+        </div>
 
+
 
+        <div style="overflow-y: auto">
 
+            <div class="messages-area" id="messagesArea"></div>
 
+        </div>
 
+
 
+        <template id="messageTemplate">
 
+            <div class="message">
 
+                <span class="nickname"></span>
 
+                <span class="message-text"></span>
 
+                <span class="time"></span>
 
+            </div>
 
+        </template>
 
+    </div>   
+</body>
 
+</html>

+ 105 - 0
Homework_14/main.js
View File 

@@ -0,0 +1,105 @@
 
+// jsonPost с fetch и async
 
+async function jsonPost(url, data) {
 
+    let response = await fetch(url, {
 
+            method: 'POST', 
+            body: JSON.stringify(data),
 
+        })
 
+    if (response.status == 200) {
 
+        return response.json()
 
+    } else if (response.status != 200) {
 
+        return new Error('status is not 200')
 
+    }
 
+}
 
+
 
+// function jsonPost(url, data)
 
+// {
 
+//     return new Promise((resolve, reject) => {
 
+//         var x = new XMLHttpRequest();   
+//         x.onerror = () => reject(new Error('jsonPost failed'))
 
+//         //x.setRequestHeader('Content-Type', 'application/json');
 
+//         x.open("POST", url, true);
 
+//         x.send(JSON.stringify(data))
 
+
 
+//         x.onreadystatechange = () => {
 
+//             if (x.readyState == XMLHttpRequest.DONE && x.status == 200){
 
+//                 resolve(JSON.parse(x.responseText))
 
+//             }
 
+//             else if (x.status != 200){
 
+//                 reject(new Error('status is not 200'))
 
+//             }
 
+//         }
 
+//     })
 
+// }
 
+
 
+function addMessage(messageObj) {
 
+    message = messageTemplate.content.cloneNode(true)
 
+    message.querySelector('.nickname').textContent = messageObj.nick
 
+    message.querySelector('.message-text').textContent = messageObj.message
 
+    message.querySelector('.time').textContent = (new Date(messageObj.timestamp)).toString().slice(4, 24)
 
+    messagesArea.append(message)
 
+}
 
+
 
+//отэто всё на then
 
+// send.onclick = () => {
 
+//     if(nickname.value !== '' && messageText.value !== '')
 
+//     jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: nickname.value, message: messageText.value})
 
+//     .then(() => {
 
+//         nickname.value = ''
 
+//         messageText.value = ''
 
+//     })
 
+// }
 
+
 
+// let savedId
 
+// jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: 0})
 
+// .then(({data, nextMessageId}) => {
 
+//     savedId = nextMessageId
 
+//     for (let message of data) {
 
+//         addMessage(message)
 
+//     }
 
+// })
 
+
 
+// setInterval(() => {
 
+//     console.log(savedId)
 
+//     jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: savedId})
 
+//     .then(({data, nextMessageId}) => {
 
+//         savedId = nextMessageId
 
+//         if (data.length > 0) {
 
+//             for (let message of data) {
 
+//                 addMessage(message)
 
+//             }   
+//         }
 
+//     })
 
+// }, 5000)
 
+
 
+//отэто всё с async
 
+let delay = (ms) => new Promise((fulfill) => setTimeout(() => fulfill(ms), ms))
 
+
 
+async function sendMessage(nick, message) {
 
+    if(nick !== '' && message !== '') {
 
+        await jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick, message})
 
+    }
 
+}
 
+
 
+async function getMessages(messageId) {
 
+    let {data, nextMessageId} = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId})
 
+    for (let message of data) addMessage(message)
 
+    savedId = nextMessageId
 
+}
 
+
 
+async function sendAndCheck() {
 
+    await sendMessage(nickname.value, messageText.value)
 
+    messageText.value = ''
 
+    await getMessages(savedId)
 
+}
 
+
 
+async function checkLoop() {
 
+    while (true) {
 
+        await delay(5000)
 
+        await getMessages(savedId)
 
+    }
 
+}
 
+
 
+let savedId = 0
 
+getMessages(savedId)
 
+send.onclick = sendAndCheck
 
+checkLoop()