Fix chat message timestamps

Author: ebrahimbeiati

chat-app/.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules/
+dist/

chat-app/backend/server.js

@@ -3,16 +3,19 @@ import cors from "cors";
 
 const app = express();
 const PORT = 3000;
+
 app.use(express.json());
 app.use(cors());
-let messages = [];
+
+const messages = [];
 
 app.get("/messages", (req, res) => {
   res.json(messages);
 });
 
 app.post("/messages", (req, res) => {
-  const message = req.body;
+  const { username, text } = req.body;
+  const message = { username, text, timeStamp: new Date().toISOString() };
   messages.push(message);
   res.status(201).json(message);
 });

chat-app/frontend/script.js

@@ -1,54 +1,96 @@
 const messagesList = document.getElementById("messages-list");
 const form = document.getElementById("message-form");
-const input = document.getElementById("message-input");
+const messageInput = document.getElementById("message-input");
 const usernameInput = document.getElementById("username-input");
 
 const BACKEND_URL =
   "https://xwc7hmpmk5kvt9ktptcvuuke.hosting.codeyourfuture.io";
 
+//Utility: sanitize input to prevent HTML injection
+function sanitizeInput(input) {
+  const div = document.createElement("div");
+  div.textContent = input;
+  return div.innerHTML;
+}
+
 // Fetch and display messages
 async function loadMessages() {
-  const response = await fetch(`${BACKEND_URL}/messages`);
-  const messages = await response.json();
-  messagesList.innerHTML = "";
-  messages.forEach((msg) => {
-    const li = document.createElement("li");
-    li.innerHTML = `
-    <div class="message-header">
-      <span class="username"> <strong>${msg.username}</strong></span>
-      <span class="timestamp">${msg.timeStamp}</span>
-      </div>
-      <div class="message-text">${msg.text}</div>`;
-    messagesList.appendChild(li);
-  });
+  try {
+    const response = await fetch(`${BACKEND_URL}/messages`);
+    if (!response.ok) {
+      throw new Error("Failed to fetch messages");
+    }
+    const messages = await response.json();
+    messagesList.innerHTML = "";
+
+    messages.forEach((msg) => {
+      const li = document.createElement("li");
+      const header = document.createElement("div");
+      header.className = "message-header";
+
+      const usernameSpan = document.createElement("span");
+      usernameSpan.className = "username";
+      usernameSpan.textContent = msg.username;
+
+      const timestamp = document.createElement("span");
+      timestamp.className = "timestamp";
+      timestamp.textContent = new Date(msg.timeStamp).toLocaleString();
+
+
+
+      header.appendChild(usernameSpan);
+      header.appendChild(timestamp);
+
+      const textDiv = document.createElement("div");
+      textDiv.className = "message-text";
+      textDiv.textContent = msg.text;
+
+      li.appendChild(header);
+      li.appendChild(textDiv);
+      messagesList.appendChild(li);
+    });
+    // Scroll to the bottom to show the latest message
+    messagesList.scrollTop = messagesList.scrollHeight;
+  } catch (error) {
+    console.error("Error loading messages:", error);
+    messagesList.innerHTML =
+      "<li>Error loading messages. Please try again later.</li>";
+  }
 }
 
 // Handle form submission
 form.addEventListener("submit", async (e) => {
   e.preventDefault();
 
-  const newMessage = {
-    username: usernameInput.value,
-    text: input.value,
-    timeStamp: new Date().toLocaleTimeString("en-US", {
-      hour: "numeric",
-      minute: "2-digit",
-      hour12: true,
-    }),
-  };
-
-  await fetch(`${BACKEND_URL}/messages`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(newMessage),
-  });
-
-  input.value = "";
-  usernameInput.value = "";
-  loadMessages();
+  const username = usernameInput.value.trim();
+  const text = messageInput.value.trim();
+
+  if (!username || !text) {
+    alert("Please enter both a username and a message.");
+    return;
+  }
+  const newMessage = { username, text };
+
+  try {
+    const response = await fetch(`${BACKEND_URL}/messages`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(newMessage),
+    });
+    if (!response.ok) {
+      throw new Error("Failed to send message");
+    }
+    messageInput.value = "";
+    usernameInput.value = "";
+    loadMessages();
+  } catch (error) {
+    console.error("Error sending message:", error);
+    alert("Failed to send message. Please try again.");
+  }
 });
+loadMessages();
 
 // Refresh messages every 2 seconds
 setInterval(loadMessages, 2000);