HTML CSS JS Minifier
Minify your HTML, CSS, and JavaScript code to reduce file size and improve performance
HTML
CSS
JavaScript
Original Code
Upload
0 characters
0
Characters
0
Lines
Minified Code
Download
0 characters
0
Characters
0% smaller
0
Lines
0% fewer
Code minified successfully!
`,
css: `/* This is a CSS reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}/* Main container styles */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}/* Header styles */
.header {
background-color: #2c3e50;
color: white;
padding: 20px 0;
text-align: center;
}/* Navigation styles */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}.nav-list {
list-style: none;
display: flex;
gap: 20px;
}.nav-link {
text-decoration: none;
color: #3498db;
transition: color 0.3s ease;
}.nav-link:hover {
color: #2980b9;
}/* Responsive design */
@media (max-width: 768px) {
.nav {
flex-direction: column;
}
.nav-list {
flex-direction: column;
gap: 10px;
}
}`,
js: `// This is a sample JavaScript file// Function to calculate factorial
function calculateFactorial(number) {
if (number < 0) {
return -1; // Error case
} else if (number === 0) {
return 1; // Base case
} else {
return number * calculateFactorial(number - 1); // Recursive case
}
}// Function to validate email
function validateEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}// DOM manipulation function
function initializeApp() {
const button = document.getElementById('myButton');
const output = document.getElementById('output');
if (button && output) {
button.addEventListener('click', function() {
const randomNumber = Math.floor(Math.random() * 100) + 1;
output.textContent = 'Random number: ' + randomNumber;
});
}
}// Call initialization when DOM is loaded
document.addEventListener('DOMContentLoaded', initializeApp);`
};
// Event listeners
codeTypeBtns.forEach(btn => {
btn.addEventListener('click', () => {
codeTypeBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
currentType = btn.getAttribute('data-type');
loadSampleCode();
updateStats();
});
});
minifyBtn.addEventListener('click', minifyCode);
copyBtn.addEventListener('click', copyMinifiedCode);
resetBtn.addEventListener('click', resetTool);
uploadBtn.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFileUpload);
downloadBtn.addEventListener('click', downloadMinifiedCode);
inputCode.addEventListener('input', updateStats);
// Initialize with sample HTML code
window.addEventListener('load', () => {
loadSampleCode();
updateStats();
});
// Load sample code based on current type
function loadSampleCode() {
inputCode.value = sampleCode[currentType];
outputCode.value = '';
updateStats();
copyBtn.disabled = true;
}
// Update statistics
function updateStats() {
const inputText = inputCode.value;
const outputText = outputCode.value;
// Input stats
const inputCharCount = inputText.length;
const inputLineCount = inputText.split('\n').length;
inputSize.textContent = `${inputCharCount} characters`;
originalSize.textContent = inputCharCount.toLocaleString();
originalLines.textContent = inputLineCount.toLocaleString();
// Output stats
if (outputText) {
const outputCharCount = outputText.length;
const outputLineCount = outputText.split('\n').length;
outputSize.textContent = `${outputCharCount} characters`;
minifiedSize.textContent = outputCharCount.toLocaleString();
minifiedLines.textContent = outputLineCount.toLocaleString();
// Calculate reductions
const sizeReductionPercent = ((inputCharCount - outputCharCount) / inputCharCount * 100).toFixed(1);
const lineReductionPercent = ((inputLineCount - outputLineCount) / inputLineCount * 100).toFixed(1);
sizeReduction.textContent = `${sizeReductionPercent}% smaller`;
lineReduction.textContent = `${lineReductionPercent}% fewer`;
// Color code based on improvement
sizeReduction.className = sizeReductionPercent > 0 ? 'stat-improvement' : 'stat-worsened';
lineReduction.className = lineReductionPercent > 0 ? 'stat-improvement' : 'stat-worsened';
copyBtn.disabled = false;
} else {
outputSize.textContent = '0 characters';
minifiedSize.textContent = '0';
minifiedLines.textContent = '0';
sizeReduction.textContent = '0% smaller';
lineReduction.textContent = '0% fewer';
copyBtn.disabled = true;
}
}
// Minify code based on type
function minifyCode() {
const code = inputCode.value;
if (!code.trim()) {
showNotification('Please enter some code to minify', true);
return;
}
let minified = '';
switch(currentType) {
case 'html':
minified = minifyHTML(code);
break;
case 'css':
minified = minifyCSS(code);
break;
case 'js':
minified = minifyJS(code);
break;
}
outputCode.value = minified;
updateStats();
showNotification('Code minified successfully!');
}
// HTML minification
function minifyHTML(html) {
let minified = html;
// Remove comments if option is checked
if (removeComments.checked) {
minified = minified.replace(//g, '');
}
// Remove whitespace if option is checked
if (removeWhitespace.checked) {
// Collapse multiple spaces into one
minified = minified.replace(/\s+/g, ' ');
// Remove spaces between tags
minified = minified.replace(/>\s+<');
// Trim
minified = minified.trim();
}
return minified;
}
// CSS minification
function minifyCSS(css) {
let minified = css;
// Remove comments if option is checked
if (removeComments.checked) {
minified = minified.replace(/\/\*[\s\S]*?\*\//g, '');
}
// Remove whitespace if option is checked
if (removeWhitespace.checked) {
// Remove spaces around braces and colons
minified = minified.replace(/\s*{\s*/g, '{');
minified = minified.replace(/\s*}\s*/g, '}');
minified = minified.replace(/\s*:\s*/g, ':');
minified = minified.replace(/\s*;\s*/g, ';');
minified = minified.replace(/\s*,\s*/g, ',');
// Remove unnecessary semicolons
minified = minified.replace(/;}/g, '}');
// Collapse multiple spaces
minified = minified.replace(/\s+/g, ' ');
// Trim
minified = minified.trim();
}
return minified;
}
// JavaScript minification (simplified)
function minifyJS(js) {
let minified = js;
// Remove comments if option is checked
if (removeComments.checked) {
minified = minified.replace(/\/\/.*$/gm, ''); // Line comments
minified = minified.replace(/\/\*[\s\S]*?\*\//g, ''); // Block comments
}
// Remove whitespace if option is checked
if (removeWhitespace.checked) {
// Collapse multiple spaces
minified = minified.replace(/\s+/g, ' ');
// Remove spaces around operators (simplified)
minified = minified.replace(/\s*([=+-\/*])\s*/g, '$1');
// Remove spaces after commas and semicolons
minified = minified.replace(/,\s*/g, ',');
minified = minified.replace(/;\s*/g, ';');
// Remove spaces around braces and parentheses
minified = minified.replace(/\s*{\s*/g, '{');
minified = minified.replace(/\s*}\s*/g, '}');
minified = minified.replace(/\s*\(\s*/g, '(');
minified = minified.replace(/\s*\)\s*/g, ')');
// Trim
minified = minified.trim();
}
// Simple variable shortening (for demonstration)
if (shortenVars.checked) {
// This is a very basic implementation
minified = minified.replace(/function calculateFactorial/g, 'function f');
minified = minified.replace(/calculateFactorial/g, 'f');
minified = minified.replace(/validateEmail/g, 'v');
minified = minified.replace(/initializeApp/g, 'i');
}
return minified;
}
// Copy minified code to clipboard
function copyMinifiedCode() {
if (!outputCode.value) {
showNotification('No minified code to copy', true);
return;
}
outputCode.select();
document.execCommand('copy');
// Visual feedback
const originalText = copyBtn.innerHTML;
copyBtn.innerHTML = 'Copied!';
setTimeout(() => {
copyBtn.innerHTML = originalText;
}, 2000);
showNotification('Minified code copied to clipboard!');
}
// Download minified code
function downloadMinifiedCode() {
if (!outputCode.value) {
showNotification('No minified code to download', true);
return;
}
const blob = new Blob([outputCode.value], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `minified.${currentType}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showNotification('Minified code downloaded!');
}
// Handle file upload
function handleFileUpload(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
inputCode.value = e.target.result;
updateStats();
showNotification('File uploaded successfully!');
};
reader.readAsText(file);
// Reset file input
event.target.value = '';
}
// Reset tool
function resetTool() {
inputCode.value = '';
outputCode.value = '';
updateStats();
copyBtn.disabled = true;
showNotification('Tool reset successfully!');
}
// Show notification
function showNotification(message, isError = false) {
notification.textContent = message;
notification.className = 'notification';
if (isError) {
notification.classList.add('error');
}
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}