Code Playground

HTML

CSS

JavaScript

Vorschau

`); doc.close(); } // Event Listener für den Run-Button document.getElementById('run-button').addEventListener('click', updatePreview); // Automatische Vorschau nach Änderungen (mit Debounce) let timeout; function debounceUpdate() { clearTimeout(timeout); timeout = setTimeout(updatePreview, 1000); } htmlEditor.on('change', debounceUpdate); cssEditor.on('change', debounceUpdate); jsEditor.on('change', debounceUpdate); phpEditor.on('change', debounceUpdate); // Beispiel-Code htmlEditor.setValue(`

Willkommen im Code Playground!

Bearbeiten Sie den Code und sehen Sie die Änderungen in Echtzeit.

`); cssEditor.setValue(`.container { max-width: 800px; margin: 0 auto; padding: 20px; } h1 { color: #2563eb; margin-bottom: 1rem; } p { color: #4b5563; line-height: 1.5; }`); jsEditor.setValue(`// Ihr JavaScript-Code hier console.log('Code Playground ist bereit!');`); phpEditor.setValue(` Hallo von PHP!`) // Beispiel-Code document.getElementById('html-editor').value = `

Willkommen im Code Playground!

Bearbeiten Sie den Code und sehen Sie die Änderungen in Echtzeit.

`; document.getElementById('css-editor').value = `.container { max-width: 800px; margin: 0 auto; padding: 20px; } h1 { color: #3B82F6; margin-bottom: 1rem; font-size: 2rem; font-weight: bold; } p { color: #4B5563; line-height: 1.5; font-size: 1.1rem; }`; document.getElementById('js-editor').value = `// Ihr JavaScript-Code hier console.log('Code Playground ist bereit!');`; // Move updatePreview to global scope window.updatePreview = function () { const html = document.getElementById('html-editor').value; const css = document.getElementById('css-editor').value; const js = document.getElementById('js-editor').value; const preview = document.getElementById('preview'); preview.innerHTML = ` ${html}