fixed display overlaping and layout, removed messageString and userString from state, replaced input handler by formSubmithandler, pending to fix deploy version

Author: TzeMingHo

chat-app/backend/app.js

@@ -1,13 +1,6 @@
 import express from "express";
 import cors from "cors";
 
-const app = express();
-app.use(
-  cors({
-    // origin: "https://tzemingho-chatapp-server-frontend.hosting.codeyourfuture.io"
-  }),
-);
-app.use(express.json());
 const port = 4000;
 
 const waitingRoom = [];
@@ -20,6 +13,14 @@ const chatHistory = [
   },
 ];
 
+const app = express();
+app.use(
+  cors({
+    // origin: "https://tzemingho-chatapp-server-frontend.hosting.codeyourfuture.io"
+  }),
+);
+app.use(express.json());
+
 app.get("/", (req, res) => {
   res.json(chatHistory);
 });

chat-app/frontend/scripts.js

@@ -1,8 +1,6 @@
 import { scrollToBottom } from "./utilities.js";
 
 const state = {
-  messageString: "",
-  userString: "",
   // backendURL: "https://tzemingho-chatapp-server-backend.hosting.codeyourfuture.io",
   backendURL: "http://localhost:4000",
   messages: [],
@@ -72,8 +70,6 @@ const keepFetchingMessages = async () => {
 };
 
 function messageInputReset() {
-  state.messageString = "";
-  state.userString = "";
   const messageInputElement = document.getElementById("message-input");
   const userInputElement = document.getElementById("user-name-input");
   messageInputElement.value = "";
@@ -95,7 +91,6 @@ async function postingMessage(messageString, userString) {
     if (response.ok) {
       const confirmMessage = await response.text();
       if (confirmMessage == "sent") {
-        chatDisplay();
         messageInputReset();
       }
     }
@@ -104,8 +99,12 @@ async function postingMessage(messageString, userString) {
   }
 }
 
-async function messageSubmitHandler(e, messageString, userString) {
+async function messageSubmitHandler(e) {
   e.preventDefault();
+
+  const messageString = document.getElementById("message-input").value.trim();
+  const userString = document.getElementById("user-name-input").value.trim();
+
   if (!messageString || !userString) {
     console.error(`Message or user cannot be empty.`);
     window.alert("Message or user cannot be empty.");
@@ -115,25 +114,12 @@ async function messageSubmitHandler(e, messageString, userString) {
   }
 }
 
-function messageInputHandler() {
-  const messageInputElement = document.getElementById("message-input");
-  messageInputElement.addEventListener("input", (e) => {
-    state.messageString = e.target.value.trim();
-  });
-
-  const userInputElement = document.getElementById("user-name-input");
-  userInputElement.addEventListener("input", (e) => {
-    state.userString = e.target.value.trim();
-  });
-
-  document
-    .getElementById("message-submit-button")
-    .addEventListener("click", async (e) => {
-      await messageSubmitHandler(e, state.messageString, state.userString);
-    });
+function messageFormHandler() {
+  const formElement = document.getElementById("message-form");
+  formElement.addEventListener("submit", messageSubmitHandler);
 }
 
 window.onload = async () => {
   keepFetchingMessages();
-  messageInputHandler();
+  messageFormHandler();
 };

chat-app/frontend/styles.css

@@ -4,39 +4,73 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  padding: 10px 20px;
+  background-color: aliceblue;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  padding: 15px;
+  min-height: 0;
+  overflow: hidden;
+}
+
 #chat-display-area {
   background-color: aliceblue;
   border: 1px solid;
   border-radius: 5px;
-  width: 80%;
-  height: 68vh;
+  width: 100%;
+  max-width: 800px;
+  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 5px;
-  overflow-y: hidden;
+  gap: 10px;
+  padding: 10px;
+  overflow-y: auto;
   scroll-behavior: smooth;
 }
 
 .chat-thread {
   background-color: white;
   border: navy solid 1.5px;
-  max-width: 90%;
+  width: 100%;
+  max-width: 95%;
   border-radius: 5px;
-  height: 10vh;
+  flex-shrink: 0;
+  min-height: 80px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .message-in-thread {
   height: 8vh;
+  word-break: break-word;
 }
 
 .info-in-thread {
   background-color: navy;
   color: white;
   display: flex;
   justify-content: space-between;
+  padding: 4px 8px;
 }
 
 .timestamp-in-thread {
@@ -54,15 +88,20 @@
 
 #message-form {
   border: 1px solid;
-  width: 80%;
-  height: 20vh;
-  padding: 2px;
+  border-radius: 5px;
+  width: 100%;
+  max-width: 800px;
+  padding: 10px;
+  background: white;
+  flex-shrink: 0;
 }
 
 #message-input {
-  height: 11.5vh;
+  height: 60px;
   width: 100%;
   padding: 8px;
+  resize: none;
+  margin-bottom: 8px;
 }
 
 #signature-and-send-area {
@@ -79,8 +118,9 @@
 }
 
 footer {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
+  text-align: center;
+  padding: 8px;
   background-color: aliceblue;
+  font-size: 0.9rem;
+  flex-shrink: 0;
 }