🚀
Code Playground
Write HTML & CSS in real time and see your creations come to life instantly. Perfect for learning, experimenting, and building!
⚡ Live PreviewSee changes instantly
📚 SnippetsReady-to-use examples
🎯 ChallengesPractice with tasks
📋 ConsoleDebug your code
Unique Playground
Console
';
const d = document.createElement('div');
d.className = 'console-line ' + type;
d.textContent = msg;
consoleEl.appendChild(d);
consoleEl.scrollTop = consoleEl.scrollHeight;
logCount++;
}/* ── SNIPPETS ─────────────────────────────────────── */
function loadSnippet(name) {
const s = snippets[name];
if (!s) return;
htmlEditor.value = s.html;
cssEditor.value = s.css;
updateGutter('editor-html', 'gutter-html');
updateGutter('editor-css', 'gutter-css');
doRun();
showToast('Snippet loaded: ' + name);
logConsole('→ Snippet "' + name + '" loaded', 'ok');
}/* ── CLEAR ─────────────────────────────────────── */
function clearAll() {
htmlEditor.value = '';
cssEditor.value = '';
updateGutter('editor-html', 'gutter-html');
updateGutter('editor-css', 'gutter-css');
doRun();
showToast('Editors cleared');
}/* ── COPY CODE ─────────────────────────────────── */
function copyCode() {
const combined = `\n${htmlEditor.value}\n\n/* CSS */\n${cssEditor.value}`;
navigator.clipboard.writeText(combined).then(() => showToast('Code copied to clipboard!'));
}/* ── MODE ─────────────────────────────────────── */
function setMode(mode) {
// Update desktop header buttons
['html-css','html-only','css-only'].forEach(m => {
const btn = document.getElementById('mode-'+m);
if (btn) btn.classList.toggle('active', m===mode);
// Also update mobile sidebar buttons
const mobBtn = document.getElementById('mob-mode-'+m);
if (mobBtn) mobBtn.classList.toggle('active', m===mode);
});
if (mode === 'html-only') { switchTab('html'); document.getElementById('tab-css').style.display='none'; }
else if (mode === 'css-only') { switchTab('css'); document.getElementById('tab-html').style.display='none'; }
else { document.getElementById('tab-html').style.display=''; document.getElementById('tab-css').style.display=''; }
showToast('Mode: ' + mode.replace('-',' '));
}/* ── TOAST ─────────────────────────────────────── */
function showToast(msg) {
const t = document.getElementById('toast');
t.textContent = msg;
t.classList.add('show');
setTimeout(() => t.classList.remove('show'), 2200);
}/* ── WELCOME ─────────────────────────────────────── */
function closeWelcome() {
document.getElementById('welcome').style.animation = 'fadeIn 0.2s ease reverse';
setTimeout(() => document.getElementById('welcome').remove(), 200);
}/* ── DESKTOP RESIZE ─────────────────────────────── */
const handle = document.getElementById('resizeHandle');
const editorPanel = document.getElementById('editorPanel');
const previewPanelDesktop = document.getElementById('previewPanelDesktop');
let isResizing = false;handle.addEventListener('mousedown', e => {
if (!isDesktop) return;
isResizing = true;
handle.classList.add('dragging');
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
});document.addEventListener('mousemove', e => {
if (!isResizing) return;
const workspace = document.querySelector('.workspace');
const rect = workspace.getBoundingClientRect();
const sidebar = 220;
const x = e.clientX - rect.left - sidebar;
const total = rect.width - sidebar - 4;
const pct = Math.min(Math.max(x / total * 100, 25), 75);
editorPanel.style.flex = 'none';
editorPanel.style.width = pct + '%';
previewPanelDesktop.style.flex = 'none';
previewPanelDesktop.style.width = (100 - pct) + '%';
});document.addEventListener('mouseup', () => {
if (!isResizing) return;
isResizing = false;
handle.classList.remove('dragging');
document.body.style.cursor = '';
document.body.style.userSelect = '';
});/* ── INIT ─────────────────────────────────────── */
window.addEventListener('resize', checkLayout);
checkLayout();
updateGutter('editor-html','gutter-html');
updateGutter('editor-css','gutter-css');
doRun();