Spaces:
Running
Running
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize code examples | |
| const examples = [ | |
| "Generate a Python function that calculates Fibonacci sequence up to n terms", | |
| "Create a React component for a contact form with validation", | |
| "Write a JavaScript class for a custom event handler", | |
| "Generate SQL to create a users table with relationships", | |
| "Create a REST API in Node.js with Express for product management" | |
| ]; | |
| // DOM elements | |
| const descriptionTextarea = document.getElementById('description'); | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const codeOutput = document.getElementById('codeOutput'); | |
| const copyBtn = document.getElementById('copyBtn'); | |
| // Load example into textarea | |
| window.loadExample = function(exampleNum) { | |
| descriptionTextarea.value = examples[exampleNum - 1]; | |
| descriptionTextarea.focus(); | |
| }; | |
| // Generate code button click handler | |
| generateBtn.addEventListener('click', function() { | |
| const description = descriptionTextarea.value.trim(); | |
| const language = document.getElementById('language').value; | |
| const style = document.getElementById('style').value; | |
| const includeComments = document.getElementById('comments').checked; | |
| if (!description) { | |
| alert('Please describe what code you need generated!'); | |
| return; | |
| } | |
| // Show loading state | |
| generateBtn.disabled = true; | |
| generateBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Generating...'; | |
| feather.replace(); | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| // Generate code based on inputs | |
| const generatedCode = generateCode(description, language, style, includeComments); | |
| // Display the generated code | |
| codeOutput.textContent = generatedCode; | |
| // Reset button state | |
| generateBtn.disabled = false; | |
| generateBtn.innerHTML = '<i data-feather="wand" class="mr-2"></i> Generate Code'; | |
| feather.replace(); | |
| // Scroll to code output | |
| codeOutput.scrollIntoView({ behavior: 'smooth' }); | |
| }, 1500); | |
| }); | |
| // Copy code button click handler | |
| copyBtn.addEventListener('click', function() { | |
| const code = codeOutput.textContent; | |
| navigator.clipboard.writeText(code).then(() => { | |
| // Show copied feedback | |
| const originalText = copyBtn.innerHTML; | |
| copyBtn.innerHTML = '<i data-feather="check" class="inline mr-1 w-4 h-4"></i> Copied!'; | |
| feather.replace(); | |
| // Reset after 2 seconds | |
| setTimeout(() => { | |
| copyBtn.innerHTML = originalText; | |
| feather.replace(); | |
| }, 2000); | |
| }); | |
| }); | |
| // Code generation function | |
| function generateCode(description, language, style, includeComments) { | |
| const commentSymbol = { | |
| python: '#', | |
| javascript: '//', | |
| java: '//', | |
| csharp: '//', | |
| php: '//' | |
| }[language] || '//'; | |
| const comment = includeComments ? commentSymbol + ' ' : ''; | |
| // Simple code generation based on language | |
| switch(language) { | |
| case 'python': | |
| return `${comment}Generated Python Code\n${comment}=====================\n\n${comment}Description: ${description}\n\n` + | |
| `def main():\n ${comment}Your code here\n print("Hello, World!")\n\n` + | |
| `if __name__ == "__main__":\n main()`; | |
| case 'javascript': | |
| return `${comment}Generated JavaScript Code\n${comment}========================\n\n${comment}Description: ${description}\n\n` + | |
| `function main() {\n ${comment}Your code here\n console.log("Hello, World!");\n}\n\n` + | |
| `main();`; | |
| default: | |
| return `${comment}Generated ${language.charAt(0).toUpperCase() + language.slice(1)} Code\n` + | |
| `${comment}============================\n\n${comment}Description: ${description}\n\n` + | |
| `${comment}Configure the language to see specific code generation`; | |
| } | |
| } | |
| }); |