+js/14(Chat Homework)/index.html

js/13(Promise)/index.html

@@ -66,88 +66,88 @@
 
 //FETCH IMPROVED
 
-            // function drawTable(params = {}) {
-            //     let { data = {}, parent = document.body } = params;
-            //     let table = document.createElement("table");
-            //     table.border = 1;
-            //     parent.append(table);
-            //     for (let [key, val] of Object.entries(data)) {
-            //         let tr = document.createElement("tr");
-            //         let th = document.createElement("th");
-            //         let td = document.createElement("td");
-
-            //         if (val.constructor.name === "Object") {
-            //             drawTable({ data: val, parent: td });
-            //             table.append(tr);
-            //             tr.append(th);
-            //             tr.append(td);
-            //             continue;
-            //         }
-            //         if (val.constructor.name === "Array") {
-            //             let tr = document.createElement("tr");
-            //             let th = document.createElement("th");
-            //             table.append(tr);
-            //             tr.append(th);
-            //             th.innerHTML = key;
-            //             th.colSpan = 2;
-
-            //             for (let value of val) {
-            //                 let tr = document.createElement("tr");
-            //                 let td = document.createElement("td");
-            //                 table.append(tr);
-            //                 tr.append(td);
-
-            //                 if (value.match(/^https:\/\/swapi\.py4e\.com\/+/)) {
-            //                     let btn = document.createElement("button");
-            //                     btn.innerHTML = value;
-            //                     btn.onclick = () => {
-            //                         fetch(value)
-            //                             .then((res) => res.json())
-            //                             .then((luke) => {
-            //                                 drawTable({ data: luke });
-            //                             });
-            //                     };
-            //                     td.colSpan = 2;
-            //                     td.append(btn);
-            //                     continue;
-            //                 }
-            //                 if (val.constructor.name === "Object") {
-            //                     drawTable({ data: val, parent: td });
-            //                     continue;
-            //                 }
-            //                 td.colSpan = 2;
-            //                 td.innerHTML = value;
-            //             }
-            //             continue;
-            //         }
-            //         table.append(tr);
-            //         tr.append(th);
-            //         tr.append(td);
-            //         th.innerHTML = key;
-            //         if (val.constructor.name === "String" && val.match(/^https:\/\/swapi\.py4e\.com\/+/)) {
-            //             let btn = document.createElement("button");
-            //             btn.innerHTML = val;
-            //             btn.onclick = () => {
-            //                 fetch(val)
-            //                     .then((res) => res.json())
-            //                     .then((data) => {
-            //                         drawTable({ data: data });
-            //                     });
-            //             };
-            //             td.append(btn);
-            //             continue;
-            //         }
-            //         td.innerHTML = val;
-            //     }
-
-            //     parent === document.body && (parent.innerHTML = "");
-            //     parent.append(table);
-            // }
-            // fetch("https://swapi.py4e.com/api/people/1/")
-            //     .then((res) => res.json())
-            //     .then((luke) => {
-            //         drawTable({ data: luke });
-            //     });
+            function drawTable(params = {}) {
+                let { data = {}, parent = document.body } = params;
+                let table = document.createElement("table");
+                table.border = 1;
+                parent.append(table);
+                for (let [key, val] of Object.entries(data)) {
+                    let tr = document.createElement("tr");
+                    let th = document.createElement("th");
+                    let td = document.createElement("td");
+
+                    if (val.constructor.name === "Object") {
+                        drawTable({ data: val, parent: td });
+                        table.append(tr);
+                        tr.append(th);
+                        tr.append(td);
+                        continue;
+                    }
+                    if (val.constructor.name === "Array") {
+                        let tr = document.createElement("tr");
+                        let th = document.createElement("th");
+                        table.append(tr);
+                        tr.append(th);
+                        th.innerHTML = key;
+                        th.colSpan = 2;
+
+                        for (let value of val) {
+                            let tr = document.createElement("tr");
+                            let td = document.createElement("td");
+                            table.append(tr);
+                            tr.append(td);
+
+                            if (value.match(/^https:\/\/swapi\.py4e\.com\/+/)) {
+                                let btn = document.createElement("button");
+                                btn.innerHTML = value;
+                                btn.onclick = () => {
+                                    fetch(value)
+                                        .then((res) => res.json())
+                                        .then((luke) => {
+                                            drawTable({ data: luke });
+                                        });
+                                };
+                                td.colSpan = 2;
+                                td.append(btn);
+                                continue;
+                            }
+                            if (val.constructor.name === "Object") {
+                                drawTable({ data: val, parent: td });
+                                continue;
+                            }
+                            td.colSpan = 2;
+                            td.innerHTML = value;
+                        }
+                        continue;
+                    }
+                    table.append(tr);
+                    tr.append(th);
+                    tr.append(td);
+                    th.innerHTML = key;
+                    if (val.constructor.name === "String" && val.match(/^https:\/\/swapi\.py4e\.com\/+/)) {
+                        let btn = document.createElement("button");
+                        btn.innerHTML = val;
+                        btn.onclick = () => {
+                            fetch(val)
+                                .then((res) => res.json())
+                                .then((data) => {
+                                    drawTable({ data: data });
+                                });
+                        };
+                        td.append(btn);
+                        continue;
+                    }
+                    td.innerHTML = val;
+                }
+
+                parent === document.body && (parent.innerHTML = "");
+                parent.append(table);
+            }
+            fetch("https://swapi.py4e.com/api/people/1/")
+                .then((res) => res.json())
+                .then((luke) => {
+                    drawTable({ data: luke });
+                });
 
 //MYFETCH
             // function myfetch(url) {

