How we can compress and decompress HTML & CSS codes? Solution: HTML CSS Beautifier and Minifier, Code Minify and Beautify Program.
Minify is the process of compression code from the original size to the smallest size and does not affect the program. And Beautify is the process of decompressing the minified code and get the previous version of code. In other words, Minifier for compress the codes & beautify for maxify or decompress codes.
Today you will learn to create Code Minify and Beautify Program, But the program works with only HTML and CSS. When we work on any online project, then we should minify our frontend codes for fast loading. Even Google also says that fast webpage loading is a good factor of SEO. So compress your HTML CSS codes using this program, & when you have to do some changes then decompress the codes.
So, Today I am sharing HTML CSS Beautifier and Minifier Program. You can use this to minify/maxify your codes, Or you can put this on your website to creating an online HTML CSS Minify. Basically, the program removes all the space and enters from the codes, and it can also add spaces and line breaks.
If you are thinking now how this program actually is, then see the preview given below.
Preview Of Code Minify and Beautify Program
See this video preview to getting an idea of how this minify/beautify program looks like.
Now you can see the program visually. If you like this, Then get the source code of its.
You May Also Like:
- Search or Filter In Table
- JavaScript Font Manager & Preview
- Animated Newsletter Signup Form
- Split Image In Parts
HTML CSS Beautifier and Minifier Source Code
Before sharing source code, let’s talk about it. First, I have created 2 text-area and 5 buttons then I placed the button between the text fields. For creating the text-area I used HTML <textarea> tag, & for buttons HTML <button> tag.
In the CSS file, I have placed all the elements, gave color, position, background, etc values. There are less CSS, you can modify this program to creating this stylish. All the functions are working by JavaScript. I have used Javascript if ( type === Button Text ) command to detect the buttons (info), I have not used any class or ID in the button section.
Basically, in the minify program, JS removes all spaces and enters according to coding rules. It does not harm or break your webpage’s elements. Now in the beautify or maxify program, it adds all the required space and line breaks to create the codes beautiful. I can explain all the JS conditions in writing, You will easily understand after getting the codes.
For creating this program you have to create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>HTML, CSS & JavaScript Minifier/Maxifier</title> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> </head> <body> <!-- partial:index.partial.html --> <textarea placeholder="MINIFY INPUT/MAXIFY OUTPUT"></textarea> <div> <button>Minify HTML</button> <button>Minify CSS</button> <button>CLEAR ALL</button> <button>Maxify CSS</button> <button>Maxify HTML</button> </div> <textarea placeholder="MINIFY OUTPUT/MAXIFY INPUT"></textarea> <p></p> <!-- partial --> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body { margin-top: 10px; background: #e8eaed; color: #333; font-family: sans-serif; } textarea { float: left; width: 40%; margin: 0 2.5%; height: 80vh; padding: 20px; overflow-y: auto; border: none; border-radius: 5px; border: solid 2px #212121; box-shadow: inset 0 0 20px #fff; background: white; color: #212121; font-size: 20px; resize: none; } div { float: left; width: 10%; } button { display: block; width: 100%; height: 40px; border: none; border-radius: 5px; box-shadow: inset 0 0 20px #000; font-size: 20px; background-color: #212121; color: #fff; margin-top: 15px; cursor: pointer; } button:hover { color: #e60023; background-color: #333; } p { position: absolute; top: 85vh; left: 2.5%; width: 95%; border-radius: 10px; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ var $ = function (id) { return document.getElementById(id); } var _ = function (tag) { return document.getElementsByTagName(tag); } function minify_maxify(type, input, output) { _('p')[0].innerHTML = ''; _('p')[0].style.padding = 0; if (type === 'Minify HTML') { output.value = input.value .replace(/\<\!--\s*?[^\s?\[][\s\S]*?--\>/g,'') .replace(/\>\s*\</g,'><') ; } else if (type === 'Minify CSS') { output.value = input.value .replace(/\/\*.*\*\/|\/\*[\s\S]*?\*\/|\n|\t|\v|\s{2,}/g,'') .replace(/\s*\{\s*/g,'{') .replace(/\s*\}\s*/g,'}') .replace(/\s*\:\s*/g,':') .replace(/\s*\;\s*/g,';') .replace(/\s*\,\s*/g,',') .replace(/\s*\~\s*/g,'~') .replace(/\s*\>\s*/g,'>') .replace(/\s*\+\s*/g,'+') .replace(/\s*\!\s*/g,'!') ; } else if (type === 'Maxify CSS') { input.value = output.value .replace(/\,/g,', ') .replace(/\{/g,' {\n\t') .replace(/\}/g,'}\n') .replace(/\;/g,';\n\t') ; } else if (type === 'Maxify HTML') { input.value = output.value .replace(/\>\</g,'>\n<'); } else { input.value = ''; output.value = ''; } } var buttons = _('button'); for(var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function() { minify_maxify( this.innerHTML, _('textarea')[0], _('textarea')[1] ); }, false); } |
That’s It. Now you have successfully created HTML CSS Beautifier and Minifier, Code Minify and Beautify Program using JavaScript. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
HI shaan,
Idk, but this code doesn’t work at my comp. Do you have this code at github?
run on google chrome
now the problem fixed, try again
Script not working.
run it on google chrome, I have checked on other browsers yet.
fixed
Your js is called function.js but your html calls script.js
Thanks, Now it fixed.
Hi Shaan. Good trick. You are so talented boy. Can you tell me – “How do you write post quickly”? Daily or weekly more then 2 posts is very difficult. How much time do you take for implementation, writing post, SEO etc. If you answer this – it’ll be helpful.
Write the topic which you know properly, That is the only way to post quickly. When we research topics then we take a lot of time. 30-60 minutes enough for daily bases on-page and technical SEO.
Nice thanks for the code it’s working like a rocket, Waiting for minify and maxify js.
Soon, Stay Connected.
Thanks, I’ve been looking for this. Can I use this for my website? I wanna add like tools page on my website.
yes! you can use