<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Chat</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#chat-container {
display: flex;
flex-direction: column;
height: 100vh;
}
#messages {
flex: 1;
overflow-y: auto;
padding: 10px;
background-color: #f2f2f2;
}
#input-container {
display: flex;
align-items: center;
padding: 10px;
background-color: #f5f5f5;
}
#message-input {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 10px;
}
#send-btn {
padding: 8px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="chat-container">
<div id="messages"></div>
<div id="input-container">
<input type="text" id="message-input" placeholder="Type your message here">
<span id="send-btn" onclick="sendMessage()">Send</span>
</div>
</div>
<script>
const messagesContainer = document.getElementById('messages');
const messageInput = document.getElementById('message-input');
function sendMessage() {
const trimmedMessage = messageInput.value.trim();
if (trimmedMessage !== '') {
displayMessage(trimmedMessage, 'sent');
// Simulate reply after a delay
setTimeout(() => {
displayMessage('Thanks for your message!', 'received');
}, 1000);
messageInput.value = '';
}
}
function displayMessage(message, type) {
const newMessage = document.createElement('div');
newMessage.textContent = message;
newMessage.className = type === 'sent' ? 'sent-message' : 'received-message';
messagesContainer.appendChild(newMessage);
}
</script>
</body>
</html>