26 lines
1.0 KiB
JavaScript
Executable File
26 lines
1.0 KiB
JavaScript
Executable File
import Message from './Message.js';
|
|
|
|
export default class ChatBox {
|
|
render() {
|
|
const container = document.createElement('div');
|
|
container.classList.add('d-flex', 'flex-column', 'h-100');
|
|
|
|
container.innerHTML = `
|
|
<div id="messages" class="flex-grow-1 p-3 overflow-auto"></div>
|
|
<form id="messageForm" class="d-flex">
|
|
<input type="text" id="messageInput" class="form-control me-2" placeholder="Type your message..." required>
|
|
<button type="submit" class="btn btn-success">Send</button>
|
|
</form>
|
|
`;
|
|
|
|
container.querySelector('#messageForm').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const messageText = container.querySelector('#messageInput').value;
|
|
const message = new Message(messageText, 'sent');
|
|
container.querySelector('#messages').appendChild(message.render());
|
|
container.querySelector('#messageInput').value = '';
|
|
});
|
|
|
|
return container;
|
|
}
|
|
} |