AliceClass/_includes/chat.html

46 lines
1.7 KiB
HTML
Raw Normal View History

2024-05-23 01:23:48 -03:00
<script>
// Seleciona o campo de entrada e o botão de envio
const messageInput = document.getElementById("messageInput");
const sendButton = document.getElementById("sendButton");
// Adiciona um ouvinte de evento ao botão de envio
sendButton.addEventListener("click", function() {
// Obtém o texto digitado
const messageText = messageInput.value;
// Verifica se o texto não está vazio
if (messageText.trim() !== "") {
// Cria um novo elemento de mensagem enviada
const sentMessage = document.createElement("div");
sentMessage.classList.add("message", "sent");
sentMessage.innerHTML = `
<span class="sent-name">Você</span>
<p>${messageText}</p>
`;
// Adiciona a nova mensagem à caixa de mensagens
const chatContainer = document.querySelector(".chat-container");
chatContainer.appendChild(sentMessage);
// Limpa o campo de entrada
messageInput.value = "";
}
});
</script>
<div class="chat-container chat-background">
<div class="message received">
<span class="received-name">NOME_USUARIO</span>
<p>Olá! Como vai?</p>
</div>
<!-- <div class="chat-line"></div> -->
<div class="message sent">
<span class="sent-name">Você</span>
<p>Olá! Tudo bem, e você?</p>
</div>
<!-- Mais mensagens aqui -->
</div>
<div class="chat-container is-flex is-flex-direction-row" style="height: 100%;">
<input id="messageInput" class="input is-info" type="text" placeholder="Info input">
<button id="sendButton" class="button ml-2 is-link">Enviar</button>
</div>