>_ AI Code Generator

Generate common code snippets and boilerplate from a description. Choose from dozens of pre-built templates.

\n\n
\n

'+p[0]+'

\n
\n
\n

Content goes here.

\n
\n \n\n';}}, {name:'Responsive Nav',params:['Brand Name'],fn:function(p){return '';}}, {name:'Contact Form',params:['Action URL'],fn:function(p){return '
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n \n
\n \n
';}} ], css:[ {name:'Flexbox Layout',params:['Container Class'],fn:function(p){return '.'+p[0]+' {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n align-items: stretch;\n padding: 2rem;\n}\n\n.'+p[0]+' > * {\n flex: 1 1 300px;\n padding: 1.5rem;\n border-radius: 8px;\n background: #f5f5f5;\n}';}}, {name:'CSS Grid Layout',params:['Container Class','Columns'],fn:function(p){return '.'+p[0]+' {\n display: grid;\n grid-template-columns: repeat('+p[1]+', 1fr);\n gap: 1.5rem;\n padding: 2rem;\n}\n\n@media (max-width: 768px) {\n .'+p[0]+' {\n grid-template-columns: 1fr;\n }\n}';}}, {name:'Dark Theme Variables',params:[],fn:function(){return ':root {\n --bg-primary: #0a0a0a;\n --bg-secondary: #1a1a2e;\n --text-primary: #e0e0e0;\n --text-secondary: #a0a0a0;\n --accent: #00ff41;\n --border: #333;\n --shadow: rgba(0, 0, 0, 0.3);\n}\n\nbody {\n background: var(--bg-primary);\n color: var(--text-primary);\n font-family: system-ui, sans-serif;\n}\n\na { color: var(--accent); }\na:hover { opacity: 0.8; }';}} ], sql:[ {name:'CRUD Operations',params:['Table Name'],fn:function(p){return '-- Create table\nCREATE TABLE '+p[0]+' (\n id INT PRIMARY KEY AUTO_INCREMENT,\n name VARCHAR(255) NOT NULL,\n email VARCHAR(255) UNIQUE,\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n\n-- Insert\nINSERT INTO '+p[0]+' (name, email) VALUES (\'John Doe\', \'john@example.com\');\n\n-- Read\nSELECT * FROM '+p[0]+' WHERE id = 1;\n\n-- Update\nUPDATE '+p[0]+' SET name = \'Jane Doe\' WHERE id = 1;\n\n-- Delete\nDELETE FROM '+p[0]+' WHERE id = 1;';}}, {name:'JOIN Query',params:['Table 1','Table 2'],fn:function(p){return '-- Inner Join\nSELECT a.*, b.*\nFROM '+p[0]+' a\nINNER JOIN '+p[1]+' b ON a.id = b.'+p[0]+'_id;\n\n-- Left Join\nSELECT a.*, b.*\nFROM '+p[0]+' a\nLEFT JOIN '+p[1]+' b ON a.id = b.'+p[0]+'_id;\n\n-- With aggregation\nSELECT a.name, COUNT(b.id) as total\nFROM '+p[0]+' a\nLEFT JOIN '+p[1]+' b ON a.id = b.'+p[0]+'_id\nGROUP BY a.name\nORDER BY total DESC;';}} ] }; var selLang=document.getElementById('sel-lang'),selTpl=document.getElementById('sel-tpl'),paramsDiv=document.getElementById('params'); function loadTemplates(){ selTpl.innerHTML=''; var tpls=templates[selLang.value]||[]; tpls.forEach(function(t,i){selTpl.appendChild(new Option(t.name,i));}); loadParams(); } function loadParams(){ paramsDiv.innerHTML=''; var tpls=templates[selLang.value]||[]; var tpl=tpls[selTpl.value]; if(!tpl)return; (tpl.params||[]).forEach(function(p,i){ var label=document.createElement('label');label.textContent=p+': ';label.style.display='block';label.style.marginTop='6px'; var inp=document.createElement('input');inp.type='text';inp.id='param-'+i;inp.placeholder=p;inp.style.width='100%'; label.appendChild(inp);paramsDiv.appendChild(label); }); } selLang.addEventListener('change',loadTemplates); selTpl.addEventListener('change',loadParams); loadTemplates(); document.getElementById('btn-go').addEventListener('click',function(){ var tpls=templates[selLang.value]||[]; var tpl=tpls[selTpl.value]; if(!tpl)return; var params=(tpl.params||[]).map(function(p,i){return document.getElementById('param-'+i).value||p;}); var code=tpl.fn(params); document.getElementById('result').textContent=code; document.getElementById('out').style.display='block'; }); document.getElementById('btn-copy').addEventListener('click',function(){ navigator.clipboard.writeText(document.getElementById('result').textContent); this.textContent='Copied!';var b=this;setTimeout(function(){b.textContent='Copy Code';},1500); }); })();