Jelajahi Sumber

HW<14> done

Евгения Акиншина 3 tahun lalu
induk
melakukan
bdb740fadc

+ 3 - 0
js14-change/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

+ 38 - 0
js14-change/css/style.css

@@ -0,0 +1,38 @@
+#nicknameBox, #messageBox  {
+    width: 90%;
+    height: 50px;
+    text-align: center;
+    font-size: 20px;
+    margin-left: 65px;
+    border-radius: 10px;
+    border: 1px solid rgb(65, 63, 63);
+    background-color: aqua;
+    margin-bottom: 10px;
+}
+
+#buttonBox {
+    width: 70%;
+    height: 50px;
+    font-size: 20px;
+    margin-left: 205px;
+    border-radius: 20px;
+    border: 1px solid rgb(65, 63, 63);
+    background-color: coral;
+    color: rgb(65, 63, 63);
+    opacity: 0.8;
+    cursor: pointer;
+}
+
+#buttonBox:hover {
+    opacity: 1
+}
+
+div {
+  background-color: cyan;
+  margin-top: 10px;
+  border: 1px solid rgb(65, 63, 63);
+  border-radius: 10px;
+  font-size: 18px;
+  color: rgb(65, 63, 63);
+  text-align: center;
+}

+ 17 - 0
js14-change/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=\, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <title>HW14</title>
+</head>
+<body>
+    <input type="text" id="nicknameBox" placeholder="Enter your nickname">
+    <input type="text" id="messageBox" placeholder="Enter your message">
+    <button type="submit" id="buttonBox"></button>
+    <span id="chatBox"></span>
+    <script src='js/main.js'></script>
+</body>
+</html>

+ 106 - 0
js14-change/js/main.js

@@ -0,0 +1,106 @@
+// // Chat Homework
+
+// 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'))
+//             }
+//         }
+//     })
+// }
+
+// // Stage 0
+
+// jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: 'Anon', message: 'Я не умею копипастить в консоль, зато умею жать красную кнопку.'})
+
+// Stage 1-4
+
+let btn = document.querySelector('#buttonBox')
+btn.innerText = 'Send'
+let nick = document.querySelector('#nicknameBox')
+let msg = document.querySelector('#messageBox')
+
+btn.onclick = function sendMessage() {
+    let nick = document.querySelector('#nicknameBox').value
+    let msg = document.querySelector('#messageBox').value
+    jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: nick, message: msg})
+    document.querySelector('#nicknameBox').value = ''
+    document.querySelector('#messageBox').value = ''
+}
+
+function addMessage() {
+    setInterval(function() {
+        jsonPost("http://students.a-level.com.ua:10012", {func: 'getMessages', messageId: 0})
+        .then (post => {console.log(post.data)
+        for(messageId in post.data) {
+            let chat = document.querySelector('#chatBox')
+            let div = document.createElement('div')
+            let p = document.createElement('p')
+            p.innerHTML = post.data[messageId].nick + ':' + ' ' + post.data[messageId].message
+            let t = document.createElement('time')
+            t.innerHTML = `${new Date(post.data[messageId].timestamp).toLocaleString()}`
+            chat.prepend(div)
+            div.append(p)
+            div.append(t)
+        }
+        messageId = post.nextMessageId})
+    },3000)
+}
+addMessage()
+
+// Stage 5
+
+async function sendMessage(nick, msg) {
+    jsonPost('http://students.a-level.com.ua:10012', {func: 'addMessage', nick: nick, message: msg})
+    document.querySelector('#nicknameBox').value = ''
+    document.querySelector('#messageBox').value = ''
+}
+
+async function getMessages() {
+    jsonPost("http://students.a-level.com.ua:10012", {func: 'getMessages', messageId: 0})
+    .then (post => {console.log(post.data)
+        for(messageId in post.data) {
+            let chat = document.querySelector('#chatBox')
+            let div = document.createElement('div')
+            let p = document.createElement('p')
+            p.innerHTML = post.data[messageId].nick + ':' + ' ' + post.data[messageId].message
+            let t = document.createElement('time')
+            t.innerHTML = `${new Date(post.data[messageId].timestamp).toLocaleString()}`
+            chat.prepend(div)
+            div.append(p)
+            div.append(t)
+        }
+    })
+}
+
+async function sendAndCheck() {
+    await sendMessage(nick.value, msg.value)
+    await getMessages()
+}
+
+btn.onclick = () => sendAndCheck()
+
+async function checkLoop() {
+    getMessages()
+}
+
+checkLoop()
+
+// Stage 6
+
+async function jsonPost(url, data) {
+    let response = await fetch(url, {method: 'POST', body: JSON.stringify(data)})
+    return await response.json()
+}
+
+let delay = ms => new Promise(ok => {setTimeout(() => ok(ms), ms)})