custom.js

// [...]
function appendMessage(message) {
  const messageContainer = document.getElementById('messages');

  // Create and append the message div
  const messageDiv = document.createElement('div');
  messageDiv.className = `message ${
    message.user.id === username ? 'message-right' : 'message-left'
  }`;

  // Create the username div
  const usernameDiv = document.createElement('div');
  usernameDiv.className = 'message-username';
  usernameDiv.textContent = `${message.user.id}:`;
  // Append the username div to the MessageDiv
  messageDiv.append(usernameDiv);

  // Create the main message text div
  const messageTextDiv = document.createElement('div');
  messageTextDiv.textContent = message.text;
  // Append the username div to the MessageDiv
  messageDiv.append(messageTextDiv);

  // Then, append the messageDiv to the "messages" div
  messageContainer.appendChild(messageDiv);
}