URI Encoder/Decoder

by Matheus Stein

HTML

<div class="container">

<p class="title">
URI Encoder/Decoder
</p>
  <textarea id="text" onChange="changed()" onKeyUp="changed()" onPaste="changed()">Text to Encode or Decode</textarea><br>

  <textarea id="result" >Result</textarea>
  <div id="status"></div>

  <span class="link" onClick="copy_result()">Copy Result</span><br>

  <span class="button" onCLick="enc()">Encode</span>
  <span class="button" onCLick="dec()">Decode</span>

<p class="footer">
By. Matheus Stein
</p>
</div>

<span id="copy" class="copy">Copied!</span>

CSS

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700');

body {
    background:#20262e;
    font-family: 'Ubuntu Mono', monospace;
    color:#beccdd;
    font-size:14px;
    margin:0
  }

textarea {
  width:376px;
  min-height:84px;
  border:0;
  background:#494d54;
  resize: none;
  color:#beccdd;
  padding:12px;
  border-radius:4px;
  box-shadow:0 2px 2px 0 rgba(0,0,0,0.2)
}

#result {
  color:rgba(255,255,255,0.3);  
  margin-top:12px;
  outline: none;
  border-radius:4px 4px 0 0;
  box-shadow:none;
}

.container {
  width:400px;
  margin-left:calc( 50vw - 230px );
  margin-top:calc( 50vh - 218px );
  background:#292f36;
  padding:30px;
  border-radius:4px;
  box-shadow:0 3px 3px 0px rgba(0,0,0,0.3);
}

.button {
  display:inline-block;
  padding:12px 24px;
  background:#30cbff;
  border-radius:2px;
  color:#20262e;
  font-weight:bold;
  margin-right:8px;
  cursor:pointer;
  transition:all 0.2s;
}

  .button:hover {
    background:#0092c4;
  }

#status {
  display:block;
  width:400px;
  height:4px;
  background:#ff3059;
  margin-top:-3px;
  margin-bottom:16px
}

.link {
  display:inline-block;
  color:#30cbff;
  margin-bottom:16px;
  cursor:pointer;
}

.title {
  margin:0 0 16px 0;
  font-weight:bold;
  font-size: 16px;
}

.footer {
  margin:16px 0 0 0;
  font-size:12px;
}

.copy {
  position:absolute;
  top:16px;
  left:16px;
  padding:8px;
  background:rgba(0,0,0,0.5);
  border-radius:4px;
  transition:all 0.3s;
  opacity:0;
}
.on {
  opacity:1;
}

JavaScript

function enc(){
document.getElementById('result').value=encodeURIComponent(document.getElementById('text').value);
done()
}
function dec(){
document.getElementById('result').value=decodeURIComponent(document.getElementById('text').value);
done()
}

function changed() {
document.getElementById('status').style.background = "#ff3059"
}
function done() {
document.getElementById('status').style.background = "#30ff6e"
}

function copy_result() {
document.getElementById('result').focus();
document.getElementById('result').select();
document.execCommand('copy');
document.getElementById('copy').className = "copy on";
setTimeout(function() { 
	document.getElementById('copy').className = "copy";
}, 3000);
}