Create Text to Binary Converter Tool in Blogger

Create Text to Binary Converter Tool in Blogger

Did you like our text to binary converter tool? Now time to make your own tool and implement below JavaScript and HTML code on your website. To make your own tool website in blogger or WordPress or any platform, you need to add HTML CSS and JavaScript (JQuery) codes to your website template/files or page.

I tried to make it simple for you to understand the structure of the code and am almost ready to implement it on your website.

You just need to copy-paste from the below code and most important is converting text to binary in javascript code.

In simple words below is the process to create words to binary values converter tool build using Javascript.

1. Add below CSS code in your website style
2. Copy HTML and paste it into your website where you want to show it.
3. Finally, add convert text to binary Javascript source code.
4. Check it’s working and then Congrats you have successfully created the tool script in blogger.

Text to Binary value converter website CSS code

.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;
    }

HTML for Converter tool

<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>

Convert text to binary javascript code

Copy below JavaScript code and paste it to your website template or page. Below javascript code is tested and working fine, above is an example of this tool.

If you want to modify anything then you can easily do that as the script is clean and understandable with no encrypted lines.

<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>
Finally, now you check and share your tool with everyone.