Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 29, 2021 04:00 pm GMT

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:

  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>

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>

HTML Minifier final result


Original Link: https://dev.to/stackfindover/how-to-create-code-compressor-in-javascript-html-minifier-32i

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To