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

Welcome Learner  today in this blog post we will be building a css, html, javascript code minifier or compressor web app in a browser with vanilla javascript. All the Complete source code of the application is given Down.

Let’s get started

In order to get started, you need to make a index.html file and copy-paste the suggested 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 create a style.css file and copy-paste the Given 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;
}

And now create a script.js file and copy-paste the Given code.

READ Javascript Convert JSON to CSV in Browser & it as CSV File by FileSaver.js Library complete Project For learner

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);
}

READ Create a JSON File Compressor Web App Using FileSaver.js Library in JS Complete Project For learner