contact is fully working

frontend/js/chat.js

@@ -167,12 +167,20 @@ async function initializeSocket() {
         usernameSpan.textContent = contactUsername;
         usernameSpan.className = 'contact-username';
 
-        const removeButton = createRemoveButton(contactUsername, contact);
+        const removeButton = document.createElement('button');
+        removeButton.textContent = 'X';
+        removeButton.className = 'remove-contact';
+        removeButton.addEventListener('click', (e) => {
+            e.stopPropagation();
+            socket.emit('delete contact', contactUsername);
+            contacts.removeChild(contact);
+            addedContacts.delete(contactUsername);
+        });
 
         contact.appendChild(usernameSpan);
         contact.appendChild(removeButton);
 
-        usernameSpan.addEventListener('click', () => {
+        contact.addEventListener('click', () => {
             currentRecipient = contactUsername;
             recipientInput.value = contactUsername;
             localStorage.setItem('currentRecipient', currentRecipient);
@@ -181,24 +189,6 @@ async function initializeSocket() {
 
         contacts.appendChild(contact);
     }
-
-    function createRemoveButton(contactUsername, contactElement) {
-        const removeButton = document.createElement('button');
-        removeButton.textContent = 'X';
-        removeButton.className = 'remove-contact';
-        removeButton.addEventListener('click', (e) => {
-            e.stopPropagation();
-            socket.emit('delete contact', contactUsername);
-            removeContact(contactUsername, contactElement);
-        });
-
-        return removeButton;
-    }
-
-    function removeContact(contactUsername, contactElement) {
-        contacts.removeChild(contactElement);
-        addedContacts.delete(contactUsername);
-    }
 }
 initializeSocket();
 

frontend/routes/chat.html

@@ -19,7 +19,7 @@
 
     <div class="chat-area">
         <form id="recipientForm">
-            <input id="recipient" autocomplete="off" placeholder="Enter recipient"/>
+            <input id="recipient" autocomplete="off" placeholder="Enter contact"/>
             <button type="submit">Set recipient</button>
         </form>