JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<div id="header">
    <input type=text />
    <button>Click Me!</button>
</div>
<div id="content"></div>

CSS

#header{
    border:2px dashed gray;
    height:50px;
    margin-bottom:5px;
}

button{
    background:lightgray;
    border:0;
    border-radius:5px;
    padding:5px;
    cursor:pointer;
}

button:hover{
    background:lightblue;
}

#content{
    border:2px dotted blue;
    min-height:200px;
}

JavaScript

SandBox = {

    create:function ( core, id ) {
         
        var CONTAINER = core.dom.query("#" + id);

        return {
        
            find : function ( el ) {
               return CONTAINER.query(el);
            },
            addEvent : function ( el, ty, fn ) {
                core.dom.bind(el, ty, fn);
            },
            
            notify : function ( obj ) {
            
               core.triggerEvent (obj);
            
            },
            listern : function ( obj ) {
                core.registerEvent(obj, id)
            }
        
        }
        
    }

};

var APP = (function(){
    
    var methods = {};

    return {
    
        create : function (el, fn) {
            
            if ( typeof fn === "function" ) {
            
                methods[el] = { create : fn, instance:null};
            
            }
            
        },
        start : function (id) {
           methods[id].instance =  methods[id].create( SandBox.create (this, id) );
           methods[id].instance.init();
        },
        startAll : function () {
            
            for ( m in methods ) {
                this.start(m);
            }
            
        },
        dom : {
        
            query : function (el,sel) {
                var El, that = this;
          
                if ( sel ) {
                    El = sel.find(el);
                } else {
                
                    El = $(el);
                
                }
                
                
                El.ret = El.get();
                El.length =  El.length;
                El.query = function (sel) {
                    return that.query(sel, El);
                }
                
                return El;
                
            },
            bind : function (el, ty, fn) {
                
                $(el).bind(ty, fn);
                
            }
        
        },
        triggerEvent : function (obj) {
         ...