Simple chat application in javascript

Creating a basic chat application in JavaScript involves using HTML, CSS, and JavaScript. Below is a simple example that demonstrates how you can set up a chat interface and handle sending and displaying messages. For the sake of simplicity, this example does not include backend functionality but focuses on the front-end part.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Application</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="chat-container">
        <div id="chat-box">
            <!-- Messages will be appended here -->
        </div>
        <input type="text" id="message-input" placeholder="Type your message...">
        <button id="send-button">Send</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

#chat-container {
    width: 300px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

#chat-box {
    height: 400px;
    overflow-y: auto;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

#message-input {
    width: calc(100% - 80px);
    padding: 10px;
    border: none;
    outline: none;
    box-sizing: border-box;
}

#send-button {
    width: 60px;
    padding: 10px;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
}

#send-button:hover {
    background-color: #0056b3;
}

.message {
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 4px;
    background-color: #f1f1f1;
}

.message.user {
    background-color: #007bff;
    color: #fff;
    text-align: right;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', () => {
    const sendButton = document.getElementById('send-button');
    const messageInput = document.getElementById('message-input');
    const chatBox = document.getElementById('chat-box');

    sendButton.addEventListener('click', sendMessage);
    messageInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });

    function sendMessage() {
        const messageText = messageInput.value.trim();
        if (messageText !== '') {
            addMessage(messageText, 'user');
            messageInput.value = '';
        }
    }

    function addMessage(text, sender) {
        const messageElement = document.createElement('div');
        messageElement.classList.add('message', sender);
        messageElement.textContent = text;
        chatBox.appendChild(messageElement);
        chatBox.scrollTop = chatBox.scrollHeight;
    }
});

Explanation

HTML: The basic structure includes a container for the chat messages and an input field with a send button.
CSS: Styles to make the chat application look clean and functional. The messages from the user are styled differently.
JavaScript: Adds event listeners for the send button and the Enter key. The sendMessage function adds the user’s message to the chat box. The addMessage function creates a new message element and appends it to the chat box.

This example creates a simple front-end chat application. For a complete application, you would need a backend to handle message storage, user authentication, and real-time message updates (e.g., using WebSockets).