JSFiddle - React, Tailwind, and code Playground

by Ajay Bhosale

HTML

<script src="http://ace.c9.io/build/src/ace.js"></script>
    <table border="1" style="width:100%">
        <tr>
            <td colspan="2">
                <div id="parameters" style="width:100%;height:100px;"></div>
            </td>
        </tr>
        <tr>
            <td style="width:50%">
                <div id="maincode" style="width:100%;height:500px;">function binarySearch(key, array) {
    var low, high, mid, value;
    
    low = 0;
    high = array.length - 1;

    while (low <= high) {

        mid = Math.floor((low + high) / 2);
        value = array[mid];

        if (value < key) {
            low = mid + 1;
        }
        else if (value > key) {
            high = mid - 1;
        }
        else {
            return mid;
        }
    }
    return -1;
}</div>
            </td>
            <td style="width:50%">
                <div id="result" style="width:100%;height:500px;"></div>
            </td>
        </tr>
    </table>

CSS

body
        {
            font-family : Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace;
            font-size : 16px;
            margin:10px;
        }
        td
        {
            vertical-align : top;
        }
        td.variable
        {
            text-align : right;
            height:17px;
        }

JavaScript

if (typeof String.prototype.endsWith !== 'function') {
    String.prototype.endsWith = function (suffix) {
        return this.indexOf(suffix, this.length - suffix.length) !== -1;
    };
}

window.Container = (function () {
    function Container(properties, changedNotifier) {
        for (var propertyCounter = 0; propertyCounter < properties.length; propertyCounter++) {
            var property = properties[propertyCounter];
            this.__defineGetter__(property, Container.getter(property));
            this.__defineSetter__(property, Container.setter(property, changedNotifier));
        }
    }
    Container.getter = function (property) {
        return (function () {
            return this['_' + property];
        });
    };

    Container.setter = function (property, changedNotifier) {
        return (function (val) {
            if (changedNotifier) {
                changedNotifier(property, val);
            }
            this['_' + property] = val;
        });
    };
    return Container;
})();

window.ParameterManager = (function () {
    function ParameterManager(control) {
        this.control = control;
        this.currentParams = [];
    }
    ParameterManager.prototype.updateParameters = function (params) {
        if (this.currentParams.toString() == params.toString()) {
            return;
        }
        this.currentParams = params;
        var paramCode = '';
        
        for (var paramCounter = 0; paramCounter < params.length; paramCounter++) {
            paramCode += params[paramCounter] + ' = \'\';\r\n';
        }
        this.control.setValue(paramCode);
    };
    return ParameterManager;
})();

window.Result = (function () {
    function Result(maxlines) {
        this.resultByLine = new Array(maxlines + 1);
    }
    Result.prototype.setCurrentLine = function (lineNumber) {
        if (lineNumber >= this.resultByLine.length) {
            throw "Invalid Line";
        }
        this.currentLineNumber = lineNumber;
    };

  ...