Build HTML,CSS,Javascript Code Compressor or Minifier Web App in Browser Using Vanilla Javascript Full Project For Beginners

Build HTML,CSS,Javascript Code Compressor or Minifier Web App in Browser Using Vanilla Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a html,css,javascript code compressor or minifier web app in browser using vanilla javascript.All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<textarea placeholder="MINIFY INPUT/MAXIFY OUTPUT"></textarea>
<div>
  <button>Minify HTML</button>
  <button>Minify CSS</button>
  <button>Minify JS</button>
  <button>CLEAR ALL</button>
  <button>Maxify JS</button>
  <button>Maxify CSS</button>
  <button>Maxify HTML</button>
</div>
<textarea placeholder="MINIFY OUTPUT/MAXIFY INPUT"></textarea>
<p></p>

 

 

And now make a style.css file for styling the app and copy paste the below code

 

style.css

 

 

/* GENERAL STYLES */
*, *: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: #000; color: #888; font-family: sans-serif; }

textarea {
  float: left;
  width: 40%;
  margin: 0 2.5%;
  height: 280px;
  padding: 20px;
  overflow-y: auto;
  border: none;
  border-radius: 5px;
  box-shadow: inset 0 0 20px #fff;
  background: #888;
  color: #fff;
  font-size: 20px;
  resize: none;
}
textarea:first-of-type {
  font-size: 10px;
  background: #0088ff;
}
textarea:last-of-type {
  font-size: 10px;
  background: #cccc00;
  color: #000;
}

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: #0088ff;
  background: -moz-linear-gradient(left,  #0088ff 0%, #cccc00 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0088ff), color-stop(100%,#cccc00));
  background: -webkit-linear-gradient(left,  #0088ff 0%,#ff8800 100%);
  background: -o-linear-gradient(left,  #0088ff 0%,#cccc00 100%);
  background: -ms-linear-gradient(left,  #0088ff 0%,#cccc00 100%);
  background: linear-gradient(to right,  #0088ff 0%,#cccc00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088ff', endColorstr='#cccc00',GradientType=1 );
  color: #fff;
  cursor: pointer;
}
button:nth-child(-n+3):after {
  content: '\25B6';
  speak: none;
  margin-left: 10px;
  font-size: 26px;
  vertical-align: baseline;
}
button:nth-child(n+5):before {
  content: '\25C1';
  speak: none;
  margin-right: 10px;
  font-size: 26px;
  vertical-align: baseline;
}
button:hover {
  background: #444;
}
  
p {
  position: absolute;
  top: 300px;
  left: 2.5%;
  width: 95%;
  border-radius: 10px;
}

 

See also  Node.js Express Tutorial to Send Email Messages With Attachments Using NodeMailer Full Project

 

And now make a script.js file and copy paste the following code

 

script.js

 

 

// CREATE SNIPPETS
var $ = function (id) { return document.getElementById(id); }
var _ = function (tag) { return document.getElementsByTagName(tag); }

// THE MINIFIER & MAXIFIER
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 === 'Minify JS') {
    output.value = input.value
      .replace(/\/\*[\s\S]*?\*\/|\/\/.*\n|\s{2,}|\n|\t|\v|\s(?=function\(.*?\))|\s(?=\=)|\s(?=\{)/g,'')
      .replace(/\s?function\s?\(/g,'function(')
      .replace(/\s?\{\s?/g,'{')
      .replace(/\s?\}\s?/g,'}')
      .replace(/\,\s?/g,',')
      .replace(/if\s?/g,'if')
    ;
    notice("NOTE: Though this JS Minifier is functional, the minified scripts won't run since I have variables and functions inline instead of on a new line...so apparently I'm missing something; because, real JS minifiers can put everything on a newline and still work.\n\nAlso, this doesn't NOT replace your function names and variables with alphabet letters to farther its minification.", '#ff8800', '#fff');
  }
  else if (type === 'Maxify JS') {
    input.value = output.value
      .replace(/\{/g,' {\n\t')
      .replace(/\}/g,'\n}\n')
      .replace(/\;/g,';\n\t')
    ;
    notice("Not usable, especially with like RegEx characters! Bummer dude.", '#ff8800', '#fff');
  }
  else if (type === 'Maxify CSS') {
    input.value = output.value
      .replace(/\,/g,', ')
      .replace(/\{/g,' {\n\t')
      .replace(/\}/g,'}\n')
      .replace(/\;/g,';\n\t')
    ;
    notice("Well, it's decent; comparatively.", '#008800', '#fff');
  }
  else if (type === 'Maxify HTML') {
    input.value = output.value
      .replace(/\>\</g,'>\n<');
    notice("I know, no indenting; yet...", '#008888', '#fff');
  }
  else { input.value = ''; output.value = ''; }
}

function notice(message, background, color) {
  _('p')[0].innerHTML = message;
  _('p')[0].style.cssText = 'padding:10px;background:' + background + ';color:' + color + ';';
}

// NO ID'S TO REMEMBER THE NON-JQUERY WAY OF HANDLING TAGS OR CLASSES, AND FOR UNREASONABLY SUPER SIMPLE HTML
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);
}

 

See also  Node.js Express Convert EPUB Book to PDF Online Converter Using ebook-converter Library Full App 2020

 

And now if you open the index.html file inside the browser you will see the below screenshot

 

 

 

Leave a Reply