Scribd Logo
Upload

Welcome to Scribd!

  • Chat HTML

    Uploaded by

    telmofclopes
    20 views2 pages
    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.

    Original Description:

    Original Title

    chat html

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    20 views2 pages

    Chat HTML

    Uploaded by

    telmofclopes
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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