diff --git a/Domains/Frontend/MiniProjects/SimpleChatUI/README.md b/Domains/Frontend/MiniProjects/SimpleChatUI/README.md new file mode 100644 index 00000000..c8f5d09c --- /dev/null +++ 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 + +--- \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/SimpleChatUI/index.html b/Domains/Frontend/MiniProjects/SimpleChatUI/index.html new file mode 100644 index 00000000..a3cc53ae --- /dev/null +++ b/Domains/Frontend/MiniProjects/SimpleChatUI/index.html @@ -0,0 +1,73 @@ + + + + + + Simple Chat UI + + + + + + +
+ + +
+
+
+ + + + + + + + +
+
+

Chat Bot

+

Online

+
+
+
+ + +
+
+
+

Hello! How can I help you today?

+
+
+
+
+

Hi, I just wanted to test the chat.

+
+
+
+ + + +
+ + + + diff --git a/Domains/Frontend/MiniProjects/SimpleChatUI/script.js b/Domains/Frontend/MiniProjects/SimpleChatUI/script.js new file mode 100644 index 00000000..73e8755b --- /dev/null +++ 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 new file mode 100644 index 00000000..02d23769 --- /dev/null +++ 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; +}