Build a CSS3 Source Code Minifier or Compressor Web App in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

index.html

 

 

<h1>Super Basic CSS Compressor</h1>
<p>There are a few bugs and the regex needs condensed but it is fun</p>
<form name="form">
	<textarea placeholder="Type or paste your css here..." name="input" id="input" onKeyUp="minify();"></textarea>
  <textarea id="out" onClick="selectAll(this);"></textarea>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 

 

style.css

 

 

* {
  box-sizing: border-box;
  margin: 0;
  &:before, &:after {
    box-sizing: border-box;
    margin: 0;
  }
}
html, body, #out, form[name="form"], textarea {
  height: 99%;
}
body { overflow: hidden; }
form {
  position: relative;
  display: block;
  border: 1px solid #ccc;
  width: 49%;
  float: left;
}
form {
  position: relative;
  display: block;
  border: 1px solid #ccc;
  width: 100%;
  float: left;
}

#out {
  display: block;
  float: right;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
  font-size: 16px;
}

textarea {
  width: calc(50% - 2px); // "Liiiike a glove!"
  border: none;
  outline: none;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
  font-size: 16px;
}
h1 {
  font-size: 20px;
  height: auto;
  padding: 10px;
}
#options {
  border: none;
  outline: none;
  position: absolute;
  top: 13px;
  left: 300px;
}
#cleanify {
  position: relative;
  top: 2px;
  margin-right: 5px;
}

 

 

script.js

 

 

var minify, process;
process = function(x) {
  var y;
  y = x.replace(/(\r\n|\n|\r)/g, "");
  y = y.replace(/\s\{/g, "{")
       .replace(/(\r\n|\n|\r)/g, "")
       .replace(/\s?:\s/g, ":")
       .replace(/\s?;\s/g, ";")
       .replace(/\s?,\s/g, ",")
       .replace(/{\s/g, "{")
       .replace(/;\}/g, "}")
       .replace(/\s\}/g, "}")
       .replace(/\/\*[\w\W]*?\*\//g)
      .replace(/\s/g,
    "");
  return y;
}
minify = function() {
  var a, b, c, d, out;
  out = document.getElementById("out");
    a = document.form;
    b = a.input.value;
    c = process(b);
    d = process(c);
  out.innerHTML = d;
}
selectAll = function(el) { 
  el.focus(); 
  el.select(); 
};

Leave a Reply