Hello World

This is a messy HTML code that needs formatting.

`); // --- Event Listeners --- // Toggle Settings settingsToggle.addEventListener('click', () => { settingsPanel.classList.toggle('active'); }); // Update Stats on Change editor.on('change', () => { updateStats(); }); // Format (Beautify) formatBtn.addEventListener('click', () => { const code = editor.getValue(); if(!code) return; let indentSize = 4; let indentChar = " "; const indentVal = indentSelect.value; if(indentVal === 'tab') { indentSize = 1; indentChar = "\t"; } else { indentSize = parseInt(indentVal); } const wrapLine = parseInt(wrapSelect.value); const formatted = html_beautify(code, { "indent_size": indentSize, "indent_char": indentChar, "max_preserve_newlines": 1, "preserve_newlines": true, "keep_array_indentation": false, "break_chained_methods": false, "indent_scripts": "normal", "brace_style": "collapse", "space_before_conditional": true, "unescape_strings": false, "jslint_happy": false, "end_with_newline": false, "wrap_line_length": wrapLine, "indent_inner_html": false, "comma_first": false, "e4x": false, "indent_empty_lines": false }); editor.setValue(formatted); }); // Minify minifyBtn.addEventListener('click', () => { const code = editor.getValue(); if(!code) return; // Minification Logic let minified = code .replace(/\>[\r\n ]+\<") // Remove spaces between tags .replace(/(<.*?>)|\s+/g, (m, $1) => $1 ? $1 : ' ') // Collapse whitespace outside tags .trim(); editor.setValue(minified); }); // Copy with Fallback copyBtn.addEventListener('click', () => { const code = editor.getValue(); if (!code) return; const fallbackCopy = (text) => { const textArea = document.createElement("textarea"); textArea.value = text; // Avoid scrolling to bottom textArea.style.top = "0"; textArea.style.left = "0"; textArea.style.position = "fixed"; textArea.style.opacity = "0"; // Make it invisible document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) showToast(); } catch (err) { console.error('Fallback copy failed', err); } document.body.removeChild(textArea); }; if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(code).then(() => { showToast(); }).catch(err => { console.warn('Clipboard API failed, using fallback', err); fallbackCopy(code); }); } else { fallbackCopy(code); } }); // Clear clearBtn.addEventListener('click', () => { editor.setValue(''); }); // Download downloadBtn.addEventListener('click', () => { const code = editor.getValue(); if(!code) return; const blob = new Blob([code], {type: "text/html;charset=utf-8"}); saveAs(blob, "formatted-code.html"); }); // --- Helper Functions --- function updateStats() { const code = editor.getValue(); const lines = editor.lineCount(); const size = new Blob([code]).size; statsLines.textContent = `Lines: ${lines}`; statsSize.textContent = `Size: ${formatBytes(size)}`; } function formatBytes(bytes, decimals = 2) { if (bytes === 0) return '0 B'; const k = 1024; const dm = decimals < 0 ? 0 : decimals; const sizes = ['B', 'KB', 'MB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } function showToast() { toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000); } // Init Stats updateStats(); })();