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;
+}

js/home.js

@@ -0,0 +1,48 @@
+const searchElement = document.querySelector(".user .search"),
+  searchBar = document.querySelector(".user .search input"),
+  searchButton = document.querySelector(".user .search button"),
+  usersList = document.querySelector(".user .users");
+
+searchElement.onmouseover = () => {
+  searchButton.classList.toggle("active");
+  searchBar.classList.toggle("active");
+};
+
+searchElement.onmouseout = () => {
+  searchButton.classList.remove("active");
+  searchBar.classList.remove("active");
+};
+
+searchBar.onkeyup = () => {
+  let query = searchBar.value;
+  if (query != "") {
+    let xhr = new XMLHttpRequest();
+    xhr.open("POST", "php/search.php", true);
+    xhr.onload = () => {
+      if (xhr.readyState === XMLHttpRequest.DONE) {
+        if (xhr.status === 200) {
+          let data = xhr.response;
+          usersList.innerHTML = data;
+        }
+      }
+    };
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhr.send("query=" + query);
+  }
+};
+
+setInterval(() => {
+  let xhr = new XMLHttpRequest();
+  xhr.open("GET", "php/users.php", true);
+  xhr.onload = () => {
+    if (xhr.readyState === XMLHttpRequest.DONE) {
+      if (xhr.status === 200) {
+        let data = xhr.response;
+        if (!searchBar.classList.contains("active")) {
+          usersList.innerHTML = data;
+        }
+      }
+    }
+  };
+  xhr.send();
+}, 1000);

js/login.js

@@ -0,0 +1,27 @@
+const form = document.querySelector(".login form"),
+  continueBtn = form.querySelector(".button input"),
+  errorText = form.querySelector(".error");
+
+form.onsubmit = (e) => {
+  e.preventDefault();
+};
+
+continueBtn.onclick = () => {
+  let xhr = new XMLHttpRequest();
+  xhr.open("POST", "php/login.php", true);
+  xhr.onload = () => {
+    if (xhr.readyState === XMLHttpRequest.DONE) {
+      if (xhr.status === 200) {
+        let data = xhr.response;
+        if (data === "success") {
+          location.href = "home.php";
+        } else {
+          errorText.style.display = "block";
+          errorText.textContent = data;
+        }
+      }
+    }
+  };
+  let formData = new FormData(form);
+  xhr.send(formData);
+};

js/register.js

@@ -14,7 +14,7 @@ continueBtn.onclick = () => {
       if (xhr.status === 200) {
         let data = xhr.response;
         if (data === "success") {
-          location.href = "home.php";
+          location.href = "start.php";
         } else {
           errorText.style.display = "block";
           errorText.textContent = data;

js/search-visibility.js

@@ -1,14 +0,0 @@
-const searchElement = document.querySelector(".user .search");
-
-const searchBar = document.querySelector(".user .search input");
-const searchButton = document.querySelector(".user .search button");
-
-searchElement.onmouseover = () => {
-    searchButton.classList.toggle("active");
-    searchBar.classList.toggle("active");
-}
-
-searchElement.onmouseout = () => {
-    searchButton.classList.remove("active");
-    searchBar.classList.remove("active");
-}