7_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)

    let messageContent
    if (message.attachments.length) {
        // we have an attachment - audio message
        messageContent = getAudioElement(message.attachments[0].asset_url)
    } else {
        // Create the main message text div
        const messageTextDiv = document.createElement("div")
        messageTextDiv.textContent = message.text
        messageContent = messageTextDiv
    }

    // Append the username div to the MessageDiv
    messageDiv.append(messageContent)

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