CodeForm | Professional Code Minifier & Beautifier

CodeForm

Professional code minifier and beautifier for HTML, CSS, and JavaScript. Optimize and format your code with ease.

HTML

CSS

JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to My Website</h1>
        <p>This is a sample paragraph with some <strong>bold text</strong> and a <a href="#">link</a>.</p>
        <button id="myButton">Click Me</button>
    </div>
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('Button clicked!');
        });
    </script>
</body>
</html>

/* Main container styles */
.container {
    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: center;
    gap: 20px;
    margin-top: 20px;
}

.nav a {
    color: #ecf0f1;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.nav a:hover {
    background-color: #3498db;
}

/* Button styles */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #2980b9;
}

// Function to calculate factorial
function factorial(n) {
    if (n === 0 || n === 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

// Function to display result
function displayResult() {
    const input = document.getElementById('numberInput');
    const resultDiv = document.getElementById('result');
    
    const num = parseInt(input.value);
    
    if (isNaN(num) {
        resultDiv.textContent = 'Please enter a valid number.';
        return;
    }
    
    if (num < 0) {
        resultDiv.textContent = 'Please enter a non-negative number.';
        return;
    }
    
    const fact = factorial(num);
    resultDiv.textContent = `The factorial of ${num} is ${fact}.`;
}

// Event listener for button click
document.getElementById('calculateBtn').addEventListener('click', displayResult);

Optimization Stats

Original Size: 0 KB

Minified Size: 0 KB

Savings: 0%

Processing Time: 0 ms

Features

Minify HTML, CSS & JavaScript
Beautify & Format code
Real-time size comparison
One-click copy to clipboard
Syntax highlighting
Responsive design

Professional Code Minifier & Beautifier

CodeForm

Optimization Stats

Features

Post a Comment

So More Tools

Image Resizer

Contact Form