Spaces:
Running
Running
File size: 4,471 Bytes
1fc5a9b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 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`;
}
}
}); |