added chatbot feature

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

index.html

@@ -6,10 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>e-commerce website</title>
 
-    <!-- font-awesome cdn link -->
     <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
 
-    <!-- custom css file link -->
     <link rel="stylesheet" href="style.css">
 
 </head>
@@ -435,7 +433,25 @@ <h4>Install App</h4>
         </div>
     </footer>
 
-    <!-- javascript script file link -->
+    <div id="chatbot-container">
+        <div id="chat-button">
+            <i class="far fa-comments"></i>
+        </div>
+        <div id="chat-window">
+            <div id="chat-header">
+                <h4>Live Support</h4>
+                <i id="chat-close" class="far fa-times"></i>
+            </div>
+            <div id="chat-body">
+                <p class="chat-message bot">Welcome! How can I help you find the perfect product today?</p>
+                <!-- <p class="chat-message bot">This is a static UI feature for practice!</p> -->
+            </div>
+            <div id="chat-input-area">
+                <input type="text" placeholder="Type a message...">
+                <button><i class="fas fa-paper-plane"></i></button>
+            </div>
+        </div>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -12,4 +12,111 @@ if (close) {
     close.addEventListener('click', () => {
         nav.classList.remove('active');
     })
+}
+
+// ====================================
+// CHATBOT JS FUNCTIONALITY
+// ====================================
+const chatButton = document.getElementById('chat-button');
+const chatWindow = document.getElementById('chat-window');
+const chatClose = document.getElementById('chat-close');
+const chatBody = document.getElementById('chat-body');
+const chatInput = document.querySelector('#chat-input-area input');
+const sendButton = document.querySelector('#chat-input-area button');
+
+// --- Hardcoded Knowledge Base ---
+const responses = {
+    // Basic Greetings/Info
+    'hello': "Hi there! I'm your virtual assistant. How can I help you shop today?",
+    'hi': "Hi there! I'm your virtual assistant. How can I help you shop today?",
+    'help': "I can answer questions about shipping, returns, and sales. Try asking about 'shipping' or 'return policy'.",
+
+    // Core E-commerce Questions
+    'how many days will it take for shipping': "Standard shipping within the country typically takes 3-5 business days. Express options are available at checkout!",
+    'delivery': "Standard shipping within the country typically takes 3-5 business days. Express options are available at checkout!",
+    'return': "Our return policy allows for returns within 30 days of purchase, provided the items are unworn and have tags attached. Please visit the 'About' page for full details.",
+    'policy': "Our return policy allows for returns within 30 days of purchase, provided the items are unworn and have tags attached. Please visit the 'About' page for full details.",
+    'sale': "Yes! We have a Super Value Deal offering up to 70% off on T-shirts & Accessories. Check our homepage banners!",
+    'coupon': "You can apply coupon codes during the checkout process on the Cart page to save money.",
+
+    // NEW QUESTION: How Shopping Works
+    'shopping': "Shopping is easy! Here are the steps: 1. **Browse** the Shop page. 2. **Click** on a product to view details. 3. **Select** size/quantity and click 'Add to Cart'. 4. **Review** your items on the Cart page. 5. **Proceed** to checkout to enter payment and shipping info. Happy shopping!",
+
+    // Default Fallback
+    'default': "Sorry, I didn't quite catch that. I can help with topics like 'shipping', 'returns', or 'sales'."
+};
+
+function getBotResponse(userInput) {
+    // Simple preprocessing: lowercase and remove leading/trailing spaces
+    const processedInput = userInput.toLowerCase().trim();
+
+    // Check for keywords in the predefined list
+    for (const key in responses) {
+        if (processedInput.includes(key)) {
+            return responses[key];
+        }
+    }
+    // Return the default response if no keyword is found
+    return responses['default'];
+}
+
+function appendMessage(sender, text) {
+    const messageElement = document.createElement('p');
+    messageElement.classList.add('chat-message', sender);
+    messageElement.textContent = text;
+    chatBody.appendChild(messageElement);
+
+    // Scroll to the bottom of the chat body
+    chatBody.scrollTop = chatBody.scrollHeight;
+}
+
+function handleUserInput() {
+    const userInput = chatInput.value;
+    if (userInput === '') return; // Don't send empty messages
+
+    // 1. Append user message
+    appendMessage('user', userInput);
+
+    // 2. Get and append bot response after a short delay
+    const botText = getBotResponse(userInput);
+
+    setTimeout(() => {
+        appendMessage('bot', botText);
+    }, 500); // 0.5 second delay for a realistic feel
+
+    // 3. Clear input
+    chatInput.value = '';
+}
+
+// Event Listeners for Chatbot Input
+if (sendButton) {
+    sendButton.addEventListener('click', handleUserInput);
+}
+
+if (chatInput) {
+    chatInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            handleUserInput();
+        }
+    });
+}
+
+// Toggle logic (remains the same)
+if (chatButton && chatWindow) {
+    chatButton.addEventListener('click', () => {
+        chatWindow.classList.toggle('active');
+        chatButton.style.display = chatWindow.classList.contains('active') ? 'none' : 'flex';
+
+        // Set focus to the input when opening the chat
+        if (chatWindow.classList.contains('active')) {
+             chatInput.focus();
+        }
+    });
+}
+
+if (chatClose && chatWindow) {
+    chatClose.addEventListener('click', () => {
+        chatWindow.classList.remove('active');
+        chatButton.style.display = 'flex';
+    });
 }