JSFiddle - React, Tailwind, and code Playground

by neilime

HTML

<input type="button" id="launchButton" value="Test it">
<div id="test"></div>
<div id="result">
    <h3>Result</h3>
    <ul></ul>
</div>

CSS

#test{
    border : 2px solid #3D668F;
    padding : 5px;
    margin-bottom:5px;
}

#result{
    border : 2px solid #3D8F4A;    
    margin-top:5px;
}

#result > h3{
   background-color : #3D8F4A;
   color : #FFFFFF;
   padding : 3px;
}

JavaScript

//Declare myClass 
function myClass(oOptions){
    this.options = {
        'name':'',
        'key':''
    };
        
    this.$events = {};
    this.element = null;
    this.firstParam = null;
        
    this.initialize = function(oOptions){       
        for(var type in oOptions){
            if('function' === typeof(oOptions[type]) && (/^on[A-Z]/).test(type)){
                var typeWithoutOn = type.replace(/^on([A-Z])/, function(full, first){
                    return first.toLowerCase();
                });
                
                this.$events[typeWithoutOn ] = this.$events[typeWithoutOn ] || [];
                this.$events[typeWithoutOn].push(oOptions[type]);
            }
            else if('undefined' !== typeof(this.options[type])){
                this.options[type] = oOptions[type];
            }
        }
        
        this.element = document.createElement('input');
        this.element.type = 'text';
        
        for(var type in this.$events){ 
            var fFunc = this.$events[type][0].bind(this); 
            this.element.addEvent(type,fFunc); 
        } 
    };
    
    this.initialize(oOptions);
};

function mySecondClass (oOptions){
    this.options = {
        'myClasses':[]
    };
        
    this.$events = {};
    this.mainElement = null;    
        
    this.initialize = function(oOptions){       
        for(var type in oOptions){
            if('function' === typeof(oOptions[type]) && (/^on[A-Z]/).test(type)){
                var typeWithoutOn = type.replace(/^on([A-Z])/, function(full, first){
                     return first.toLowerCase();
                 });
                
                this.$events[typeWithoutOn ] = this.$events[typeWithoutOn ] || [];
                this.$events[typeWithoutOn].push(oOptions[type]);
            }
            else if('undefined' !== typeof(this.options[type])){
                this.options[type] = oOptions[type];
            }
        }
        
       ...