Code Playground

Ctrl+Enter to run

Select Language

Editor

Output Console

Click "Run Code" to see output here...

\n`, additionalExamples: [ { title: 'Flexbox Layout', code: `\n\n\n \n\n\n

\n\n` }, { title: 'Responsive Card', code: `\n\n\n \n\n\n

Card Title

This is a responsive card component.

\n\n` } ] }, python: { name: 'Python', example: `# Python Example\nprint("Hello, World!")\n\n# List comprehension\nnumbers = [x**2 for x in range(1, 6)]\nprint("Squares:", numbers)\n\n# Function\ndef greet(name):\n return f"Hello, {name}!"\n\nprint(greet("Developer"))\n\n# Dictionary\nperson = {"name": "John", "age": 30}\nprint(f"{person['name']} is {person['age']} years old")`, additionalExamples: [] }, java: { name: 'Java', example: `// Java Example\npublic class Main {\n public static void main(String[] args) {\n System.out.println("Hello, World!");\n \n // Array\n int[] numbers = {1, 2, 3, 4, 5};\n int sum = 0;\n for (int num : numbers) {\n sum += num;\n }\n System.out.println("Sum: " + sum);\n \n // Method call\n String greeting = greet("Developer");\n System.out.println(greeting);\n }\n \n public static String greet(String name) {\n return "Hello, " + name + "!";\n }\n}`, additionalExamples: [] }, cpp: { name: 'C++', example: `// C++ Example\n#include \n#include \nusing namespace std;\n\nint main() {\n cout << "Hello, World!" << endl;\n \n // Vector\n vector numbers = {1, 2, 3, 4, 5};\n int sum = 0;\n for (int num : numbers) {\n sum += num;\n }\n cout << "Sum: " << sum << endl;\n \n // String\n string name = "Developer";\n cout << "Hello, " << name << "!" << endl;\n \n return 0;\n}`, additionalExamples: [] }, php: { name: 'PHP', example: ` "John", "age" => 30];\necho "{$person['name']} is {$person['age']} years old\\n";\n?>`, additionalExamples: [] }, ruby: { name: 'Ruby', example: `# Ruby Example\nputs "Hello, World!"\n\n# Array\nnumbers = [1, 2, 3, 4, 5]\nsum = numbers.sum\nputs "Sum: #{sum}"\n\n# Method\ndef greet(name)\n "Hello, #{name}!"\nend\n\nputs greet("Developer")\n\n# Hash\nperson = { name: "John", age: 30 }\nputs "#{person[:name]} is #{person[:age]} years old"`, additionalExamples: [] }, go: { name: 'Go', example: `// Go Example\npackage main\n\nimport "fmt"\n\nfunc main() {\n fmt.Println("Hello, World!")\n \n // Slice\n numbers := []int{1, 2, 3, 4, 5}\n sum := 0\n for _, num := range numbers {\n sum += num\n }\n fmt.Printf("Sum: %d\\n", sum)\n \n // Function call\n greeting := greet("Developer")\n fmt.Println(greeting)\n}\n\nfunc greet(name string) string {\n return fmt.Sprintf("Hello, %s!", name)\n}`, additionalExamples: [] } }; // DOM elements const languageSelect = document.getElementById('language-select'); const codeEditor = document.getElementById('code-editor'); const runBtn = document.getElementById('run-btn'); const runBtnText = document.getElementById('run-btn-text'); const copyBtn = document.getElementById('copy-btn'); const clearBtn = document.getElementById('clear-btn'); const clearOutputBtn = document.getElementById('clear-output-btn'); const outputConsole = document.getElementById('output-console'); const examplesContainer = document.getElementById('examples-container'); const fontSizeSelect = document.getElementById('font-size'); const toast = document.getElementById('toast'); const toastMessage = document.getElementById('toast-message'); let currentLanguage = 'js'; // Initialize function init() { loadLanguage('js'); updateExamples(); } // Load language example function loadLanguage(langId) { currentLanguage = langId; const lang = languages[langId]; codeEditor.value = lang.example; updateExamples(); } // Update examples sidebar function updateExamples() { const lang = languages[currentLanguage]; examplesContainer.innerHTML = ''; // Main example const mainExample = document.createElement('button'); mainExample.className = 'w-full text-left bg-gray-700 hover:bg-gray-600 p-3 rounded-lg transition-colors duration-200 text-sm'; mainExample.innerHTML = `

Basic Example

${lang.name}

`; mainExample.onclick = () => { codeEditor.value = lang.example; showToast('Example loaded!'); }; examplesContainer.appendChild(mainExample); // Additional examples if (lang.additionalExamples && lang.additionalExamples.length > 0) { lang.additionalExamples.forEach(example => { const btn = document.createElement('button'); btn.className = 'w-full text-left bg-gray-700 hover:bg-gray-600 p-3 rounded-lg transition-colors duration-200 text-sm'; btn.innerHTML = `

${example.title}

${lang.name}

