DEV Community

Cover image for How to create code compressor in JavaScript | HTML Minifier
Stackfindover
Stackfindover

Posted on

How to create code compressor in JavaScript | HTML Minifier

#html #css #javascript #beginners

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:

  1. JavaScript signature pad
  2. 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

HTML Minifier final result

Top comments (7)

Collapse
 
prabhukadode profile image
Prabhu •

Would you please explore bit more ?

Collapse
 
stackfindover profile image
Stackfindover •

yes, this is only HTML Minifier we will update it :)

Collapse
 
kieudac201 profile image
KieuDac201 •

What is the Nodes?

 
blumed profile image
Cullan •

I do like your answer I think it has a great specific use case, but I am confused by the rigidity of this approach. Example if someone minifies a chunk of html which has no doctype or head or body. First how would your code handle full html files and html chunks? From my testing of your code you can either do one or the other but not both. Is there something I am missing because I do like your answer but not sure it has the flexibility of minifying any html you throw at it.