JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<label>Type your json object here</label>
<input id="hashThis" value="" />
<label>Copy this</label>
<input id="base64">

CSS

body {padding: 20px}
label {display:block; font: 13px/16px helvetica; }
input {width: 95%; font-size: 18px;padding: 3px;}

JavaScript

var hash = $('hashThis');
var based = $('base64');
hash.addEvent('keyup', function (e) {
    var base64 = base64Encode(this.value);
    based.set('value',encodeURIComponent(base64));
})



/* Base64 conversion methods.
 * Copyright (c) 2006 by Ali Farhadi.
 * released under the terms of the Gnu Public License.
 * see the GPL for details.
 *
 * Email: ali[at]farhadi[dot]ir
 * Website: http://farhadi.ir/
 */

//Encodes data to Base64 format
function base64Encode(data){
    if (typeof(btoa) == 'function') return btoa(data);//use internal base64 functions if available (gecko only)
    var b64_map = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
    var byte1, byte2, byte3;
    var ch1, ch2, ch3, ch4;
    var result = []; //array is used instead of string because in most of browsers working with large arrays is faster than working with large strings
    var j=0;
    for (var i=0; i<data.length; i+=3) {
        byte1 = data.charCodeAt(i);
        byte2 = data.charCodeAt(i+1);
        byte3 = data.charCodeAt(i+2);
        ch1 = byte1 >> 2;
        ch2 = ((byte1 & 3) << 4) | (byte2 >> 4);
        ch3 = ((byte2 & 15) << 2) | (byte3 >> 6);
        ch4 = byte3 & 63;
        
        if (isNaN(byte2)) {
            ch3 = ch4 = 64;
        } else if (isNaN(byte3)) {
            ch4 = 64;
        }

        result[j++] = b64_map.charAt(ch1)+b64_map.charAt(ch2)+b64_map.charAt(ch3)+b64_map.charAt(ch4);
    }

    return result.join('');
};

//Decodes Base64 formated data
function base64Decode(data){
    data = data.replace(/[^a-z0-9\+\/=]/ig, '');// strip none base64 characters
    if (typeof(atob) == 'function') return atob(data);//use internal base64 functions if available (gecko only)
    var b64_map = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
    var byte1, byte2, byte3;
    var ch1, ch2, ch3, ch4;
    var result = []; //array is used instead of string because in most of browsers working with large arrays is faster than...