Simple Chatbot

Bot: Hello! How can I help you today?

=== assets/css/styles.css === /* Mobile-first responsive design */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; background-color: #f4f4f4; } header { background-color: #333; color: white; text-align: center; padding: 1rem; } header h1 { margin: 0; } header a { color: #4CAF50; text-decoration: none; font-size: 0.9rem; margin-top: 0.5rem; display: block; } header a:hover { text-decoration: underline; } main { flex: 1; display: flex; justify-content: center; padding: 1rem; } #chat-container { width: 100%; max-width: 600px; background-color: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; height: 80vh; } #chat-messages { flex: 1; overflow-y: auto; padding: 1rem; border-bottom: 1px solid #ddd; } .message { margin-bottom: 1rem; padding: 0.5rem; border-radius: 4px; } .message.user { background-color: #4CAF50; color: white; text-align: right; } .message.bot { background-color: #e0e0e0; color: #333; } #input-area { display: flex; padding: 1rem; } #user-input { flex: 1; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px 0 0 4px; outline: none; } #send-button { padding: 0.5rem 1rem; background-color: #4CAF50; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; } #send-button:hover { background-color: #45a049; } footer { background-color: #333; color: white; text-align: center; padding: 1rem; margin-top: auto; } /* Responsive adjustments */ @media (min-width: 768px) { #chat-container { height: 70vh; } } === assets/js/chatbot.js === document.addEventListener('DOMContentLoaded', function() { const chatMessages = document.getElementById('chat-messages'); const userInput = document.getElementById('user-input'); const sendButton = document.getElementById('send-button'); // Simple response logic function getBotResponse(message) { message = message.toLowerCase(); if (message.includes('hello') || message.includes('hi')) { return 'Bot: Hi there! How can I assist you?'; } else if (message.includes('how are you')) { return 'Bot: I\'m doing well, thank you! What about you?'; } else if (message.includes('bye') || message.includes('goodbye')) { return 'Bot: Goodbye! Have a great day!'; } else { return 'Bot: Sorry, I didn\'t understand that. Can you try rephrasing?'; } } // Function to add message to chat function addMessage(text, className) { const messageDiv = document.createElement('div'); messageDiv.className = `message ${className}`; messageDiv.textContent = text; chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; // Auto-scroll to bottom } // Send message function function sendMessage() { const message = userInput.value.trim(); if (message) { addMessage(`You: ${message}`, 'user'); userInput.value = ''; // Simulate bot response after a short delay setTimeout(() => { const response = getBotResponse(message); addMessage(response, 'bot'); }, 500); } } // Event listeners sendButton.addEventListener('click', sendMessage); userInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { sendMessage(); } }); });