<!DOCTYPE html> <html> <head> <title>Chat Application</title> <style> .chat-container { width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; } .chat-messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; } .chat-input { width: 100%; } </style> </head> <body> <div class="chat-container"> <div class="chat-messages" id="chatMessages"></div> <input type="text" class="chat-input" id="chatInput" placeholder="Type your message"> <button onclick="sendMessage()">Send</button> </div> <script> function sendMessage() { var messageInput = document.getElementById('chatInput'); var message = messageInput.value; if (message.trim() !== '') { var messageElement = document.createElement('div'); messageElement.textContent = message; document.getElementById('chatMessages').appendChild(messageElement); messageInput.value = ''; } } </script> </body> </html>