js/14(Chat Homework)/index.html

@@ -0,0 +1,154 @@
+<!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>
+    </head>
+    <body>
+        <style>
+            .error {
+                background: rgb(245, 124, 124);
+            }
+
+            .messageWrapper {
+                border-top: 1px solid black;
+                padding: 15px;
+                margin-top: 10px;
+            }
+
+            .messageNick {
+                font-weight: bold;
+            }
+
+            .messageText {
+                margin-top: 7px;
+            }
+
+            .messageDate {
+                margin-top: 7px;
+                width: 100%;
+                text-align: right;
+            }
+        </style>
+        <div>
+            <input type="text" id="nameInput" placeholder="name" />
+            <input type="text" id="textInput" placeholder="message" />
+            <button id="submitButton">Submit</button>
+            <div id="messageHistory"></div>
+        </div>
+        <script>
+            const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
+
+            function jsonPost(url, data) {
+                return new Promise((resolve, reject) => {
+                    fetch(url, {
+                        method: "POST",
+                        // headers: { "Content-Type": "text/json" },
+                        body: JSON.stringify(data),
+                    }).then(
+                        (res) => {
+                            resolve(res.json());
+                        },
+                        (err) => {
+                            reject(new Error(err));
+                        }
+                    );
+                });
+            }
+            let nextMessageId = 0;
+
+            const drawMessages = (parent, elements) => {
+                for (let message of elements) {
+                    let messageWrapper = document.createElement("div");
+                    let messageText = document.createElement("div");
+                    let messageNick = document.createElement("div");
+                    let messageDate = document.createElement("div");
+
+                    messageWrapper.append(messageNick);
+                    messageWrapper.append(messageText);
+                    messageWrapper.append(messageDate);
+
+                    messageNick.innerText = message.nick;
+                    messageText.innerText = message.message;
+                    messageDate.innerText = new Date(+message.timestamp).toLocaleDateString();
+
+                    messageWrapper.classList.add("messageWrapper");
+                    messageNick.classList.add("messageNick");
+                    messageText.classList.add("messageText");
+                    messageDate.classList.add("messageDate");
+
+                    parent.prepend(messageWrapper);
+                }
+            };
+
+            submitButton.addEventListener("click", function sendMessage() {
+                let name = nameInput.value.trim();
+                let text = textInput.value.trim();
+
+                if (name.length === 0) {
+                    nameInput.classList.add("error");
+                    return;
+                } else {
+                    nameInput.classList.remove("error");
+                }
+                if (text.length === 0) {
+                    textInput.classList.add("error");
+                    return;
+                } else {
+                    textInput.classList.remove("error");
+                }
+                sendAndCheck(name, text);
+            });
+
+            async function sendMessage(nick, message) {
+                let nextMessageId = await jsonPost("http://students.a-level.com.ua:10012", {
+                    func: "addMessage",
+                    nick: nick,
+                    message: message,
+                });
+                return nextMessageId;
+            }
+
+            // let getMessagesPoll = setInterval(() => {
+            //     jsonPost("http://students.a-level.com.ua:10012", {
+            //         func: "getMessages",
+            //         messageId: nextMessageId,
+            //     }).then((res) => {
+            //         if (nextMessageId !== res.nextMessageId) {
+            //             drawMessages(messageHistory, res.data);
+            //             nextMessageId = res.nextMessageId;
+            //         }
+            //         console.log(res.data);
+            //         console.log(nextMessageId);
+            //     });
+            // }, 3000);
+
+            async function getMessages(nextMessageId) {
+                let response = await jsonPost("http://students.a-level.com.ua:10012", {
+                    func: "getMessages",
+                    messageId: nextMessageId,
+                });
+                if (nextMessageId < response.nextMessageId) {
+                    drawMessages(messageHistory, response.data);
+                    nextMessageId = response.nextMessageId;
+                }
+                return nextMessageId;
+            }
+
+            async function sendAndCheck(nick, message) {
+                let nextMessageId = await sendMessage(nick, message);
+                getMessages(nextMessageId);
+            }
+
+            async function checkLoop() {
+                while (true) {
+                    await delay(3000);
+                    nextMessageId = await getMessages(nextMessageId);
+                }
+            }
+            checkLoop();
+        </script>
+    </body>
+</html>