Chat Website

Chat

body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; } .chat-container { width: 400px; height: 600px; background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } .chat-header { background-color: #007bff; color: white; padding: 20px; text-align: center; } .chat-messages { flex-grow: 1; padding: 20px; overflow-y: scroll; display: flex; flex-direction: column; } .message { background-color: #e0e0e0; padding: 10px; border-radius: 8px; margin-bottom: 10px; word-wrap: break-word; } .user-message { background-color: #007bff; color: white; align-self: flex-end; } .other-message { background-color: #e0e0e0; color: black; align-self: flex-start; } .chat-input { padding: 20px; display: flex; border-top: 1px solid #ccc; } .chat-input input { flex-grow: 1; padding: 10px; border-radius: 5px; border: 1px solid #ccc; } .chat-input button { padding: 10px 15px; border: none; background-color: #007bff; color: white; border-radius: 5px; margin-left: 10px; cursor: pointer; } const messageInput = document.getElementById('message-input'); const sendButton = document.getElementById('send-button'); const chatMessages = document.getElementById('chat-messages'); sendButton.addEventListener('click', sendMessage); messageInput.addEventListener('keypress', function(event) { if (event.key === 'Enter') { sendMessage(); } }); function sendMessage() { const messageText = messageInput.value.trim(); if (messageText !== '') { // Simulate sending message to a server fetch('/messages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: messageText }) }) .then(response => response.json()) .then(data => { displayMessage(messageText, 'user-message'); messageInput.value = ''; // Fetch new messages after sending fetchMessages(); }) .catch(error => { console.error('Error sending message:', error); }); } } function fetchMessages() { // Simulate fetching messages from a server fetch('/messages') .then(response => response.json()) .then(messages => { chatMessages.innerHTML = ''; // Clear existing messages messages.forEach(msg => { displayMessage(msg.text, msg.sender); // Assuming messages have sender info }); }) .catch(error => { console.error('Error fetching messages:', error); }); } function displayMessage(messageText, messageClass) { const messageDiv = document.createElement('div'); messageDiv.classList.add('message', messageClass); messageDiv.textContent = messageText; chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } // Fetch messages initially and then every 5 seconds fetchMessages(); setInterval(fetchMessages, 5000);