Text to Binary Converter Tool JavaScript Code

 

<div id="app" class="arp-t2b" align="center">
  <textarea class="TxtArea" v-model="input_output" rows="15" wrap="soft" placeholder="Type/Paste Your Text/Number to Convert in Binary."></textarea>
  <div class="Btn-s">
    <button @click="text2binary">Text to Binary</button>
    <button @click="binary2text">Binary to Text</button>
    <button class="copyButton">Copy Code</button>
  </div>
</div>

<style>
.arp-t2b button{width:120px;font-size:14px;height:auto;margin:10px;border:none;padding:10px 12px;background-color:#8775f5;border-radius:3px;color:#fefefe;transition:all .3s;}
.arp-t2b button:hover{opacity:0.7;transition:all .3s;cursor:pointer;}
.arp-t2b .TxtArea{width:100%;color:#797979;border:1px solid #dcdcdc;padding:15px;border-top-left-radius:5px;border-top-right-radius:5px;font-size:15px;outline:none;border-bottom:none;resize:none;}
.drkM .arp-t2b .TxtArea{background-color:#252526;}
.copyButton{position:relative;}
.copyButton.active{background:#061A40;}
.Btn-s{background:#f3f3f3;width:100%;padding:21px;margin-top:-4px;border-bottom-left-radius:7px;border-bottom-right-radius:7px;border:1px solid #dcdcdc;border-top:none;}
.drkM .Btn-s{border-color:rgba(255,255,255,.1);background-color:#2d2d30;}
</style>

<style>
.arp-t2b button{width:120px;font-size:14px;height:auto;margin:10px;border:none;padding:10px 12px;background-color:#8775f5;border-radius:3px;color:#fefefe;transition:all .3s;}
.arp-t2b button:hover{opacity:0.7;transition:all .3s;cursor:pointer;}
.arp-t2b .TxtArea{width:100%;color:#797979;border:1px solid #dcdcdc;padding:15px;border-top-left-radius:5px;border-top-right-radius:5px;font-size:15px;outline:none;border-bottom:none;resize:none;}
.drkM .arp-t2b .TxtArea{background-color:#252526;}
.copyButton{position:relative;}
.copyButton.active{background:#061A40;}
.Btn-s{background:#f3f3f3;width:100%;padding:21px;margin-top:-4px;border-bottom-left-radius:7px;border-bottom-right-radius:7px;border:1px solid #dcdcdc;border-top:none;}
.drkM .Btn-s{border-color:rgba(255,255,255,.1);background-color:#2d2d30;}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<script type="text/javascript">
  new Vue({
  	data() {
  		return {
  			input_output: '',
  			add_space: true
  		}
  	},
  	methods: {
  		pad(num, padnum) {
  			var padlen = padnum - num.toString().length;
  			var padding = '';
  			for (var x = 0; x < padlen; x++) {
  				padding = '0' + padding;
  			}
  			num = padding + num;
  			return num;
  		},
  		binary2text() {
  			var vm = this;
  			var text = vm.input_output;
  			text = text.replace(/\r/gi, '').replace(/\n/gi, '');
  			text = text.trim();
  			var delimiter = ' ';
  			if (!vm.add_space) text = text.chunk(8).join(' ');
  			textarr = text.split(delimiter);
  			textarrlen = textarr.length;
  			var textarrout = new Array();
  			for (var x = 0; x < textarrlen; x++) {
  				textarrout[x] = String.fromCharCode(parseInt(textarr[x], 2));
  			}
  			var textout = textarrout.join('');
  			vm.input_output = textout;
  		},
  		text2binary() {
  			var vm = this;
  			var text = vm.input_output;
  			var delimiterright = ' ';
  			if (!vm.add_space) delimiterright = '';
  			text = text.replace(/\r/gi, '');
  			text = text.split('\n');
  			var textlen = text.length;
  			var textout = new Array();
  			var textlinearr = new Array();
  			var textlinechar = '';
  			for (var x = 0; x < textlen; x++) {
  				textlinearr = new Array();
  				textline = text[x];
  				textlinelen = textline.length;
  				for (var y = 0; y < textlinelen; y++) {
  					textlinechar = textline.charCodeAt(y).toString(2);
  					textlinearr[y] = vm.pad(textlinechar, 8) + delimiterright;
  				}
  				textout[x] = textlinearr.join('');
  			}
  			textout = textout.join('00001010' + delimiterright).trim();
  			vm.input_output = textout;
  		}
  	}
  }).$mount('#app')
</script>

<script type="text/javascript">
const TxtArea = document.querySelector(".TxtArea"),
	copyButton = document.querySelector(".copyButton");
TxtArea.addEventListener("blur", function() {
	copyButton.classList.remove("active"), copyButton.innerHTML = "Copy Code"
}), copyButton.addEventListener("click", function() {
	copyButton.classList.add("active"), TxtArea.focus(), TxtArea.select(), document.execCommand("copy"), (this.innerHTML = "Copy Code") && (this.innerHTML = "Copied!")
});
</script>