JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<ul id="console"></ul>

CSS

#console {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 5px;
    background-color: #303030;
    color: #7DB482;
    font-size: 14px;
    font-family: "Lucida Console", Monaco, monospace;
}

JavaScript

var Application = (function(app) {
    app.constants = app.constants || {};
    app.constants.PRINT_OBJ_TITLE = '[Printing an object]';
    
    app.console = {
        constants: {
            SEPARATOR: new Array(50).join('-')
        },
        output: document.getElementById('console'),
        log: function() {
            var li = document.createElement('li');
            li.innerHTML = Array.prototype.join.call(arguments, '');
            this.output.appendChild(li);
        },
        printSeparator: function() {
            this.log(this.constants.SEPARATOR);
        }
    };
    
    app.printObj = function(obj) {
        this.console.log(app.constants.PRINT_OBJ_TITLE);
        for(var prop in obj) {
            if(obj.hasOwnProperty(prop)) {
                var propType = (typeof obj[prop] == 'function')
                    ? 'function'
                    : 'property';
                this.console.log(propType, ': ', prop);
            }
        }
        this.console.printSeparator();
    };
    
    app.Stuff = {
        myFunc: function() {
            app.console.log('Inside app.Stuff.myFunc: ',
                            'DynamicObject.foo called');
            return 'myFunc return value';
        },
        myObj: {
            a: 'hello',
            b: 'world'
        },
        myStr: 'Hello World!'
        
    };
    
    app.DynamicObject = function(stuff) {
        this.stuff = stuff;
    };
    
    app.DynamicObject.prototype.get = function(prop) {
        if(!this.stuff.hasOwnProperty(prop)) {
            return undefined;
        }
        var item = this.stuff[prop];
        switch(typeof item) {
            case 'string':
                return item;
            case 'object':
                app.printObj(item);
                return item;
            case 'function':
                return item.call(Array.prototype.slice.call(arguments, 1));
        }
    };
    
    return app;
})(Application || {});


var app = Application,
  ...