From 1b31dedbb80c5fbbc3e835499fc68f36afcac501 Mon Sep 17 00:00:00 2001
From: gxc-siddhartha <siddhartha.alw@gmail.com>
Date: Sat, 12 Oct 2024 19:29:18 +0530
Subject: [PATCH] Added Comments: index.html, app.js

---
 README.md         |  2 +-
 public/app.js     | 46 +++++++++++++++++++++++++++++++++++-----------
 public/index.html | 38 +++++++++++++++++++++++++++-----------
 public/style.css  | 19 +++++++++++++++----
 server.js         |  1 -
 5 files changed, 78 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index b0a4ad3..628ad0a 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# CORE
\ No newline at end of file
+# CORE
diff --git a/public/app.js b/public/app.js
index e08d0a2..d671b6e 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1,35 +1,59 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const chatWindow = document.getElementById('chat-window');
-    const chatInput = document.getElementById('chat-input');
-    const sendBtn = document.getElementById('send-btn');
+document.addEventListener('DOMContentLoaded', () => { 
+    // Wait until the HTML content is fully loaded before running the script
+    const chatWindow = document.getElementById('chat-window'); 
+    // Reference to the chat window div for displaying messages
+    const chatInput = document.getElementById('chat-input'); 
+    // Reference to the input field where users type their messages
+    const sendBtn = document.getElementById('send-btn'); 
+    // Reference to the send button
     const socket = io(); 
+    // Initialize a connection to the server via Socket.IO
 
     const anonymousUsers = ['User1', 'User2', 'User3', 'User4', 'User5', 'User6', 'User7', 'User8', 'User9', 'User10', 'User11', 'User12', 'User13', 'User14', 'User15'];
+    // Array of anonymous usernames for assigning to users in the chat
+
     const aiUser = anonymousUsers[Math.floor(Math.random() * anonymousUsers.length)];
+    // Randomly select an anonymous user to represent the AI
 
-    sendBtn.addEventListener('click', sendMessage);
+    sendBtn.addEventListener('click', sendMessage); 
+    // Add event listener for send button to trigger sendMessage function when clicked
 
     function sendMessage() {
         const messageText = chatInput.value;
-        if (messageText === '') return;
+        // Get the text entered by the user in the input field
+        if (messageText === '') return; 
+        // If the message is empty, do nothing
 
-     
         const user = anonymousUsers[Math.floor(Math.random() * anonymousUsers.length)];
+        // Randomly select an anonymous user to attribute the message to
         const message = { user, text: messageText };
+        // Create a message object with the user's name and message text
         socket.emit('chatMessage', message);
-        chatInput.value = '';
+        // Send the message to the server via the 'chatMessage' event
+        chatInput.value = ''; 
+        // Clear the input field after sending the message
     }
+
     socket.on('chatMessage', (message) => {
+        // Listen for incoming 'chatMessage' events from the server
         const messageElement = document.createElement('div');
-        messageElement.classList.add('message');
+        // Create a new div element to hold the message
+        messageElement.classList.add('message'); 
+        // Add the 'message' class to style the message
         messageElement.innerHTML = `<strong>${message.user}:</strong> ${message.text}`;
-        chatWindow.appendChild(messageElement);
-        chatWindow.scrollTop = chatWindow.scrollHeight;
+        // Set the inner HTML to display the user's name in bold and the message text
+        chatWindow.appendChild(messageElement); 
+        // Append the message to the chat window
+        chatWindow.scrollTop = chatWindow.scrollHeight; 
+        // Automatically scroll to the bottom of the chat window to show the latest message
     });
 
     function generateAiResponse() {
         const aiMessageText = "This is an AI-generated response.";
+        // Text for the AI's automated response
         const aiMessage = { user: aiUser, text: aiMessageText };
+        // Create a message object for the AI
         socket.emit('chatMessage', aiMessage);
+        // Send the AI's message to the server
     }
 });
diff --git a/public/index.html b/public/index.html
index ef4a629..2d836f4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,20 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- Define the character encoding for the document -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Set the viewport for responsiveness across devices -->
     <title>Anonymous Group Chat</title>
-    <link rel="stylesheet" href="style.css">
+    <!-- Title for the browser tab -->
+    <link rel="stylesheet" href="style.css" />
+    <!-- Link to the external CSS file for styling -->
     <script src="/socket.io/socket.io.js"></script>
+    <!-- Load Socket.IO for real-time communication -->
     <script src="app.js"></script>
-</head>
-<body>
+    <!-- Load the JavaScript file that handles chat functionality -->
+  </head>
+  <body>
     <div class="chat-container">
-        <div id="chat-window" class="chat-window">
-        </div>
-        <input type="text" id="chat-input" placeholder="Type your message..." autofocus>
+      <!-- Main container for the chat interface -->
+      <div id="chat-window" class="chat-window">
+        <!-- Chat window where messages will be displayed -->
+      </div>
+      <div class="chat-input-field-container">
+        <input
+          type="text"
+          id="chat-input"
+          placeholder="Message CORE"
+          autofocus
+        />
+        <!-- Input field where users can type messages -->
         <button id="send-btn">Send</button>
+        <!-- Send button for sending messages -->
+      </div>
     </div>
-
-</body>
+  </body>
 </html>
diff --git a/public/style.css b/public/style.css
index b290c3d..7206ff4 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,5 +1,5 @@
 body {
-    font-family: Arial, sans-serif;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, sans-serif;
     background-color: #f4f4f9;
     margin: 0;
     padding: 0;
@@ -46,19 +46,30 @@ body {
     align-self: flex-end;
 }
 
+.chat-input-field-container{
+    display: flex;
+}
+
 #chat-input {
-    width: calc(100% - 60px);
+    width: 100%;
     padding: 10px;
     border: none;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid #00000032;
+    font-weight: 500;
+    font-size: 0.9rem;
     outline: none;
 }
 
 #send-btn {
-    width: 50px;
+    height: 2.5rem;
     background-color: #007bff;
     color: white;
     border: none;
     padding: 10px;
     cursor: pointer;
 }
+
+#send-btn:hover{
+    background-color: #0068d6;
+
+}
diff --git a/server.js b/server.js
index 67e53fb..40a22fc 100644
--- a/server.js
+++ b/server.js
@@ -11,7 +11,6 @@ const io = socketIO(server);
 app.use(express.static(path.join(__dirname, 'public')));
 io.on('connection', (socket) => {
     console.log('A user connected.');
-
    
     socket.on('chatMessage', (msg) => {
         io.emit('chatMessage', msg);