46 lines
1.7 KiB
HTML
46 lines
1.7 KiB
HTML
|
<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>
|