jQuery | Special Characters Encoder

In this example below you will see how to do a jQuery | Special Characters Encoder with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Tobias Bogliolo , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Tobias Bogliolo ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>jQuery | Special Characters Encoder</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="layer"></div>
  <div class="col">
    <h2>Escaping Special Characters</h2>
    <textarea name="" id="input" placeholder="Your text..."></textarea>
    <div class="deco"></div>
  </div><div class="col">
    <p id="output">
      <!-- Output here! -->
    </p>
  </div>
</div>

<!-- Goolge Font -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,700i|Quicksand" rel="stylesheet">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tobiasdev/jquery-or-special-characters-encoder-ZBBvLY */
/* Global */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  padding: 60px 0;
  font-family: 'Quicksand', sans-serif;
  background: #ECEFF1;
}

/* Encoder */
.container {
  position: relative;
  width: 80%;
  max-width: 620px;
  margin: 0 auto;
}

.layer {
  position: absolute;
  width: 90%;
  height: 80%;
  bottom: -5%;
  left: -5%;
  background: #B9D655;
  box-shadow:
    0px 3px 6px 1px rgba(0, 0, 0, 0.03),
    6px 16px 24px 1px rgba(0, 0, 0, 0.04),
    16px 28px 46px 1px rgba(0, 0, 0, 0.04);
}

.col {
  display: inline-block;
  position: relative;
  width: 50%;
  padding: 10px;
  background: #FFFFFF;
  vertical-align: middle;
  box-shadow:
    0px 6px 12px 1px rgba(0, 0, 0, 0.08),
    12px 34px 46px 1px rgba(0, 0, 0, 0.12),
    34px 58px 90px 1px rgba(0, 0, 0, 0.12);
}

.col:nth-child(2) {
  border-bottom: 5px solid #D7CC84;
}

.col:nth-child(3) {
  background: #2D3A4B;
}

.col h2 {
  margin: 0;
  padding: 20px 10%;
  font-family: 'Playfair Display', serif;
  line-height: 1.28em;
  color: #D7CC84;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .01em;
  text-align: center;
}

#input,
#output {
  width: 100%;
  padding: 10%;
  line-height: 1.4em;
  overflow-wrap: break-word; /* Force line break. */
}

#input {
  height: 245px;
  color: #788A94;
  border: none;
  outline: none;
  resize: none;
}

#output {
  height: 400px;
  margin: 0;
  color: #FFFFFF;
  overflow: auto;
}

/* Select color */
.col h2::selection,
#output::selection,
#input::selection {
  background: rgba(255,255,255,.15);
}

.col h2::-moz-selection,
#input::-moz-selection,
#output::-moz-selection {
  background: rgba(255,255,255,.15);
}

/* Scrollbar styling */
#input::-webkit-scrollbar-track,
#output::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
  border-radius: 10px !important;
  background-color: transparent !important;
}

#input::-webkit-scrollbar,
#output::-webkit-scrollbar {
  width: 12px !important;
  background-color: transparent !important;
}

#input::-webkit-scrollbar-thumb,
#output::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3) !important;
  background-color: #788A94 !important;
}

/* Breakpoint */
@media screen and (max-width: 600px){
  .col {
    display: block;
    width: 100%;
  }

  .col:nth-child(2) {
    border-bottom: none;
  }
}

/*Downloaded from https://www.codeseek.co/tobiasdev/jquery-or-special-characters-encoder-ZBBvLY */
/*
===============================================================

Hi! Welcome to my little playground!

My name is Tobias Bogliolo. 'Open source' by default and always 'responsive',
I'm a publicist, visual designer and frontend developer based in Barcelona. 

Here you will find some of my personal experiments. Sometimes usefull,
sometimes simply for fun. You are free to use them for whatever you want 
but I would appreciate an attribution from my work. I hope you enjoy it.

===============================================================
*/

$('#input').on('keyup change', function(){
  var input = $('#input').val(); //Get input.
  var inputEncode = encodeURIComponent(input); //Encode data.
  $('#output').text(inputEncode); //Output encode string.
});

Comments