PHP Practice
HTML
CSS
JavaScript

HTML Editor

Lines: 1

Live Preview

`; const defaultCSS = `/* Welcome to the CSS editor! */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); color: #333; line-height: 1.6; } h1 { color: #6c5ce7; text-align: center; margin-bottom: 20px; text-shadow: 1px 1px 3px rgba(0,0,0,0.1); } p { max-width: 600px; margin: 0 auto 20px; text-align: center; } #demo { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-width: 600px; margin: 0 auto; text-align: center; } /* Dummy content to increase file size */ ${Array(50).fill(`/* This is a sample CSS comment to increase file size for testing purposes. */`).join('\n')}`; const defaultJS = `// Welcome to the JavaScript editor! document.addEventListener('DOMContentLoaded', function() { // Simple demo functionality const demoElement = document.getElementById('demo'); if (demoElement) { demoElement.addEventListener('click', function() { this.style.backgroundColor = this.style.backgroundColor === 'lightblue' ? 'white' : 'lightblue'; this.textContent = this.textContent.includes('Clicked!') ? 'Try adding some styles or interactivity!' : 'Clicked! Now try modifying the JavaScript!'; }); demoElement.addEventListener('mouseover', function() { this.style.transform = 'scale(1.02)'; this.style.transition = 'transform 0.3s ease'; }); demoElement.addEventListener('mouseout', function() { this.style.transform = 'scale(1)'; }); } console.log('Playground JavaScript loaded successfully!'); }); // Dummy content to increase file size ${Array(50).fill(`// This is a sample JavaScript comment to increase file size for testing purposes.`).join('\n')}`; // DOM Elements const htmlCode = document.getElementById('html-code'); const cssCode = document.getElementById('css-code'); const jsCode = document.getElementById('js-code'); const previewFrame = document.getElementById('preview-frame'); const runBtn = document.getElementById('run-btn'); const resetBtn = document.getElementById('reset-btn'); const languageSelect = document.getElementById('language-select'); const tabs = document.querySelectorAll('.tab'); const editorPanels = document.querySelectorAll('.editor-panel'); const currentLanguage = document.getElementById('current-language'); const lineCount = document.getElementById('line-count'); // Initialize editors with default code htmlCode.value = defaultHTML; cssCode.value = defaultCSS; jsCode.value = defaultJS; // Update line count function updateLineCount() { const activeEditor = document.querySelector('.editor-panel.active textarea'); const lines = activeEditor.value.split('\n').length; lineCount.textContent = lines; } // Switch between language tabs tabs.forEach(tab => { tab.addEventListener('click', () => { const lang = tab.getAttribute('data-lang'); // Update active tab tabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); // Update active editor panel editorPanels.forEach(panel => panel.classList.remove('active')); document.getElementById(`${lang}-editor`).classList.add('active'); // Update language select languageSelect.value = lang; currentLanguage.textContent = `${lang.toUpperCase()} Editor`; // Update line count updateLineCount(); }); }); // Language select change handler languageSelect.addEventListener('change', () => { const lang = languageSelect.value; // Update active tab tabs.forEach(tab => { tab.classList.remove('active'); if (tab.getAttribute('data-lang') === lang) { tab.classList.add('active'); } }); // Update active editor panel editorPanels.forEach(panel => panel.classList.remove('active')); document.getElementById(`${lang}-editor`).classList.add('active'); currentLanguage.textContent = `${lang.toUpperCase()} Editor`; updateLineCount(); }); // Run button functionality runBtn.addEventListener('click', runCode); function runCode() { const html = htmlCode.value; const css = cssCode.value; const js = jsCode.value; // Create the preview document const previewDoc = ` ${html} `; // Set the iframe content previewFrame.srcdoc = previewDoc; } // Reset button functionality resetBtn.addEventListener('click', () => { const lang = languageSelect.value; if (lang === 'html') { htmlCode.value = defaultHTML; } else if (lang === 'css') { cssCode.value = defaultCSS; } else if (lang === 'js') { jsCode.value = defaultJS; } updateLineCount(); }); // Update line count when typing document.querySelectorAll('textarea').forEach(textarea => { textarea.addEventListener('input', updateLineCount); }); // Auto-run on code change (with debounce) let timeout; document.querySelectorAll('textarea').forEach(textarea => { textarea.addEventListener('input', () => { clearTimeout(timeout); timeout = setTimeout(runCode, 1000); }); }); // Initialize updateLineCount(); runCode();