Lines: 0
Chars: 0
Mode: Vue.js
// Click Run to execute your code
Ready
Runtime: --
Output lines: 0
Instant browser run
Runs safely in this page for fast practice.
Keyboard-first
Use Ctrl+Enter to run and Ctrl+/ to comment.
Starter snippets
Load focused examples for arrays, async code, and interviews.
";
const STARTER_TEMPLATES = [{"name":"Default Starter","code":"\r\n
\r\n
{{ message }} \r\n
Count: {{ count }}
\r\n
Doubled: {{ doubled }}
\r\n
+1 \r\n
Reset \r\n
\r\n
\r\n
Hello, {{ name }}!
\r\n
\r\n\r\n"}];
const LANG_EXTENSIONS = {
html: 'html', css: 'css', javascript: 'js', nodejs: 'js',
typescript: 'ts', react: 'jsx', angular: 'ts', vue: 'vue',
git: 'sh', python: 'py', php: 'php', java: 'java',
cpp: 'cpp', c: 'c'
};
const WORKSPACE_KEY = 'tlCompilerWorkspace:' + LANG;
let lineWrapEnabled = false;
let runStartedAt = 0;
let workspaceFiles = [];
let activeFileId = null;
let isSwitchingFile = false;
// -- Fullscreen -----------------------------------------------
function toggleFullscreen() {
const el = document.querySelector('.compiler-page');
const icon = document.getElementById('fsIcon');
const lbl = document.getElementById('fsLabel');
const isFs = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
if (!isFs) {
const req = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen;
if (req) req.call(el);
} else {
const exit = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen;
if (exit) exit.call(document);
}
}
// -- Language Tabs Scrolling ----------------------------------
function scrollLangTabs(direction) {
const container = document.getElementById('langTabs');
const scrollAmount = 200;
if (direction === 'left') {
container.scrollLeft -= scrollAmount;
} else {
container.scrollLeft += scrollAmount;
}
setTimeout(updateLangScrollArrows, 100);
}
function updateLangScrollArrows() {
const container = document.getElementById('langTabs');
const leftArrow = document.getElementById('scrollLeftCompiler');
const rightArrow = document.getElementById('scrollRightCompiler');
if (!container || !leftArrow || !rightArrow) return;
const hasScroll = container.scrollWidth > container.clientWidth;
if (!hasScroll) {
leftArrow.classList.remove('show');
rightArrow.classList.remove('show');
return;
}
leftArrow.classList.add('show');
rightArrow.classList.add('show');
const scrollLeft = container.scrollLeft;
const maxScroll = container.scrollWidth - container.clientWidth;
if (scrollLeft <= 0) {
leftArrow.classList.add('disabled');
} else {
leftArrow.classList.remove('disabled');
}
if (scrollLeft >= maxScroll - 5) {
rightArrow.classList.add('disabled');
} else {
rightArrow.classList.remove('disabled');
}
}
// Initialize scroll arrows on load
window.addEventListener('load', function() {
const activeTab = document.querySelector('.lang-tab.active');
if (activeTab) {
activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
}
updateLangScrollArrows();
});
window.addEventListener('resize', updateLangScrollArrows);
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('langTabs');
if (container) {
container.addEventListener('scroll', updateLangScrollArrows);
}
document.querySelectorAll('#tutSidebarToggle').forEach(function(headerMenuToggle) {
headerMenuToggle.addEventListener('click', function(event) {
if (window.matchMedia('(max-width: 768px)').matches) {
event.preventDefault();
event.stopImmediatePropagation();
const explorer = document.querySelector('.compiler-file-explorer');
if (explorer && explorer.classList.contains('open')) {
closeCompilerExplorer();
} else {
openCompilerExplorer();
}
}
}, true);
});
document.addEventListener('click', function(event) {
if (!event.target.closest('.compiler-tools-dropdown')) {
closeCompilerMenus();
}
});
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeCompilerMenus();
closeCompilerExplorer();
}
});
});
document.addEventListener('fullscreenchange', updateFsBtn);
document.addEventListener('webkitfullscreenchange', updateFsBtn);
document.addEventListener('mozfullscreenchange', updateFsBtn);
function updateFsBtn() {
const isFs = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
const icon = document.getElementById('fsIcon');
if (isFs) {
icon.className = 'fas fa-compress';
} else {
icon.className = 'fas fa-expand';
}
// Refresh CodeMirror layout after resize
setTimeout(function() { if (typeof editor !== 'undefined') editor.refresh(); }, 100);
}
// -- Helper: escape HTML --------------------------------------
function escHtml(s) {
return s.replace(/&/g,'&').replace(//g,'>');
}
// -- Tab switching --------------------------------------------
function switchTab(name) {
document.querySelectorAll('.output-tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.output-pane').forEach(p => p.classList.remove('active'));
const tabEl = document.getElementById('tab-' + name);
const paneEl = document.getElementById('output-' + name);
if (tabEl) tabEl.classList.add('active');
if (paneEl) paneEl.classList.add('active');
}
function openCompilerExplorer() {
const explorer = document.querySelector('.compiler-file-explorer');
if (!explorer) return;
document.body.classList.remove('compiler-explorer-collapsed');
explorer.classList.add('open');
document.body.classList.add('compiler-explorer-open');
syncCompilerExplorerToggle(true);
}
function closeCompilerExplorer() {
const explorer = document.querySelector('.compiler-file-explorer');
if (!explorer) return;
explorer.classList.remove('open');
document.body.classList.remove('compiler-explorer-open');
if (!window.matchMedia('(max-width: 768px)').matches) {
document.body.classList.add('compiler-explorer-collapsed');
}
syncCompilerExplorerToggle(false);
}
function syncCompilerExplorerToggle(isOpen) {
document.querySelectorAll('#tutSidebarToggle, .compiler-explorer-toggle').forEach(function(toggle) {
toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
const icon = toggle.querySelector('i');
if (icon && toggle.id === 'tutSidebarToggle') {
icon.classList.toggle('fa-list-ul', !isOpen);
icon.classList.toggle('fa-times', isOpen);
}
});
}
function initCompilerResizer() {
const resizer = document.getElementById('compilerResizer');
const body = document.querySelector('.compiler-body');
const editorPanel = document.querySelector('.editor-panel');
const outputPanel = document.querySelector('.output-panel');
if (!resizer || !body || !editorPanel || !outputPanel) return;
let dragging = false;
let dragStartX = 0;
let dragStartEditorWidth = 0;
let dragAvailableWidth = 0;
function getResizableWidth() {
const bodyRect = body.getBoundingClientRect();
const explorer = document.querySelector('.compiler-file-explorer');
const explorerWidth = explorer && getComputedStyle(explorer).position !== 'fixed'
? explorer.getBoundingClientRect().width
: 0;
const resizerWidth = resizer.getBoundingClientRect().width || 8;
return bodyRect.width - explorerWidth - resizerWidth;
}
function applyPanelWidths(editorWidth, available) {
if (available < 520) return;
const minPanel = Math.min(360, available * 0.42);
const maxEditor = available - minPanel;
const nextEditorWidth = Math.max(minPanel, Math.min(editorWidth, maxEditor));
const nextOutputWidth = available - nextEditorWidth;
editorPanel.style.flex = '0 0 ' + Math.round(nextEditorWidth) + 'px';
outputPanel.style.flex = '0 0 ' + Math.round(nextOutputWidth) + 'px';
outputPanel.style.width = Math.round(nextOutputWidth) + 'px';
if (typeof editor !== 'undefined') editor.refresh();
}
resizer.addEventListener('pointerdown', function(event) {
if (window.matchMedia('(max-width: 768px)').matches) return;
dragging = true;
dragStartX = event.clientX;
dragStartEditorWidth = editorPanel.getBoundingClientRect().width;
dragAvailableWidth = getResizableWidth();
applyPanelWidths(dragStartEditorWidth, dragAvailableWidth);
document.body.classList.add('compiler-resizing');
resizer.setPointerCapture(event.pointerId);
event.preventDefault();
});
resizer.addEventListener('pointermove', function(event) {
if (!dragging) return;
applyPanelWidths(dragStartEditorWidth + (event.clientX - dragStartX), dragAvailableWidth);
});
function stopDragging(event) {
if (!dragging) return;
dragging = false;
document.body.classList.remove('compiler-resizing');
try {
resizer.releasePointerCapture(event.pointerId);
} catch (error) {}
if (typeof editor !== 'undefined') editor.refresh();
}
resizer.addEventListener('pointerup', stopDragging);
resizer.addEventListener('pointercancel', stopDragging);
window.addEventListener('resize', function() {
if (window.matchMedia('(max-width: 768px)').matches) {
editorPanel.style.flex = '';
outputPanel.style.flex = '';
outputPanel.style.width = '';
} else {
document.body.classList.remove('compiler-explorer-open');
}
});
}
// -- File explorer workspace ----------------------------------
function getDefaultFileName() {
const ext = LANG_EXTENSIONS[LANG] || 'txt';
if (LANG === 'java') return 'Main.java';
if (LANG === 'c') return 'main.c';
if (LANG === 'cpp') return 'main.cpp';
if (LANG === 'python') return 'main.py';
return 'main.' + ext;
}
function normalizeFileName(name) {
const fallback = getDefaultFileName();
const clean = String(name || '').trim().replace(/[\\/:*?"<>|]/g, '-');
if (!clean) return fallback;
if (clean.indexOf('.') !== -1) return clean;
return clean + '.' + (LANG_EXTENSIONS[LANG] || 'txt');
}
function uniqueFileName(name, ignoreId) {
const normalized = normalizeFileName(name);
if (!workspaceFiles.some(file => file.name.toLowerCase() === normalized.toLowerCase() && file.id !== ignoreId)) {
return normalized;
}
const dot = normalized.lastIndexOf('.');
const base = dot > 0 ? normalized.slice(0, dot) : normalized;
const ext = dot > 0 ? normalized.slice(dot) : '';
let index = 2;
let next = base + '-' + index + ext;
while (workspaceFiles.some(file => file.name.toLowerCase() === next.toLowerCase() && file.id !== ignoreId)) {
index++;
next = base + '-' + index + ext;
}
return next;
}
function getFileIcon(name) {
const ext = (name.split('.').pop() || '').toLowerCase();
if (['js', 'ts', 'jsx', 'tsx'].indexOf(ext) !== -1) return 'fab fa-js-square';
if (ext === 'py') return 'fab fa-python';
if (ext === 'java') return 'fab fa-java';
if (ext === 'html') return 'fab fa-html5';
if (ext === 'css') return 'fab fa-css3-alt';
if (ext === 'php') return 'fab fa-php';
return 'fas fa-file-code';
}
function createInitialWorkspace() {
return [{
id: 'file-' + Date.now(),
name: getDefaultFileName(),
code: DEFAULT_CODE
}];
}
function loadWorkspaceFiles() {
try {
const stored = JSON.parse(localStorage.getItem(WORKSPACE_KEY) || 'null');
if (stored && Array.isArray(stored.files) && stored.files.length) {
workspaceFiles = stored.files.filter(file => file && file.id && file.name).map(file => ({
id: file.id,
name: file.name,
code: typeof file.code === 'string' ? file.code : ''
}));
activeFileId = stored.activeFileId && workspaceFiles.some(file => file.id === stored.activeFileId)
? stored.activeFileId
: workspaceFiles[0].id;
return;
}
} catch (error) {
localStorage.removeItem(WORKSPACE_KEY);
}
workspaceFiles = createInitialWorkspace();
activeFileId = workspaceFiles[0].id;
}
function persistWorkspaceFiles() {
localStorage.setItem(WORKSPACE_KEY, JSON.stringify({
activeFileId: activeFileId,
files: workspaceFiles
}));
}
function getActiveWorkspaceFile() {
return workspaceFiles.find(file => file.id === activeFileId) || workspaceFiles[0];
}
function saveActiveFile() {
const file = getActiveWorkspaceFile();
if (!file || typeof editor === 'undefined') return;
file.code = editor.getValue();
persistWorkspaceFiles();
}
function updateActiveFileLabel() {
const label = document.getElementById('activeFileName');
const file = getActiveWorkspaceFile();
if (label && file) label.textContent = file.name;
}
function renderFileExplorer() {
const list = document.getElementById('fileExplorerList');
if (!list) return;
list.innerHTML = '';
workspaceFiles.forEach(function(file) {
const row = document.createElement('div');
row.className = 'file-explorer-item' + (file.id === activeFileId ? ' active' : '');
row.onclick = function() { switchWorkspaceFile(file.id); };
const icon = document.createElement('i');
icon.className = getFileIcon(file.name);
row.appendChild(icon);
const name = document.createElement('span');
name.textContent = file.name;
row.appendChild(name);
const actions = document.createElement('div');
actions.className = 'file-explorer-actions';
const rename = document.createElement('button');
rename.type = 'button';
rename.title = 'Rename file';
rename.innerHTML = '
';
rename.onclick = function(event) {
event.stopPropagation();
renameWorkspaceFile(file.id);
};
actions.appendChild(rename);
const remove = document.createElement('button');
remove.type = 'button';
remove.title = 'Delete file';
remove.innerHTML = '
';
remove.onclick = function(event) {
event.stopPropagation();
deleteWorkspaceFile(file.id);
};
actions.appendChild(remove);
row.appendChild(actions);
list.appendChild(row);
});
updateActiveFileLabel();
}
function switchWorkspaceFile(id) {
if (id === activeFileId) return;
saveActiveFile();
const file = workspaceFiles.find(item => item.id === id);
if (!file) return;
activeFileId = id;
isSwitchingFile = true;
editor.setValue(file.code || '');
isSwitchingFile = false;
editor.focus();
updateEditorMetrics();
persistWorkspaceFiles();
renderFileExplorer();
closeCompilerExplorer();
}
function createWorkspaceFile() {
saveActiveFile();
const requestedName = prompt('File name', getDefaultFileName());
if (requestedName === null) return;
const name = uniqueFileName(requestedName);
if (!name) return;
const file = {
id: 'file-' + Date.now() + '-' + Math.random().toString(16).slice(2),
name: name,
code: ''
};
workspaceFiles.push(file);
activeFileId = file.id;
isSwitchingFile = true;
editor.setValue('');
isSwitchingFile = false;
updateEditorMetrics();
persistWorkspaceFiles();
renderFileExplorer();
editor.focus();
showCompilerToast(name + ' created.', 'success');
closeCompilerExplorer();
}
function renameWorkspaceFile(id) {
const file = workspaceFiles.find(item => item.id === id);
if (!file) return;
const nextName = prompt('Rename file', file.name);
if (nextName === null) return;
file.name = uniqueFileName(nextName, id);
persistWorkspaceFiles();
renderFileExplorer();
showCompilerToast('File renamed.', 'success');
}
function deleteWorkspaceFile(id) {
if (workspaceFiles.length <= 1) {
showCompilerToast('Keep at least one file in the workspace.', 'info');
return;
}
const file = workspaceFiles.find(item => item.id === id);
if (!file || !confirm('Delete ' + file.name + '?')) return;
workspaceFiles = workspaceFiles.filter(item => item.id !== id);
if (activeFileId === id) {
activeFileId = workspaceFiles[0].id;
isSwitchingFile = true;
editor.setValue(workspaceFiles[0].code || '');
isSwitchingFile = false;
updateEditorMetrics();
}
persistWorkspaceFiles();
renderFileExplorer();
showCompilerToast(file.name + ' deleted.', 'success');
}
// -- Clear helpers --------------------------------------------
function clearEditor() {
editor.setValue('');
editor.focus();
updateEditorMetrics();
closeCompilerMenus();
}
function clearOutput() {
document.getElementById('output-console').innerHTML =
'
// Output cleared ';
const badge = document.getElementById('statusBadge');
badge.className = 'status-badge';
badge.textContent = '';
const frame = document.getElementById('preview-frame');
if (frame) frame.srcdoc = '';
setCompilerStatus('Ready');
updateOutputMetrics();
closeCompilerMenus();
}
function toggleCompilerMenu(menuId, trigger) {
const menu = document.getElementById(menuId);
if (!menu) return;
const isOpen = menu.classList.contains('open');
closeCompilerMenus();
if (!isOpen) {
menu.classList.add('open');
if (trigger) trigger.setAttribute('aria-expanded', 'true');
}
}
function closeCompilerMenus() {
document.querySelectorAll('.compiler-tools-menu.open').forEach(function(menu) {
menu.classList.remove('open');
});
document.querySelectorAll('.btn-tools-menu[aria-expanded="true"]').forEach(function(btn) {
btn.setAttribute('aria-expanded', 'false');
});
}
function setCompilerStatus(text, type) {
const status = document.getElementById('metricStatus');
if (!status) return;
status.textContent = text || 'Ready';
status.className = type ? 'metric-' + type : '';
}
function updateEditorMetrics() {
if (typeof editor === 'undefined') return;
const code = editor.getValue();
const lineCount = code.length ? code.split('\n').length : 0;
const lines = document.getElementById('metricLines');
const chars = document.getElementById('metricChars');
if (lines) lines.textContent = 'Lines: ' + lineCount;
if (chars) chars.textContent = 'Chars: ' + code.length;
}
function updateOutputMetrics(runtimeMs) {
const output = document.getElementById('output-console');
const runtime = document.getElementById('metricRuntime');
const outputLines = document.getElementById('metricOutputLines');
const text = output ? output.innerText.trim() : '';
const count = text ? text.split(/\n+/).length : 0;
if (runtime) runtime.textContent = 'Runtime: ' + (typeof runtimeMs === 'number' ? Math.max(0, Math.round(runtimeMs)) + 'ms' : '--');
if (outputLines) outputLines.textContent = 'Output lines: ' + count;
}
function showCompilerToast(message, type) {
const toast = document.createElement('div');
toast.className = 'compiler-toast ' + (type || 'info');
toast.textContent = message;
document.body.appendChild(toast);
requestAnimationFrame(function() { toast.classList.add('show'); });
setTimeout(function() {
toast.classList.remove('show');
setTimeout(function() { toast.remove(); }, 220);
}, 1800);
}
function copyTextToClipboard(text, successMessage) {
if (!text) {
showCompilerToast('Nothing to copy yet.', 'info');
return;
}
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text).then(function() {
showCompilerToast(successMessage, 'success');
}).catch(function() {
fallbackCopyText(text, successMessage);
});
return;
}
fallbackCopyText(text, successMessage);
}
function fallbackCopyText(text, successMessage) {
const area = document.createElement('textarea');
area.value = text;
area.setAttribute('readonly', '');
area.style.position = 'fixed';
area.style.left = '-9999px';
document.body.appendChild(area);
area.select();
document.execCommand('copy');
area.remove();
showCompilerToast(successMessage, 'success');
}
function copyEditorCode() {
copyTextToClipboard(editor.getValue(), 'Code copied.');
closeCompilerMenus();
}
function copyOutput() {
const output = document.getElementById('output-console');
copyTextToClipboard(output ? output.innerText.trim() : '', 'Output copied.');
closeCompilerMenus();
}
function downloadText(filename, text) {
const blob = new Blob([text || ''], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
link.remove();
URL.revokeObjectURL(url);
}
function downloadOutput() {
const output = document.getElementById('output-console');
const text = output ? output.innerText.trim() : '';
if (!text) {
showCompilerToast('Run code before downloading output.', 'info');
return;
}
downloadText(LANG + '-output.txt', text);
showCompilerToast('Output downloaded.', 'success');
closeCompilerMenus();
}
function resetEditor() {
editor.setValue(DEFAULT_CODE);
editor.focus();
const select = document.getElementById('starterSelect');
if (select) select.value = '';
updateEditorMetrics();
showCompilerToast('Starter code restored.', 'success');
closeCompilerMenus();
}
function loadStarterTemplate(index) {
if (index === '' || !STARTER_TEMPLATES[index]) return;
editor.setValue(STARTER_TEMPLATES[index].code);
editor.focus();
updateEditorMetrics();
showCompilerToast(STARTER_TEMPLATES[index].name + ' loaded.', 'success');
closeCompilerMenus();
}
function formatEditorCode() {
editor.operation(function() {
for (let i = 0; i < editor.lineCount(); i++) {
editor.indentLine(i, 'smart');
}
});
editor.focus();
showCompilerToast('Indentation formatted.', 'success');
closeCompilerMenus();
}
function toggleLineWrap() {
lineWrapEnabled = !lineWrapEnabled;
editor.setOption('lineWrapping', lineWrapEnabled);
editor.refresh();
showCompilerToast(lineWrapEnabled ? 'Line wrap enabled.' : 'Line wrap disabled.', 'info');
closeCompilerMenus();
}
// -- Append to console ----------------------------------------
function appendConsole(text, cls) {
const el = document.getElementById('output-console');
const line = document.createElement('span');
line.className = cls;
line.textContent = text;
el.appendChild(line);
el.scrollTop = el.scrollHeight;
}
function escapeForInlineScript(value) {
return JSON.stringify(value).replace(/<\//g, '<\\/');
}
if (!window.__tlAngularPreviewListener) {
window.addEventListener('message', function(event) {
const payload = event.data;
if (!payload || payload.source !== 'tl-angular-preview') return;
const consoleEl = document.getElementById('output-console');
const badge = document.getElementById('statusBadge');
if (!consoleEl || !badge) return;
if (payload.type === 'ready') {
consoleEl.innerHTML = '
// Angular preview rendered in Preview tab. ';
badge.className = 'status-badge ok';
badge.textContent = 'OK';
switchTab('preview');
return;
}
if (payload.type === 'error') {
consoleEl.innerHTML = '';
appendConsole('// Angular preview error: ' + payload.message, 'err-line');
badge.className = 'status-badge err';
badge.textContent = 'Error';
switchTab('console');
}
});
window.__tlAngularPreviewListener = true;
}
// -- Client-side rendering ------------------------------------
function renderClientSide(code) {
const consoleEl = document.getElementById('output-console');
const frame = document.getElementById('preview-frame');
if (LANG === 'javascript' || LANG === 'typescript') {
consoleEl.innerHTML = '';
switchTab('console');
const logs = [];
const badge = document.getElementById('statusBadge');
const fakeConsole = {
log: (...a) => logs.push({ type: 'out', text: a.map(stringify).join(' ') }),
error: (...a) => logs.push({ type: 'err', text: a.map(stringify).join(' ') }),
warn: (...a) => logs.push({ type: 'warn', text: a.map(stringify).join(' ') }),
info: (...a) => logs.push({ type: 'out', text: a.map(stringify).join(' ') }),
};
function stringify(v) {
if (v === null) return 'null';
if (v === undefined) return 'undefined';
if (typeof v === 'object') {
try { return JSON.stringify(v, null, 2); } catch(e) { return String(v); }
}
return String(v);
}
let execCode = code;
if (LANG === 'typescript') {
execCode = code
.replace(/:\s*\w+(\[\])?(\s*[,)=;])/g, '$2')
.replace(/:\s*\w+(\[\])?\s*\{/g, ' {')
.replace(/<[A-Z]\w*>/g, '')
.replace(/interface\s+\w+\s*\{[^}]*\}/gs, '')
.replace(/^export\s+/gm, '');
}
let flushed = false;
let promiseFailed = false;
function flushClientLogs(isError) {
if (flushed) return;
flushed = true;
consoleEl.innerHTML = '';
if (logs.length === 0) {
appendConsole('// Program ran with no output.', 'info-line');
} else {
logs.forEach(function(l) {
const cls = l.type === 'err' ? 'err-line' : l.type === 'warn' ? 'meta-line' : 'out-line';
appendConsole(l.text + '\n', cls);
});
}
badge.className = 'status-badge ' + (isError ? 'err' : 'ok');
badge.textContent = isError ? 'Error' : 'OK';
setCompilerStatus(isError ? 'Error' : 'Completed', isError ? 'error' : 'success');
updateOutputMetrics(performance.now() - runStartedAt);
}
try {
const fn = new Function('console', execCode);
const result = fn(fakeConsole);
if (result && typeof result.then === 'function') {
result.catch(function(error) {
promiseFailed = true;
logs.push({ type: 'err', text: error && error.message ? error.message : String(error) });
}).finally(function() {
setTimeout(function() { flushClientLogs(promiseFailed); }, 0);
});
} else {
setTimeout(function() { flushClientLogs(false); }, 180);
}
} catch (e) {
logs.push({ type: 'err', text: e.toString() });
flushClientLogs(true);
}
return;
}
if (LANG === 'html') {
if (frame) frame.srcdoc = code;
consoleEl.innerHTML = '
// HTML rendered in Preview tab. ';
switchTab('preview');
return;
}
if (LANG === 'css') {
const html = '
CSS Preview
';
if (frame) frame.srcdoc = html;
consoleEl.innerHTML = '
// CSS rendered in Preview tab. ';
switchTab('preview');
return;
}
if (LANG === 'react') {
const html = '\n\n'
+ '
Ready to Level Up Your Skills?
Explore 500+ free tutorials across 20+ languages and frameworks.
