Scribd
Upload
234 views2 pages

Chat HTML

This document contains the code for a simple chat interface with HTML and CSS. It includes styling for a chat box container and input/send button. The JavaScript code handles sending new messages by appending them to the chat content area when the user clicks send after entering text in the input field.

Uploaded by

telmofclopes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
234 views2 pages

Chat HTML

This document contains the code for a simple chat interface with HTML and CSS. It includes styling for a chat box container and input/send button. The JavaScript code handles sending new messages by appending them to the chat content area when the user clicks send after entering text in the input field.

Uploaded by

telmofclopes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simples</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}

#chat-box {
max-width: 600px;
margin: 2em auto;
padding: 1em;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#message-input {
width: 80%;
padding: 0.5em;
margin-right: 0.5em;
}

#send-button {
padding: 0.5em 1em;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

#chat-content {
margin-top: 1em;
}
</style>
</head>
<body>

<div id="chat-box">
<div id="chat-content"></div>
<div>
<input type="text" id="message-input" placeholder="Digite sua
mensagem">
<button id="send-button" onclick="sendMessage()">Enviar</button>
</div>
</div>

<script>
function sendMessage() {
var messageInput = document.getElementById("message-input");
var chatContent = document.getElementById("chat-content");
if (messageInput.value.trim() !== "") {
var message = document.createElement("p");
message.textContent = "Você: " + messageInput.value;
chatContent.appendChild(message);
messageInput.value = "";
}
}
</script>

</body>
</html>

You might also like