Welcome folks today in this blog post we will be building a ascii text to binary codes converter (and vice versa) web app in html5 css3 and 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

<div id="myFrm">
  <h2>The Binary/Ascii Converter</h2>
  <input class="button" type="button" value="Convert" />
  <div class="container">
    <div class="switch">
          <input type="radio" name="switch" id="off">
            <input type="radio" name="switch" id="on" checked>
            <label for="off">Bin</label>
            <label for="on">Ascii</label>
            <span class="toggle"></span>  
      </div>
    </div>
  <br></br>
  <div id="flip">
    <textarea id="theText" cols="50" rows="3"></textarea>
  </div>
  <div id="panel">
    <textarea id="theResult" cols="50" rows="3"></textarea>
  </div>    
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Now make a style.css file and copy paste the following code

style.css

.container {
    margin: -25px 0 0 220px;
    position: absolute;
}

#myFrm
{
  background: #333;
  border: 1px solid rgba(45,60,91,0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(45,60,91,0.5);
  background: linear-gradient(#464646,#2a2a2a);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  margin: 0 auto;
  padding: 10px 30px 30px 30px;
  width: 310px;
}

textarea
{
  color: #444;
  font-size: 16px;
  height: 100px;
  padding: 10px;
  width: 290px;
  resize: none
}

#panel
{
  display:none;
}

body {
  background: #464646; 
  font-family: helvetica neue light, helvetica neue, helvetica, sans-serif;
  overflow:hidden;
}

.button {
   padding: 3px 20px 3px 20px;
   border-radius: 3px;
   font-size: 100%;
   background: linear-gradient(#464646,#2a2a2a);
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.5);
   font-weight: 400;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
   border: 0px;
}

.button:hover {
   cursor: pointer;
   background: linear-gradient(#4a4a4a,#2e2e2e);
}

.button:active {
   background: rgba(0, 0, 0, 0.2); 
   box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6), 0px 1px 0px rgba(255, 255, 255, 0.1);
}

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

script.js

$(document).ready(function(){
  
  $(".button").click(function(){

    /*convert away*/
    if($('#on').is(':checked')) { 
      $('#theResult').val(converter($('textarea#theText').val(), 'ascii'));
    }
    else {
      $('#theResult').val(converter($('textarea#theText').val(), 'binary'));
    }
    
    /* bring her down*/
    $("#panel").slideDown("slow");
  });
 
  /*tidy on change*/
  $("#theText,:radio").click(function(){
     /* send her up*/
    $("#panel").slideUp("slow");
    this.value = '';
  });
    
});

Now if you open the index.html file inside the browser you will see the below output