HTML Minifier

This is a simple html code minifier which provides clean and short html code.

Table of contents

• Overview

  • Screenshots
  • Links

• My process

  • Built with
  • What I learned
  • Useful resources

• Author

Overview

Screenshots

Desktop Screenshot

Mobile Screenshot

Links

• Live Site URL: https://sunilsharmapoudel.github.io/html-minifier/

Built with

• Semantic HTML5 markup
• CSS custom properties
• Vanilla JS

What I learned

From this project I learned to

• Removes HTML comments.
• Replaces multiple consecutive whitespace characters with a single space.
• Removes newline characters.
• Removes any spaces between HTML tags.

Useful Resources

HTML

    
<div class="container">
    <h1 style="text-align:center;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path d="M0 0h24v24H0z"/><path fill="currentColor" d="M14.62 2.662a1.5 1.5 0 0 1 1.04 1.85l-4.431 15.787a1.5 1.5 0 0 1-2.889-.81L12.771 3.7a1.5 1.5 0 0 1 1.85-1.039ZM7.56 6.697a1.5 1.5 0 0 1 0 2.12L4.38 12l3.182 3.182a1.5 1.5 0 1 1-2.122 2.121L1.197 13.06a1.5 1.5 0 0 1 0-2.12l4.242-4.243a1.5 1.5 0 0 1 2.122 0Zm8.88 2.12a1.5 1.5 0 1 1 2.12-2.12l4.243 4.242a1.5 1.5 0 0 1 0 2.121l-4.242 4.243a1.5 1.5 0 1 1-2.122-2.121L19.621 12z"/></g></svg>  HTML Minifier</h1>
    <textarea id="input" class="textarea" placeholder="Enter your HTML code here..."></textarea></br>
<div class="btn-wrapper">
    <button class="button" onclick="minify()"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M15.99 9h3.43C18.6 7 17 5.4 15 4.58v3.43c.37.28.71.62.99.99M4 12c0 3.35 2.04 6.24 5 7.42v-3.44c-1.23-.93-2-2.4-2-3.99C7 10.4 7.77 8.93 9 8V4.58C6.04 5.76 4 8.65 4 12m11 3.99v3.43c2-.82 3.6-2.42 4.42-4.42h-3.43c-.28.37-.62.71-.99.99" opacity="0.3"/><path fill="currentColor" d="M14.82 11h7.13c-.47-4.72-4.23-8.48-8.95-8.95v7.13c.85.31 1.51.97 1.82 1.82M15 4.58C17 5.4 18.6 7 19.42 9h-3.43c-.28-.37-.62-.71-.99-.99zM2 12c0 5.19 3.95 9.45 9 9.95v-7.13C9.84 14.4 9 13.3 9 12c0-1.3.84-2.4 2-2.82V2.05c-5.05.5-9 4.76-9 9.95m7-7.42v3.44c-1.23.92-2 2.39-2 3.98c0 1.59.77 3.06 2 3.99v3.44C6.04 18.24 4 15.35 4 12c0-3.35 2.04-6.24 5-7.42m4 10.24v7.13c4.72-.47 8.48-4.23 8.95-8.95h-7.13c-.31.85-.97 1.51-1.82 1.82m2 1.17c.37-.28.71-.61.99-.99h3.43C18.6 17 17 18.6 15 19.42z"/></svg> Minify HTML</button>
    <button class="button" onclick="copyCode()"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.6 11.397c0-2.726 0-4.089.843-4.936c.844-.847 2.201-.847 4.917-.847h2.88c2.715 0 4.073 0 4.916.847c.844.847.844 2.21.844 4.936v4.82c0 2.726 0 4.089-.844 4.936c-.843.847-2.201.847-4.916.847h-2.88c-2.716 0-4.073 0-4.917-.847c-.843-.847-.843-2.21-.843-4.936z"/><path fill="currentColor" d="M4.172 3.172C3 4.343 3 6.229 3 10v2c0 3.771 0 5.657 1.172 6.828c.617.618 1.433.91 2.62 1.048c-.192-.84-.192-1.996-.192-3.66v-4.819c0-2.726 0-4.089.843-4.936c.844-.847 2.201-.847 4.917-.847h2.88c1.652 0 2.8 0 3.638.19c-.138-1.193-.43-2.012-1.05-2.632C16.657 2 14.771 2 11 2C7.229 2 5.343 2 4.172 3.172" opacity="0.5"/></svg> Copy Code</button>
</div>

    <textarea id="output" class="output" placeholder="Minified HTML code will appear here..." readonly></textarea>

</div>

CSS

body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #AED6F1;
    }

    .container {
        max-width: 800px;
        margin: auto;
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 17px -16px 30px rgb(0 0 0 / 10%);
    }

    .textarea {
        width: calc(100% - 22px);
        height: 200px;
        margin-bottom: 10px;
        padding: 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 5px;
        resize: vertical;
        box-sizing: border-box;
    }

    .button {
        padding: 10px 20px;
        font-size: 16px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
    }

    .button:hover {
        background-color: #45a049;
    }

    .btn-wrapper{
        text-align: center;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .output {
        width: calc(100% - 22px);
        height: 200px;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 5px;
        resize: vertical;
        box-sizing: border-box;
    
    }
   
        @media screen and (max-width: 768px) {
        .container {
            width: 90%;
            margin: auto;
        }
    }

JS

 function minify() {
        const input = document.getElementById('input').value.trim();
        const output = document.getElementById('output');
        
        if (input === '') {
            alert('Please enter HTML code to minify.');
            return;
        }
        
        // Minify HTML code
        const minifiedHTML = input
            .replace(/<!--[\s\S]*?-->/g, '') // Remove HTML comments
            .replace(/\s{2,}/g, ' ') // Replace multiple spaces with single space
            .replace(/\n/g, '') // Remove newline characters
            .replace(/>\s+</g, '><'); // Remove spaces between tags
        
        output.value = minifiedHTML;
    }
    
    function copyCode() {
        const output = document.getElementById('output');
        
        if (output.value.trim() === '') {
            alert('There is no code to copy.');
            return;
        }
        
        output.select();
        document.execCommand('copy');
        alert('Code copied to clipboard!');
    }

Author

• Website - Sunil Sharma
• Facebook - @mesunilsharmapoudel
• Twitter - @techsunilsharma