How to create code compressor in JavaScript | HTML Minifier

Hello guys, today I am going to show you how to create an HTML Minifier using HTML CSS & JavaScript, in this article, I will create a simple code minifier using some line of JavaScript code.

HTML Minifier step by step

Step 1 — Creating a New Project

In this step, we need to create a new project folder and files(index.html, style.css) for creating an awesome responsive website footer. In the next step, you will start creating the structure of the webpage.

You may like these also:

JavaScript signature pad

Full Page Scrolling Effect

Step 2 — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to make html minifier</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag:

<section class="codeminify">
        <textarea class="simplecode" placeholder="Paste or type your data here..."></textarea>
        <button id="htmlMinify">Minify HTML</button>
        <textarea placeholder="Output" class="minifycode"></textarea>
</section>

Step 3 — Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
.codeminify {
    display: grid;
    grid-template-columns: auto auto auto;
}
textarea {
    padding: 10px;
    min-width: 420px;
    min-height: 300px;
    font-size: 16px;
}
button#htmlMinify {
    display: block;
    width: 150px;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    background: #4b00ff;
    color: #fff;
    border: transparent;
    cursor: pointer;
    outline: 0;
    margin: 0 10px;
}

Step 4 — Adding some lines of JavaScript code

In this step, we will add some JavaScript code to minify html code.

<script>
        var $tag = function(tag) {
            return document.getElementsByTagName(tag);
        }

        function minify_html(type, input, output) {
            output.value = input.value
            .replace(/\<\!--\s*?[^\s?\[][\s\S]*?--\>/g,'')
            .replace(/\>\s*\</g,'><');
        }

        document.getElementById("htmlMinify").addEventListener("click", function(){
            minify_html(
                this.innerHTML, $tag('textarea')[0], $tag('textarea')[1]
            );
        }, false);
</script>