Scrollbar in the ChatRoom

.chatroom-messages::-webkit-scrollbar {
    width: 8px; 
}
.chatroom-messages::-webkit-scrollbar-thumb {
    background-color: #301934; 
}
  • I added a scrollbar in the chatroom
  • If no scrollbar, then if there is too many message, the shape of the chatroom will break.

Enter to send

<button id="send" onclick="sendMessage()">Send</button>

function handleKeyPress(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        sendMessage();
    }
}
  • I added a button “Send”, if you click on that, the message will send.
  • Later I feel like is too complicate, so I add code when user press enter, the message will send.

Time

const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const messageWithTimestamp = `[${timestamp}] ${message}`;
const messageElement = document.createElement("div");
messageElement.textContent = messageWithTimestamp;
  • I added some code so when ever the message was send it will show the time