Build Talk Page using HTML,CSS, JAVA SCRIPT

[sarasvatidadhore]

#index.html

<title>Professional Chat</title>

John Doe

Jane Smith

Online

Send

<script type="module" src="/src/js/main.js"></script>

#153
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: opacity 0.2s;
}

button:hover {
opacity: 0.9;
}

#index.js
// run node index.js in the terminal

console.log(Hello Node.js v${process.versions.node}!);

#JS
#contacts.js
export function renderContacts(contacts) {
const contactsList = document.getElementById('contactsList');

contacts.forEach(contact => {
    const contactElement = document.createElement('div');
    contactElement.className = 'contact';
    contactElement.innerHTML = `
        <img src="https://api.dicebear.com/6.x/avataaars/svg?seed=${contact.name}" alt="${contact.name}" class="avatar small">
        <div class="contact-info">
            <h4>${contact.name}</h4>
            <p>${contact.lastMessage}</p>
        </div>
    `;
    
    contactElement.addEventListener('click', () => {
        document.querySelectorAll('.contact').forEach(el => el.classList.remove('active'));
        contactElement.classList.add('active');
    });
    
    contactsList.appendChild(contactElement);
});

}

#messages.js
import { formatRelative } from 'date-fns';

export function renderMessages(messages) {
const messagesList = document.getElementById('messagesList');

messages.forEach(message => {
    const messageElement = document.createElement('div');
    messageElement.className = `message ${message.sent ? 'sent' : 'received'}`;
    
    const time = formatRelative(new Date(message.timestamp), new Date());
    
    messageElement.innerHTML = `
        <div class="message-content">${message.text}</div>
        <div class="message-time">${time}</div>
    `;
    
    messagesList.appendChild(messageElement);
});

messagesList.scrollTop = messagesList.scrollHeight;

}