Membuat Aplikasi Chat Sederhana dengan JavaScript

Dipublikasikan: Juli 2026

Aplikasi chat adalah web app yang sangat populer. Tutorial ini membuat antarmuka chat sederhana dengan pesan otomatis, pengirim, dan timestamp.

Fitur

Input pesan dengan tombol kirim
Pesan muncul dengan nama pengirim
Timestamp otomatis
Scroll otomatis ke pesan terbaru

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aplikasi Chat Sederhana</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI',Arial,sans-serif; background:#f0f2f5; min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px; }
    .chat-container { background:#fff; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,0.1); width:100%; max-width:450px; display:flex; flex-direction:column; height:600px; }
    .chat-header { background:#6c5ce7; color:#fff; padding:18px 22px; border-radius:20px 20px 0 0; }
    .chat-header h1 { font-size:18px; }
    .chat-header p { font-size:12px; opacity:0.8; }
    .chat-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; }
    .message { max-width:80%; padding:12px 16px; border-radius:16px; font-size:14px; line-height:1.5; }
    .message.sent { align-self:flex-end; background:#6c5ce7; color:#fff; border-bottom-right-radius:4px; }
    .message.received { align-self:flex-start; background:#f0f2f5; color:#2d3436; border-bottom-left-radius:4px; }
    .message .sender { font-size:11px; font-weight:600; margin-bottom:3px; opacity:0.8; }
    .message .time { font-size:10px; text-align:right; margin-top:4px; opacity:0.6; }
    .chat-input { display:flex; padding:15px 20px; border-top:1px solid #f0f2f5; gap:10px; }
    .chat-input input { flex:1; padding:12px 16px; border:2px solid #dfe6e9; border-radius:12px; font-size:14px; }
    .chat-input input:focus { outline:none; border-color:#6c5ce7; }
    .chat-input button { padding:12px 20px; background:#6c5ce7; color:#fff; border:none; border-radius:12px; cursor:pointer; font-size:14px; }
    .chat-input button:hover { background:#5b4bd6; }
    .typing { font-size:12px; color:#b2bec3; padding:0 20px 10px; font-style:italic; display:none; }
  </style>
</head>
<body>
  <div class="chat-container">
    <div class="chat-header">
      <h1>ðŸ’¬ Chat Room</h1>
      <p>2 peserta online</p>
    </div>
    <div class="chat-messages" id="chatMessages">
      <div class="message received"><div class="sender">Bot</div>Halo! Selamat datang di chat room. Ada yang bisa saya bantu?<div class="time">10:00</div></div>
    </div>
    <div class="typing" id="typing">Seseorang sedang mengetik...</div>
    <div class="chat-input">
      <input id="msgInput" placeholder="Ketik pesan..." />
      <button onclick="sendMessage()">Kirim</button>
    </div>
  </div>
  <script>
    const responses = ['Halo! Ada yang bisa dibantu?', 'Wah, menarik! Ceritakan lebih lanjut.', 'Saya setuju dengan Anda!', 'Terima kasih informasinya!', 'Baik, akan saya catat.', 'Mohon tunggu sebentar ya...', 'Tentu, silakan lanjutkan.', 'Oke, saya paham maksud Anda.'];
    let chatCount = 0;
    function sendMessage() {
      const input = document.getElementById('msgInput');
      const msg = input.value.trim();
      if (!msg) return;
      const now = new Date();
      const time = String(now.getHours()).padStart(2,'0') + ':' + String(now.getMinutes()).padStart(2,'0');
      addMessage('Anda', msg, time, 'sent');
      input.value = '';
      chatCount++;
      // Bot typing indicator
      document.getElementById('typing').style.display = 'block';
      setTimeout(() => {
        document.getElementById('typing').style.display = 'none';
        const botTime = new Date();
        const bt = String(botTime.getHours()).padStart(2,'0') + ':' + String(botTime.getMinutes()).padStart(2,'0');
        addMessage('Bot', responses[chatCount % responses.length], bt, 'received');
      }, 1000 + Math.random() * 1500);
    }
    function addMessage(sender, text, time, type) {
      const div = document.createElement('div');
      div.className = 'message ' + type;
      div.innerHTML = `<div class="sender">${sender}</div>${text}<div class="time">${time}</div>`;
      document.getElementById('chatMessages').appendChild(div);
      div.scrollIntoView({behavior:'smooth'});
    }
    document.getElementById('msgInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); });
  </script>
</body>
</html>