💬 Day 44 — Build a Real-Time Chat Interface (Simulation Project)

Hi Guys these projects help you to builld the confidence Welcome to Day 44 💬 Today, you’ll simulate how chat applications like WhatsApp or Messenger work. You’ll create a UI where messages appear dynamically, alternate sides for sender and receiver, and auto-scroll to the latest message.

🧩 1️⃣ Project Overview

Your chat simulation will:

• Display sent messages instantly.
• Simulate “bot replies” using setTimeout().
• Store chat history using localStorage.

📄 2️⃣ HTML Structure

<div id="chatContainer">
  <div id="chatBox"></div>
  <div id="inputArea">
    <input id="chatInput" placeholder="Type a message..." />
    <button id="sendBtn">Send</button>
  </div>
</div>

🎨 3️⃣ CSS Styling

body { font-family:Poppins,sans-serif; background:#ede7f6; }
#chatContainer { max-width:400px; margin:auto; background:white; border-radius:12px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
#chatBox { height:300px; overflow-y:auto; padding:10px; border-bottom:1px solid #ccc; }
.message { margin:8px 0; padding:10px; border-radius:12px; max-width:70%; }
.sent { background:#d1c4e9; align-self:flex-end; margin-left:auto; }
.received { background:#f3e5f5; }
#inputArea { display:flex; margin-top:10px; }
input { flex:1; padding:8px; border-radius:8px; border:1px solid #ccc; }
button { background:#6a1b9a; color:white; border:none; border-radius:8px; padding:8px 12px; margin-left:6px; cursor:pointer; }

⚙️ 4️⃣ JavaScript Logic

const chatBox = document.getElementById("chatBox");
const chatInput = document.getElementById("chatInput");
const sendBtn = document.getElementById("sendBtn");

sendBtn.addEventListener("click", sendMessage);
chatInput.addEventListener("keypress", e => { if(e.key === "Enter") sendMessage(); });

function sendMessage(){
  const msg = chatInput.value.trim();
  if(!msg) return;
  appendMessage(msg, "sent");
  chatInput.value = "";
  saveChat("sent", msg);

  setTimeout(() => {
    const reply = "🤖 Bot: " + generateReply(msg);
    appendMessage(reply, "received");
    saveChat("received", reply);
  }, 1000);
}

function appendMessage(text, type){
  const div = document.createElement("div");
  div.classList.add("message", type);
  div.textContent = text;
  chatBox.appendChild(div);
  chatBox.scrollTop = chatBox.scrollHeight;
}

function generateReply(msg){
  const responses = [
    "That's interesting!",
    "Can you tell me more?",
    "Wow, really?",
    "I totally agree with you!",
    "Haha, nice one! 😄"
  ];
  return responses[Math.floor(Math.random() * responses.length)];
}

function saveChat(type, text){
  let chatHistory = JSON.parse(localStorage.getItem("chat")) || [];
  chatHistory.push({ type, text });
  localStorage.setItem("chat", JSON.stringify(chatHistory));
}

function loadChat(){
  const chatHistory = JSON.parse(localStorage.getItem("chat")) || [];
  chatHistory.forEach(m => appendMessage(m.text, m.type));
}
loadChat();

💡 5️⃣ Features Added

• Chat auto-scroll to latest message
• Randomized bot responses
• Persistent localStorage chat memory
• Keyboard “Enter” send functionality

🎯 Summary

You’ve now built a live, interactive chat simulation that combines JavaScript’s timing, events, and storage features. In the final Day 45, we’ll wrap up the course with a Final Review & Certificate Page to mark your JavaScript mastery.

← Prev Next →