Simple Chat Application in JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Chat Application</title>
  <style>
    .chat-container {
      width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
    }
    .chat-messages {
      height: 300px;
      overflow-y: scroll;
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }
    .chat-input {
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="chat-container">
    <div class="chat-messages" id="chatMessages"></div>
    <input type="text" class="chat-input" id="chatInput" placeholder="Type your message">
    <button onclick="sendMessage()">Send</button>
  </div>

  <script>
    function sendMessage() {
      var messageInput = document.getElementById('chatInput');
      var message = messageInput.value;

      if (message.trim() !== '') {
        var messageElement = document.createElement('div');
        messageElement.textContent = message;
        document.getElementById('chatMessages').appendChild(messageElement);
        messageInput.value = '';
      }
    }
  </script>
</body>
</html>
Leave a Reply Cancel reply
