JSFiddle - React, Tailwind, and code Playground

by potatosalad

HTML

<div>
    <label for="input">String Input:</label> <input id="input" name="input" type="text" value="hello world!" />
    <button onclick="blobtest.string2blob();" type="button">String -> Blob</button>
</div>
<div id="input-results"></div>
<div id="output-results"></div>

JavaScript

(function(root) {
    var blobtest = {
        cache: null
    };

    blobtest.updateView = function updateView(selector, cache) {
        var results = $(selector);
        results.empty();
        
        var dl = $('<dl></dl>'),
            dtData = $('<dt><strong>String Data</strong></dt>'),
            ddData = $('<dd><code></code></dd>'),
            dtChars = $('<dt><strong>Uint16Array Data</strong></dt>'),
            ddChars = $('<dd><code></code></dd>'),
            dtBuffer = $('<dt><strong>ArrayBuffer Data</strong></dt>'),
            ddBuffer = $('<dd><code></code></dd>'),
            dtBlob = $('<dt><strong>Blob Data</strong></dt>'),
            ddBlob = $('<dd><code></code></dd>');
        
        $('code', ddData).text(cache.data);
        $('code', ddChars).text(JSON.stringify(Array.apply([], cache.chars)));
        $('code', ddBuffer).text(JSON.stringify({byteLength: cache.buffer.byteLength}));
        $('code', ddBlob).text(JSON.stringify({size: cache.blob.size, type: cache.blob.type}));
        dl.append(dtData, ddData, dtChars, ddChars, dtBuffer, ddBuffer, dtBlob, ddBlob);
        results.append(dl);
        
        if (results.is('#input-results')) {
            $('#output-results').empty();
            var outputButton = $('<button type="button">Blob -> String</button>');
            results.append(outputButton);
        
            outputButton.on('click', blobtest.blob2string);
        }
        
        return true;
    };
    
    blobtest.string2blob = function string2blob() {
        var input, data, uint16Array, arrayBuffer, blob;
        
        input = $('#input');
        data  = input.val();

        arrayBuffer = new ArrayBuffer(data.length * 2);
        uint16Array = new Uint16Array(arrayBuffer);
        for (var i=0, dataLen=data.length; i<dataLen; i++) {
            uint16Array[i] = data.charCodeAt(i);
        }
        blob = new Blob([arrayBuffer]);
        
        blobtest.cache = {
            input: {
            ...