Programming AI Chatbot

Programming AI Chatbot

body { background: #181c20; color: #f3f3f3; font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; min-height: 100vh; } .chat-container { max-width: 500px; margin: 40px auto; background: #23272b; border-radius: 10px; box-shadow: 0 4px 24px rgba(0,0,0,0.3); padding: 24px 18px 18px 18px; } h1 { text-align: center; margin-bottom: 18px; font-size: 1.6em; color: #7ecfff; } .chat-box { background: #181c20; border-radius: 8px; min-height: 260px; max-height: 350px; overflow-y: auto; padding: 12px; margin-bottom: 14px; font-size: 1em; } .message { margin-bottom: 12px; line-height: 1.5; } .user { text-align: right; color: #7ecfff; } .bot { text-align: left; color: #b6fcd5; } #chat-form { display: flex; gap: 8px; } #user-input { flex: 1; padding: 8px 10px; border-radius: 5px; border: none; font-size: 1em; background: #23272b; color: #f3f3f3; outline: none; } #user-input:focus { background: #22262a; } button { background: #7ecfff; color: #181c20; border: none; border-radius: 5px; padding: 8px 18px; font-size: 1em; cursor: pointer; transition: background 0.2s; } button:hover { background: #5bb6e6; } code { background: #23272b; color: #ffe066; padding: 2px 5px; border-radius: 4px; font-size: 0.98em; } pre { background: #23272b; color: #ffe066; padding: 10px; border-radius: 6px; overflow-x: auto; margin: 8px 0; font-size: 0.98em; } import { getBotResponse } from './programming-bot.js'; const chatBox = document.getElementById('chat-box'); const chatForm = document.getElementById('chat-form'); const userInput = document.getElementById('user-input'); function appendMessage(text, sender) { const msgDiv = document.createElement('div'); msgDiv.className = `message ${sender}`; msgDiv.innerHTML = text; chatBox.appendChild(msgDiv); chatBox.scrollTop = chatBox.scrollHeight; } chatForm.addEventListener('submit', async (e) => { e.preventDefault(); const input = userInput.value.trim(); if (!input) return; appendMessage(escapeHtml(input), 'user'); userInput.value = ''; appendMessage('...', 'bot'); await new Promise(r => setTimeout(r, 400)); const botMsg = await getBotResponse(input); // Remove typing const typing = chatBox.querySelector('.bot-typing'); if (typing) typing.parentElement.remove(); appendMessage(botMsg, 'bot'); }); function escapeHtml(text) { return text.replace(/[&<>"']/g, function (m) { return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[m]; }); } // Greet on load appendMessage( "👋 Hi! I'm a programming AI chatbot. Ask me about JavaScript, Python, algorithms, code snippets, or programming concepts!", 'bot' ); // Simple rule-based programming AI chatbot // Helper: format code blocks function formatCode(code, lang = '') { if (code.includes('\n')) { return `

${escapeHtml(code)}

`; } return `${escapeHtml(code)}`; } function escapeHtml(text) { return text.replace(/[&<>"']/g, function (m) { return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[m]; }); } // Main response logic export async function getBotResponse(input) { const msg = input.trim().toLowerCase(); // JavaScript factorial if (msg.includes('factorial') && msg.includes('javascript')) { return ( "Here's how you can calculate the factorial of a number in JavaScript:" + formatCode( `function factorial(n) { if (n === 0) return 1; return n * factorial(n - 1); }` ) ); } // Python reverse string if (msg.includes('reverse') && msg.includes('string') && msg.includes('python')) { return ( "To reverse a string in Python, you can use slicing:" + formatCode(`s = "hello"\nreversed_s = s[::-1]\nprint(reversed_s)`) ); } // What is a closure if (msg.includes('closure')) { return ( "A closure is a function that remembers the variables from the place where it was created, even after that scope has finished. For example:" + formatCode( `function makeCounter() { let count = 0; return function() { count++; return count; }; } const counter = makeCounter(); counter(); // 1 counter(); // 2` ) ); } // Python list comprehension if (msg.includes('list comprehension') && msg.includes('python')) { return ( "A list comprehension in Python is a concise way to create lists. Example:" + formatCode(`[x * x for x in range(5)] # [0, 1, 4, 9, 16]`) ); } // JavaScript array map if (msg.includes('array') && msg.includes('map') && msg.includes('javascript')) { return ( "The map() method creates a new array by applying a function to each element:" + formatCode( `const nums = [1, 2, 3]; const squares = nums.map(x => x * x); // squares: [1, 4, 9]` ) ); } // FizzBuzz if (msg.includes('fizzbuzz')) { return ( "Here's a classic FizzBuzz solution in JavaScript:" + formatCode( `for (let i = 1; i <= 100; i++) { let out = ''; if (i % 3 === 0) out += 'Fizz'; if (i % 5 === 0) out += 'Buzz'; console.log(out || i); }` ) ); } // Sorting algorithms if (msg.includes('bubble sort')) { return ( "Bubble sort in JavaScript:" + formatCode( `function bubbleSort(arr) { for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; } } } return arr; }` ) ); } if (msg.includes('quick sort')) { return ( "Quick sort in JavaScript:" + formatCode( `function quickSort(arr) { if (arr.length <= 1) return arr; const pivot = arr[0]; const left = arr.slice(1).filter(x => x < pivot); const right = arr.slice(1).filter(x => x >= pivot); return [...quickSort(left), pivot, ...quickSort(right)]; }` ) ); } // General programming help if ( msg.includes('hello world') || (msg.includes('print') && (msg.includes('python') || msg.includes('javascript'))) ) { if (msg.includes('python')) { return formatCode('print("Hello, world!")'); } if (msg.includes('javascript')) { return formatCode('console.log("Hello, world!");'); } } // About the bot if (msg.includes('who are you') || msg.includes('what can you do')) { return "I'm a simple programming AI chatbot! I can answer questions about programming concepts, algorithms, and provide code snippets in JavaScript, Python, and more. Try asking me about closures, sorting, or how to do something in code!"; } // Default fallback return ( "Sorry, I don't know the answer to that yet. Try asking about JavaScript, Python, algorithms, or programming concepts!" ); }