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 HTML Minifier. In the next step, we will start creating the structure of the webpage.
You may like these also:
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>