Finalize

js/chat.js

@@ -0,0 +1,63 @@
+const form = document.querySelector(".message-input"),
+  selectedId = form.querySelector(".message-input .selected-id").value,
+  inputField = form.querySelector(".message-input .message-text"),
+  sendButton = form.querySelector(".message-input button"),
+  chatBox = document.querySelector(".chat-box");
+
+form.onsubmit = (e) => {
+  e.preventDefault();
+};
+
+inputField.focus();
+inputField.onkeyup = () => {
+  if (inputField.value != "") {
+    sendButton.classList.add("active");
+  } else {
+    sendButton.classList.remove("active");
+  }
+};
+
+sendButton.onclick = () => {
+  let xhr = new XMLHttpRequest();
+  xhr.open("POST", "php/send_msg.php", true);
+  xhr.onload = () => {
+    if (xhr.readyState === XMLHttpRequest.DONE) {
+      if (xhr.status === 200) {
+        inputField.value = "";
+        scrollToBottom();
+      }
+    }
+  };
+  let formData = new FormData(form);
+  xhr.send(formData);
+};
+
+chatBox.onmouseenter = () => {
+  chatBox.classList.add("active");
+};
+
+chatBox.onmouseleave = () => {
+  chatBox.classList.remove("active");
+};
+
+setInterval(() => {
+  let xhr = new XMLHttpRequest();
+  xhr.open("POST", "php/get_msg.php", true);
+  xhr.onload = () => {
+    if (xhr.readyState === XMLHttpRequest.DONE) {
+      if (xhr.status === 200) {
+        let data = xhr.response;
+        chatBox.innerHTML = data;
+        if (!chatBox.classList.contains("active")) {
+          scrollToBottom();
+        }
+      }
+    }
+  };
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.send("selected_id=" + selectedId);
+}, 1000);
+
+function scrollToBottom() {
+  chatBox.scrollTop = chatBox.scrollHeight;
+}