chat done

hw12-promiseChat/script.js

@@ -1,35 +1,12 @@
 async function jsonPost(url, data)
 {
-    console.log('here')
-    // 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'))
-    //         }
-    //     }
-    // })
     const options = {
         method: "POST",
-        headers: {
-            "Accept": "application/json",
-            "Content-Type": "application/json"
-        },
         body: JSON.stringify(data)
     }
 
     try {
-        console.log('here2')
         const response = await fetch(url, options)
-        console.log('here3')
         const content = await response.json()
         return content
     } catch(e) {
@@ -43,35 +20,30 @@ async function sendMessage(nick, message) {
 
 async function drawHistory(messageId=0) {
     let messages = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: messageId})
-    console.log(messages)
     msgTotal = messages.nextMessageId
     for(let message of messages.data) {
         let msgDiv = document.createElement('div')
         msgDiv.insertAdjacentHTML('beforeend', `
-            <small style="color: magenta;">${new Date(message.timestamp).toLocaleString()}</small>
-            <div>
-            <h4 style="color: yellow; display: inline; font-style: italic;">${message.nick} :</h4> ${message.message}
+            <small style="color: slateblue;">${new Date(message.timestamp).toLocaleString()}</small>
+            <div style="word-wrap: break-word; color: steelblue;">
+                <h4 style="color: mediumseagreen; font-style: italic; display: inline;">${message.nick} :</h4> ${message.message}
             </div>
         `)
-        msgDiv.style.width = 'fit-content'
+        msgDiv.style.width = '100%'
         msgDiv.style.borderBottom = '1px solid grey'
         msgDiv.style.marginBottom = '25px'
         msgScreen.prepend(msgDiv)
     }
-    console.log(msgTotal)
     let newStuff = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: msgTotal-1})
-    console.log('new stufff', newStuff)
 }
 drawHistory()
 
 async function checkNewMessages() {
     let {nextMessageId} = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: msgTotal})
     if(nextMessageId > msgTotal) {
-        console.log('new shit', msgTotal, nextMessageId)
         msgTotal = nextMessageId
         return true
     }
-    console.log('no new shit', msgTotal, nextMessageId)
     return false
 }
 
@@ -118,15 +90,9 @@ let text = ''
 nickInput.oninput = () => {
     nick = nickInput.value;
     isFilled(nick) && isFilled(text)? sendBtn.disabled = false : sendBtn.disabled = true 
-    console.log(nick);
 }
 msgInput.oninput = () => {
     text = msgInput.value; 
     isFilled(nick) && isFilled(text)? sendBtn.disabled = false : sendBtn.disabled = true 
-    console.log(text, isFilled(text), isFilled(nick));
 } 
 sendBtn.onclick = () => sendAndCheck()
-
-// setInterval(()=>{
-//     checkNewMessages()
-// }, 5000)

hw12-promiseChat/style.css

@@ -3,11 +3,11 @@ body {
 }
 
 #msgField {
-    background-color: black;
-    width: 100%;
+    background-color: rgba(16, 16, 65, 0.979);
+    width: 90%;
     min-height: 200px;
     height: 500px;
-    border: 1px solid turquoise;
+    border: 10px double purple;
     margin-bottom: 10px;
     padding: 5px;
     color: white;