`; btn.onclick = () => { codeEditor.value = example.code; showToast('Example loaded!'); }; examplesContainer.appendChild(btn); }); } } // Run code async function runCode() { const code = codeEditor.value.trim(); if (!code) { addOutput('error', 'Error: No code to execute'); return; } // Show loading state runBtn.disabled = true; runBtnText.innerHTML = '

Running...'; clearOutput(); await new Promise(resolve => setTimeout(resolve, 500)); if (currentLanguage === 'js') { executeJavaScript(code); } else if (currentLanguage === 'html') { executeHTML(code); } else { simulateExecution(code); } runBtn.disabled = false; runBtnText.innerHTML = ' Run Code'; } // Execute JavaScript function executeJavaScript(code) { const originalLog = console.log; const originalError = console.error; const originalWarn = console.warn; const logs = []; console.log = (...args) => { logs.push({ type: 'log', args }); originalLog.apply(console, args); }; console.error = (...args) => { logs.push({ type: 'error', args }); originalError.apply(console, args); }; console.warn = (...args) => { logs.push({ type: 'warn', args }); originalWarn.apply(console, args); }; try { const result = eval(code); if (logs.length === 0 && result !== undefined) { addOutput('log', result); } else { logs.forEach(log => { const message = log.args.map(arg => { if (typeof arg === 'object') { try { return JSON.stringify(arg, null, 2); } catch (e) { return String(arg); } } return String(arg); }).join(' '); addOutput(log.type, message); }); } if (logs.length === 0 && result === undefined) { addOutput('success', '✓ Code executed successfully (no output)'); } } catch (error) { addOutput('error', `Error: ${error.message}`); } finally { console.log = originalLog; console.error = originalError; console.warn = originalWarn; } } // Execute HTML/CSS function executeHTML(code) { const iframe = document.createElement('iframe'); iframe.className = 'w-full h-96 bg-white rounded-lg'; iframe.sandbox = 'allow-scripts'; outputConsole.innerHTML = ''; addOutput('success', '✓ HTML rendered below:'); outputConsole.appendChild(iframe); const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; iframeDoc.open(); iframeDoc.write(code); iframeDoc.close(); } // Simulate execution for other languages function simulateExecution(code) { const lang = languages[currentLanguage]; addOutput('info', `Simulating ${lang.name} execution...`); addOutput('log', '────────────────────────────────'); // Simulate output based on language if (currentLanguage === 'python') { const lines = code.split('\n').filter(line => line.trim().startsWith('print(')); if (lines.length > 0) { addOutput('log', 'Hello, World!'); addOutput('log', 'Squares: [1, 4, 9, 16, 25]'); addOutput('log', 'Hello, Developer!'); addOutput('log', 'John is 30 years old'); } else { addOutput('log', 'Program output would appear here'); } } else if (currentLanguage === 'java') { addOutput('log', 'Hello, World!'); addOutput('log', 'Sum: 15'); addOutput('log', 'Hello, Developer!'); } else if (currentLanguage === 'cpp') { addOutput('log', 'Hello, World!'); addOutput('log', 'Sum: 15'); addOutput('log', 'Hello, Developer!'); } else if (currentLanguage === 'php') { addOutput('log', 'Hello, World!'); addOutput('log', 'Sum: 15'); addOutput('log', 'Hello, Developer!'); addOutput('log', 'John is 30 years old'); } else if (currentLanguage === 'ruby') { addOutput('log', 'Hello, World!'); addOutput('log', 'Sum: 15'); addOutput('log', 'Hello, Developer!'); addOutput('log', 'John is 30 years old'); } else if (currentLanguage === 'go') { addOutput('log', 'Hello, World!'); addOutput('log', 'Sum: 15'); addOutput('log', 'Hello, Developer!'); } addOutput('log', '────────────────────────────────'); addOutput('success', '✓ Execution completed'); addOutput('info', `Note: ${lang.name} code runs on server. This is simulated output.`); } // Add output to console function addOutput(type, message) { if (outputConsole.innerHTML.includes('Click "Run Code"')) { outputConsole.innerHTML = ''; } const outputLine = document.createElement('div'); outputLine.className = 'mb-2 flex items-start gap-2'; let icon = ''; let colorClass = 'text-gray-100'; switch(type) { case 'error': colorClass = 'text-red-400'; icon = ''; break; case 'warn': colorClass = 'text-yellow-400'; icon = ''; break; case 'success': colorClass = 'text-green-400'; icon = ''; break; case 'info': colorClass = 'text-blue-400'; icon = ''; break; default: colorClass = 'text-gray-100'; icon = ''; } outputLine.innerHTML = `${icon}${escapeHtml(String(message))}`; outputConsole.appendChild(outputLine); outputConsole.scrollTop = outputConsole.scrollHeight; } // Clear output function clearOutput() { outputConsole.innerHTML = '

Click "Run Code" to see output here...

'; } // Copy code function copyCode() { const code = codeEditor.value; navigator.clipboard.writeText(code).then(() => { showToast('Code copied to clipboard!'); }).catch(err => { showToast('Failed to copy code', 'error'); }); } // Clear editor function clearEditor() { codeEditor.value = ''; showToast('Editor cleared'); } // Show toast notification function showToast(message, type = 'success') { toastMessage.textContent = message; toast.classList.remove('hidden'); setTimeout(() => { toast.classList.add('hidden'); }, 3000); } // Escape HTML function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // Event listeners languageSelect.addEventListener('change', (e) => { loadLanguage(e.target.value); }); runBtn.addEventListener('click', runCode); copyBtn.addEventListener('click', copyCode); clearBtn.addEventListener('click', clearEditor); clearOutputBtn.addEventListener('click', clearOutput); fontSizeSelect.addEventListener('change', (e) => { codeEditor.style.fontSize = e.target.value + 'px'; }); // Keyboard shortcuts codeEditor.addEventListener('keydown', (e) => { // Ctrl+Enter to run if (e.ctrlKey && e.key === 'Enter') { e.preventDefault(); runCode(); } // Tab support if (e.key === 'Tab') { e.preventDefault(); const start = codeEditor.selectionStart; const end = codeEditor.selectionEnd; const value = codeEditor.value; codeEditor.value = value.substring(0, start) + ' ' + value.substring(end); codeEditor.selectionStart = codeEditor.selectionEnd = start + 4; } }); // Initialize app init();