AI Code Generator

AI Code Generator

Describe what you want to build and get code instantly

Generated Code

// Your generated code will appear here

Generating code...

:root { --primary-color: #4a6bff; --secondary-color: #f5f7ff; --text-color: #333; --light-text: #666; --border-color: #ddd; --success-color: #28a745; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f9f9f9; color: var(--text-color); line-height: 1.6; } .container { max-width: 1000px; margin: 0 auto; padding: 2rem; } header { text-align: center; margin-bottom: 2rem; } header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--primary-color); } header p { color: var(--light-text); font-size: 1.1rem; } .main-content { display: flex; flex-direction: column; gap: 2rem; } .input-section, .output-section { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 1.5rem; } .input-section textarea { width: 100%; min-height: 150px; padding: 1rem; border: 1px solid var(--border-color); border-radius: 6px; resize: vertical; font-size: 1rem; margin-bottom: 1rem; } .controls { display: flex; gap: 1rem; } #languageSelect { flex: 1; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: 1rem; } #generateBtn { flex: 0 0 150px; background-color: var(--primary-color); color: white; border: none; border-radius: 6px; padding: 0.75rem; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; } #generateBtn:hover { background-color: #3a5bef; } .code-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .code-header span { font-weight: bold; color: var(--primary-color); } #copyBtn { background-color: var(--secondary-color); color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 4px; padding: 0.5rem 1rem; cursor: pointer; transition: all 0.2s; } #copyBtn:hover { background-color: var(--primary-color); color: white; } #codeOutput { background-color: #f8f8f8; border: 1px solid var(--border-color); border-radius: 6px; padding: 1rem; overflow-x: auto; min-height: 200px; white-space: pre-wrap; } .loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; display: none; } .spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 1rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .container { padding: 1rem; } .controls { flex-direction: column; } #generateBtn { flex: 1; } } // Sample code examples database const codeExamples = { javascript: { "reverse a string": `function reverseString(str) { return str.split('').reverse().join(''); }`, "fibonacci sequence": `function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); }`, "factorial": `function factorial(n) { if (n === 0 || n === 1) return 1; return n * factorial(n - 1); }` }, python: { "reverse a string": `def reverse_string(s): return s[::-1]`, "fibonacci sequence": `def fibonacci(n): if n <= 1: return n return fibonacci(n-1) + fibonacci(n-2)`, "factorial": `def factorial(n): if n == 0 or n == 1: return 1 return n * factorial(n-1)` }, html: { "simple form": ``, "navigation bar": `` }, css: { "center a div": `.center { display: flex; justify-content: center; align-items: center; height: 100vh; }`, "responsive grid": `.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }` } }; // DOM elements const promptInput = document.getElementById('promptInput'); const languageSelect = document.getElementById('languageSelect'); const generateBtn = document.getElementById('generateBtn'); const codeOutput = document.getElementById('codeOutput'); const copyBtn = document.getElementById('copyBtn'); const loadingIndicator = document.getElementById('loadingIndicator'); // Generate code based on prompt function generateCode() { const prompt = promptInput.value.trim().toLowerCase(); const language = languageSelect.value; if (!prompt) { alert('Please enter a description of the code you want to generate'); return; } // Show loading indicator loadingIndicator.style.display = 'flex'; // Simulate AI processing delay setTimeout(() => { let generatedCode = ''; // Check if we have a matching example let foundMatch = false; for (const [key, value] of Object.entries(codeExamples[language])) { if (prompt.includes(key)) { generatedCode = value; foundMatch = true; break; } } // If no exact match, generate something based on the language if (!foundMatch) { generatedCode = generateFallbackCode(prompt, language); } // Display the generated code codeOutput.innerHTML = generatedCode; // Hide loading indicator loadingIndicator.style.display = 'none'; // Highlight syntax highlightSyntax(); }, 1500); } // Generate fallback code when no exact match is found function generateFallbackCode(prompt, language) { switch(language) { case 'javascript': return `// ${prompt} function ${camelCase(prompt.replace(/[^a-zA-Z ]/g, ''))}() { // Your code here return "Implementation for: ${prompt}"; }`; case 'python': return `# ${prompt} def ${snakeCase(prompt.replace(/[^a-zA-Z ]/g, ''))}(): # Your code here return "Implementation for: ${prompt}"`; case 'html': return `

`; case 'css': return `/* ${prompt} */ .${kebabCase(prompt.replace(/[^a-zA-Z ]/g, ''))} { /* Your CSS here */ }`; default: return `// Implementation for: ${prompt}`; } } // Helper functions for string conversion function camelCase(str) { return str.split(' ') .map((word, index) => index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() ) .join(''); } function snakeCase(str) { return str.split(' ').join('_').toLowerCase(); } function kebabCase(str) { return str.split(' ').join('-').toLowerCase(); } // Simple syntax highlighting function highlightSyntax() { const code = codeOutput.textContent; const language = languageSelect.value; // Very basic highlighting for demo purposes let highlightedCode = code; if (language === 'javascript' || language === 'java') { highlightedCode = highlightedCode .replace(/(\/\/.*)/g, '$1') .replace(/\b(function|return|if|else|for|while|const|let|var)\b/g, '$1'); } else if (language === 'python') { highlightedCode = highlightedCode .replace(/(#.*)/g, '$1') .replace(/\b(def|return|if|else|for|while|import|from)\b/g, '$1'); } else if (language === 'html') { highlightedCode = highlightedCode .replace(//g, '$&') .replace(/<\/?[\w-]+/g, '$&'); } else if (language === 'css') { highlightedCode = highlightedCode .replace(/\/\*.*?\*\//g, '$&') .replace(/\.[\w-]+/g, '$&') .replace(/[\w-]+(?=:)/g, '$&'); } codeOutput.innerHTML = highlightedCode; } // Copy code to clipboard function copyToClipboard() { const code = codeOutput.textContent; navigator.clipboard.writeText(code) .then(() => { copyBtn.textContent = 'Copied!'; setTimeout(() => { copyBtn.textContent = 'Copy'; }, 2000); }) .catch(err => { console.error('Failed to copy: ', err); }); } // Event listeners generateBtn.addEventListener('click', generateCode); copyBtn.addEventListener('click', copyToClipboard); // Initialize with some example window.addEventListener('DOMContentLoaded', () => { promptInput.value = 'reverse a string'; generateCode(); });