JSFiddle - React, Tailwind, and code Playground

by AndyE

HTML

<html>
    <head>       
        <!-- general style -->
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="top1"></div>
        <div id="top2"></div>
        <div id="top1"></div>
        <div id="mid1"></div>
        <div id="mid2"></div>
        <div id="mid3"></div>
        <div id="bot1"></div>
        <div id="bot2"></div>
        <div id="bot3"></div>
    </body>
</html>

JavaScript

/* Tested */
Function.prototype.beforeStatic = function(methodName, hookFunc) {
    var oldFunc = this[methodName];
    this[methodName] = function() {
        hookFunc.apply(this, arguments);
        return oldFunc.apply(this, arguments);
    };
};
Function.prototype.afterStatic = function(methodName, hookFunc) {
    var oldFunc = this[methodName];
    this[methodName] = function() {
        var oldFuncResult = oldFunc.apply(this, arguments);
        var newArgsArr = Array.prototype.slice.call(arguments);
        newArgsArr.push(oldFuncResult);
        hookFunc.apply(this, newArgsArr);
        return oldFuncResult;
    };
};
Function.prototype.beforeConstruction = function(hookFunc) {
    var oldObj = this;
    var newObj = function() {
        hookFunc.apply(oldObj, arguments);
        oldObj.apply(this, arguments);
    }
    newObj.prototype = oldObj.prototype; //copy prototype fields of oldObj
    newObj.prototype.constructor = newObj; // Except constructor, we kind of need that
    
    for (var key in oldObj) { //copy static fields of oldObj
        if (oldObj.hasOwnProperty(key)) newObj[key] = oldObj[key];
    }
    return newObj;
};
Function.prototype.afterConstruction = function(hookFunc) {
    var oldObj = this;
    var newObj = function() {
        var old = new oldObj();
        old.constructor = newObj;

        hookFunc.apply(oldObj, arguments);
        return old;
    }
    newObj.prototype = oldObj.prototype; //copy prototype fields of oldObj
    newObj.prototype.constructor = newObj; // Except constructor, we kind of need that

    for (var key in oldObj) { //copy static fields of oldObj
        if (oldObj.hasOwnProperty(key)) newObj[key] = oldObj[key];
    }
    return newObj;
};

//Main: handles the main application logic

var Main = function() {
    //on main construction
};

//static methods
Main.init = function() {
    console.log("Main init");
}
    
//SourceSubmissionForm: creates a form used for source submission

var SourceSubmissionForm...