Here’s a complete beginner-friendly Chat App (HTML + CSS + JS) — no backend, runs in browser. It simulates chat UI with username, left/right messages, and timestamps.
📁 1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat App</title>
<link rel="stylesheet" href="style.css">
</head>
<body><div class="chat-container"> <!-- Header -->
<div class="chat-header">
💬 Chat Application
</div> <!-- Messages -->
<div id="chatBox" class="chat-box"></div> <!-- Input -->
<div class="chat-input">
<input type="text" id="messageInput" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>
</div></div><script src="script.js"></script>
</body>
</html>🎨 2. style.css
body {
font-family: Arial;
background: #f0f2f5;
display: flex;
justify-content: center;
margin-top: 50px;
}.chat-container {
width: 350px;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}.chat-header {
background: #0084ff;
color: white;
padding: 15px;
text-align: center;
font-weight: bold;
}.chat-box {
height: 400px;
overflow-y: auto;
padding: 10px;
background: #e5ddd5;
}.message {
margin: 10px 0;
max-width: 70%;
padding: 10px;
border-radius: 10px;
position: relative;
font-size: 14px;
}.left {
background: white;
align-self: flex-start;
}.right {
background: #dcf8c6;
margin-left: auto;
}.time {
font-size: 10px;
color: gray;
margin-top: 5px;
display: block;
}.chat-input {
display: flex;
border-top: 1px solid #ccc;
}.chat-input input {
flex: 1;
padding: 10px;
border: none;
outline: none;
}.chat-input button {
padding: 10px 15px;
background: #0084ff;
color: white;
border: none;
cursor: pointer;
}⚙️ 3. script.js
let username = prompt("Enter your name:");function getTime() {
let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes(); if (minutes < 10) minutes = "0" + minutes; return hours + ":" + minutes;
}function sendMessage() {
let input = document.getElementById("messageInput");
let message = input.value.trim(); if (message === "") return; addMessage(username, message, "right"); // Fake reply (for demo)
setTimeout(() => {
addMessage("Bot", "Reply to: " + message, "left");
}, 1000); input.value = "";
}function addMessage(user, text, side) {
let chatBox = document.getElementById("chatBox"); let msgDiv = document.createElement("div");
msgDiv.classList.add("message", side); msgDiv.innerHTML = `
<strong>${user}</strong><br>
${text}
<span class="time">${getTime()}</span>
`; chatBox.appendChild(msgDiv); // Auto scroll
chatBox.scrollTop = chatBox.scrollHeight;
}// Enter key support
document.getElementById("messageInput").addEventListener("keypress", function(e) {
if (e.key === "Enter") {
sendMessage();
}
});✅ What this project includes:
✔ Username input
✔ Send message
✔ Left/right chat UI
✔ Timestamp
✔ Auto scroll
✔ Enter key support
✔ Demo bot reply
