JSFiddle - React, Tailwind, and code Playground

by Sunny Sharma

HTML

<script src="https://rawgithub.com/carlo/jquery-base64/master/jquery.base64.min.js"></script>
<script src="https://rawgithub.com/dankogai/js-deflate/master/rawdeflate.js"></script>
<script src="https://rawgithub.com/dankogai/js-deflate/master/rawinflate.js"></script>
<div><label for="myinput">Input: </label><textarea id="myinput">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu quam nulla. Donec tempus convallis arcu, et placerat ipsum porta sit amet. Donec scelerisque, libero at congue venenatis, augue est molestie nulla, at bibendum odio enim non mi. Aliquam iaculis accumsan erat ac facilisis. Vestibulum varius turpis vitae turpis imperdiet elementum. Fusce imperdiet dui sed erat commodo eu hendrerit augue tempus. Mauris varius ipsum nulla, in interdum mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Maecenas diam mauris, blandit ac semper tincidunt, fermentum ac urna. Duis id sapien eros, nec mollis erat. Fusce eget est sed lacus sollicitudin molestie tincidunt vel arcu. Suspendisse molestie nisl in urna scelerisque sed sagittis tortor tincidunt. Nulla imperdiet, est sed condimentum dignissim, nibh risus venenatis tortor, non commodo tortor justo in sapien. Aenean molestie scelerisque orci sit amet placerat. Ut pulvinar vestibulum lacus, ac ullamcorper libero tempor a.

Donec et tincidunt eros. Nulla facilisi. Vivamus consequat, elit a fermentum elementum, sapien purus gravida nisi, sed vulputate libero risus in mauris. Nunc sodales rutrum eros quis condimentum. Sed nulla dolor, feugiat in euismod id, pellentesque ac ipsum. Etiam id dolor ac dui tincidunt rutrum. Praesent quis erat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Fusce congue neque ac sem facilisis sit amet tristique ante tristique. Vivamus et risus sem. Suspendisse nec placerat dui. Curabitur sed tellus et massa vestibulum consectetur. Mauris ac dolor massa. Nunc consectetur...

CSS

label {
    display: block;
    margin-top: 1em;
}
textarea {
    width: 400px;
    height: 200px;
}

div, span {
    margin: 1em;
}

JavaScript

function encode(str) {
    return $.base64.encode(RawDeflate.deflate(unescape(encodeURIComponent(str))));
}

function decode(str) {
    return decodeURIComponent(escape(RawDeflate.inflate($.base64.decode(str))));
}


$('#encode').click(function() {
    var str = $('#myinput').val(),
        encoded = encode(str),
        decoded = decode(encoded);

    //alert($.base64.decode(encoded));  //uncomment to see raw deflated value;
    $('#myinput_length').text('' + str.length);
    $('#output').val(encoded);
    $('#myoutput_length').text('' + encoded.length);
    $('#reconstructed').val(decoded);
    $('#reconstructed_length').text('' + decoded.length);

});