Chat App Interface

Build a chat app interface in JavaScript — message rendering, smooth animations and the logic behind a live conversation view.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Advanced Project — Master Real-Time UI, Smooth Animations & Chat Logic

🧠 Project Overview

A Chat App Interface is one of the strongest advanced JavaScript portfolio projects because it combines:

This is the exact UI logic used in:

Even without a real backend, you'll learn everything required to build a functional, responsive, animated chat UI — then later connect it to Firebase or Socket.IO to make it live.

🎯 Goal

Your goal is to build a chat app that:

Once complete, this becomes an amazing portfolio project that feels modern and premium.

🧩 Core Concepts You'll Learn

This project teaches you advanced front-end patterns:

1. Dynamic DOM rendering

Messages are generated using JavaScript template strings:

container.innerHTML += `
   <div class="message sent">...</div>
`

2. CSS animations

Smooth sliding, fading, bouncing, pulsing, typing dots.

3. Timing logic with setTimeout()

For realistic bot responses.

4. Auto-scroll behavior

Ensures conversation always scrolls to bottom:

container.scrollTop = container.scrollHeight;

5. Real-time UI flow

Typing → message delay → response → animations.

6. Input validation & events

7. State simulation

Simulated chat logic, message objects & timestamps.

💻 Starter Code (Beautiful, Clean, Modern)

This is your fully working chat interface, including gorgeous UI, sent & received bubbles, typing indicator, auto-scroll, and fake AI replies. Just paste & run!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat App Interface</title>

<style>
  body {
    background: #ecefff;
    font-family: Arial, sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    padding: 20px;
  }
  .chat-container {
    width: 450px;
    height: 85vh;
    background: white;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  }
  .chat-header {
    background: #4c60ff;
    padding: 20px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  .messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .message {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 12px;
    font-size: 15px;
    animation: fadeIn 0.2s ease;
  }
  .sent {
    background: #4c60ff;
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
  }
  .received {
    background: #f1f1f1;
    color: #333;
    border-bottom-left-radius: 4px;
  }
  .timestamp {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.6;
  }
  @keyframes fadeIn { 
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .input-area {
    padding: 15px;
    background: #ffffff;
    display: flex;
    gap: 10px;
  }
  input {
    flex: 1;
    padding: 14px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
  }
  button {
    background: #4c60ff;
    color: white;
    padding: 14px 18px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }
  .typing-indicator {
    display: flex;
    align-items: center;
    padding: 10px;
    width: 70px;
    margin-bottom: 15px;
    background: #f1f1f1;
    border-radius: 12px;
  }
  .dot {
    height: 8px;
    width: 8px;
    background: #888;
    border-radius: 50%;
    margin: 0 3px;
    animation: bounce 0.7s infinite alternate;
  }
  .dot:nth-child(2) { animation-delay: 0.2s; }
  .dot:nth-child(3) { animation-delay: 0.4s; }

  @keyframes bounce {
    from { transform: translateY(0); opacity: 0.4; }
    to { transform: translateY(-4px); opacity: 1; }
  }
</style>
</head>

<body>

<div class="chat-container">
  <div class="chat-header">ChatBot 🤖</div>

  <div class="messages" id="messages"></div>

  <div class="input-area">
    <input id="chatInput" placeholder="Type a message..." />
    <button onclick="sendMessage()">Send</button>
  </div>
</div>

<script>
const messagesDiv = document.getElementById("messages");

function addMessage(text, type="sent") {
  const msg = document.createElement("div");
  msg.classList.add("message", type);
  msg.innerHTML = `
    ${text}
    <span class="timestamp">${new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}</span>
  `;
  messagesDiv.appendChild(msg);
  autoScroll();
}

function autoScroll() {
  messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

function showTyping() {
  const typing = document.createElement("div");
  typing.classList.add("typing-indicator");
  typing.id = "typing";

  typing.innerHTML = `
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  `;
  messagesDiv.appendChild(typing);
  autoScroll();
}

function hideTyping() {
  const typing = document.getElementById("typing");
  if (typing) typing.remove();
}

function sendMessage() {
  const input = document.getElementById("chatInput");
  const text = input.value.trim();

  if (!text) return;
  
  addMessage(text, "sent");
  input.value = "";

  simulateBotReply();
}

function simulateBotReply() {
  showTyping();

  setTimeout(() => {
    hideTyping();
    const responses = [
      "Hello! 👋",
      "How can I help you today?",
      "Interesting!",
      "Tell me more.",
      "That's cool 😎",
      "Nice to hear from you!"
    ];
    const reply = responses[Math.floor(Math.random() * responses.length)];
    addMessage(reply, "received");
  }, 1300);
}

document.getElementById("chatInput").addEventListener("keypress", e => {
  if (e.key === "Enter") sendMessage();
});
</script>

</body>
</html>

🚀 Enhancement Ideas (Make It Portfolio-Ready)

These upgrades turn your simple chat UI into a premium application:

💾 1. Save Chat History (localStorage)

localStorage.setItem("chatHistory", JSON.stringify(messages));

Load them on startup to continue conversations.

🧵 2. Multiple Chat Rooms

Simulate tabs like WhatsApp/Discord.

😀 3. Emoji Picker

Use an emoji API or create a custom emoji panel.

📎 4. Image Uploads

✔ 5. Read Receipts

🎤 6. Voice Messages

Record with MediaRecorder API and send playable audio bubbles.

🔥 7. Real Backend Support

📌 Completion Checklist

A fully finished Chat App Interface should:

This becomes one of the strongest pieces in your web development portfolio.

Related lessons