acesdit · Tejas-Santosh-Nalawade · Oct 22, 2025 · Oct 22, 2025
diff --git a/Domains/Frontend/MiniProjects/SimpleChatUI/README.md b/Domains/Frontend/MiniProjects/SimpleChatUI/README.md
@@ -0,0 +1,31 @@
+# 💬 Simple Chat UI
+
+**Contributor:** [Tanmay-Kad](https://github.com/Tanmay-Kad)
+
+---
+
+## 🧾 Description
+A **modern and interactive Chat UI** built with **HTML**, **CSS (Tailwind)**, and **JavaScript**.  
+This project simulates a simple chat interface where users can send messages and receive **predefined bot responses**.  
+
+The design features a **clean layout**, **scrollable messages**, and **responsive styling**, making it perfect for learning **DOM manipulation** and **basic JavaScript interactivity**.
+
+---
+
+## 🚀 Features
+- Send messages through **input box** or **Enter key**.  
+- Predefined **bot responses** with simulated delay.  
+- Scrolls automatically to show the **latest messages**.  
+- Clean **responsive design** using **Tailwind CSS**.  
+- Dark mode compatibility using Tailwind's dark classes.  
+- Interactive **send button** with hover and focus effects.
+
+---
+
+
+## 🧩 Tech Stack
+- **HTML5** – Structure and layout  
+- **Tailwind CSS** – Styling and responsiveness  
+- **JavaScript** – Logic, DOM manipulation, and bot responses  
+
+---
diff --git a/Domains/Frontend/MiniProjects/SimpleChatUI/index.html b/Domains/Frontend/MiniProjects/SimpleChatUI/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simple Chat UI</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 flex items-center justify-center min-h-screen">
+
+  <!-- Main Chat Container -->
+  <div class="w-full max-w-md h-[90vh] md:h-[80vh] flex flex-col bg-white dark:bg-gray-800 rounded-2xl shadow-2xl">
+
+    <!-- Header -->
+    <header class="bg-blue-600 text-white p-4 flex items-center justify-between rounded-t-2xl shadow-md">
+      <div class="flex items-center space-x-3">
+        <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+            viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="text-blue-600">
+            <path d="M12 8V4H8"/>
+            <rect width="16" height="12" x="4" y="8" rx="2"/>
+            <path d="M2 14h2"/>
+            <path d="M20 14h2"/>
+            <path d="M15 13v2"/>
+            <path d="M9 13v2"/>
+          </svg>
+        </div>
+        <div>
+          <h1 class="text-lg font-semibold">Chat Bot</h1>
+          <p class="text-xs text-blue-200">Online</p>
+        </div>
+      </div>
+    </header>
+
+    <!-- Messages Area -->
+    <main id="messages" class="flex-1 p-4 overflow-y-auto space-y-4">
+      <div class="flex justify-start">
+        <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-xl max-w-xs shadow">
+          <p>Hello! How can I help you today?</p>
+        </div>
+      </div>
+      <div class="flex justify-end">
+        <div class="bg-blue-600 text-white p-3 rounded-xl max-w-xs shadow">
+          <p>Hi, I just wanted to test the chat.</p>
+        </div>
+      </div>
+    </main>
+
+    <!-- Input Area -->
+    <footer class="p-4 border-t dark:border-gray-700">
+      <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-xl p-2">
+        <input type="text" id="userInput" placeholder="Type your message..."
+          class="flex-1 bg-transparent px-2 text-gray-800 dark:text-gray-200 focus:outline-none">
+        <button id="sendBtn"
+          class="bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+            viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-send">
+            <line x1="22" y1="2" x2="11" y2="13"></line>
+            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+          </svg>
+        </button>
+      </div>
+    </footer>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/SimpleChatUI/script.js b/Domains/Frontend/MiniProjects/SimpleChatUI/script.js
@@ -0,0 +1,80 @@
+const messagesContainer = document.getElementById('messages');
+const userInput = document.getElementById('userInput');
+const sendBtn = document.getElementById('sendBtn');
+
+// Predefined bot responses
+const botResponses = [
+  "That's interesting! Tell me more.",
+  "I see. What are your thoughts on that?",
+  "How does that make you feel?",
+  "Could you elaborate a bit?",
+  "Thanks for sharing!",
+  "I'm not sure I understand. Can you rephrase?",
+  "Let me think about that for a moment."
+];
+
+/**
+ * Scrolls the message container to the bottom
+ */
+const scrollToBottom = () => {
+  messagesContainer.scrollTop = messagesContainer.scrollHeight;
+};
+
+/**
+ * Adds a message to the chat window
+ */
+const addMessage = (text, sender) => {
+  const messageWrapper = document.createElement('div');
+  messageWrapper.classList.add('flex');
+
+  const messageBubble = document.createElement('div');
+  messageBubble.classList.add('p-3', 'rounded-xl', 'max-w-xs', 'shadow');
+  messageBubble.textContent = text;
+
+  if (sender === 'user') {
+    messageWrapper.classList.add('justify-end');
+    messageBubble.classList.add('bg-blue-600', 'text-white');
+  } else {
+    messageWrapper.classList.add('justify-start');
+    messageBubble.classList.add('bg-gray-200', 'dark:bg-gray-700', 'text-gray-800', 'dark:text-gray-200');
+  }
+
+  messageWrapper.appendChild(messageBubble);
+  messagesContainer.appendChild(messageWrapper);
+  scrollToBottom();
+};
+
+/**
+ * Handles the bot's response
+ */
+const handleBotResponse = () => {
+  setTimeout(() => {
+    const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)];
+    addMessage(randomResponse, 'bot');
+  }, 1000);
+};
+
+/**
+ * Handles user message sending
+ */
+const handleSendMessage = () => {
+  const text = userInput.value.trim();
+  if (text) {
+    addMessage(text, 'user');
+    userInput.value = '';
+    handleBotResponse();
+  }
+};
+
+// Event listeners
+sendBtn.addEventListener('click', handleSendMessage);
+userInput.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    handleSendMessage();
+  }
+});
+
+window.onload = () => {
+  scrollToBottom();
+  userInput.focus();
+};
diff --git a/Domains/Frontend/MiniProjects/SimpleChatUI/style.css b/Domains/Frontend/MiniProjects/SimpleChatUI/style.css
@@ -0,0 +1,25 @@
+/* Custom font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar for messages */
+#messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+#messages::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+#messages::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 10px;
+}
+
+#messages::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}