HTML CSS JS Merger

Combine separate HTML, CSS, and JavaScript files into a single HTML document

Characters: 0
Size: 0 B
Characters: 0
Size: 0 B
Characters: 0
Size: 0 B
✅ Merged Successfully!
Total Size: 0 B
`; } mergedContent += ` `; // Display preview (first 1000 characters) const preview = mergedContent.length > 1000 ? mergedContent.substring(0, 1000) + '\n\n... (truncated for preview)' : mergedContent; document.getElementById('output-preview').textContent = preview; // Calculate and display merged file size const mergedSize = new Blob([mergedContent]).size; document.getElementById('merged-size').textContent = formatBytes(mergedSize); // Show output section and download button document.getElementById('output-section').classList.add('show'); document.getElementById('download-btn').classList.add('show'); // Scroll to output section document.getElementById('output-section').scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } // ===== Download Merged File Function ===== function downloadMerged() { if (!mergedContent) { alert('Please merge files first before downloading.'); return; } // Create blob and download link const blob = new Blob([mergedContent], { type: 'text/html' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'merged.html'; // Trigger download document.body.appendChild(link); link.click(); document.body.removeChild(link); // Clean up the URL object URL.revokeObjectURL(url); } // ===== Clear All Function ===== function clearAll() { if (!confirm('Are you sure you want to clear all inputs? This cannot be undone.')) { return; } // Clear all textareas document.getElementById('html-input').value = ''; document.getElementById('css-input').value = ''; document.getElementById('js-input').value = ''; // Clear all file inputs document.getElementById('html-file-input').value = ''; document.getElementById('css-file-input').value = ''; document.getElementById('js-file-input').value = ''; // Clear file name displays document.getElementById('html-file-name').textContent = ''; document.getElementById('css-file-name').textContent = ''; document.getElementById('js-file-name').textContent = ''; // Update all stats to zero updateStats('html'); updateStats('css'); updateStats('js'); // Hide output section and download button document.getElementById('output-section').classList.remove('show'); document.getElementById('download-btn').classList.remove('show'); // Clear merged content mergedContent = ''; // Switch to first tab switchTab('html'); } // ===== Initialize stats on page load ===== window.addEventListener('DOMContentLoaded', function() { updateStats('html'); updateStats('css'); updateStats('js'); });