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 
 var myClass = new Class({ 
    Implements:[Options,Events], 
    options : { 
        'name':'', 
        'key':null 
    }, 

    element : null, 
    firstParam : null, 

    initialize : function(options){ 
         this.setOptions(options); 
         this.element = new Element('input',{ 
             'type':'text' 
         }); 

        if(Object.getLength(this.$events)){ 
             for(type in this.$events){ 
                 var fFunc = this.$events[type][0].bind(this); 
                 this.element.addEvent(type,fFunc); 
             } 
         }; 
     } 
}); 
 
//Declare mySecondClass 
var mySecondClass = new Class({ 
     Implements: [Options, Events], 
     options: { 
         'myClasses':[] 
     }, 

    mainElement : null, 

    initialize: function(options){ 
         this.setOptions(options); 
         this.mainElement = new Element('div').inject(document.id('test')); 
         this.myFunction(); 
         return this; 
     }, 

    myFunction : function(){ 
         this.options.myClasses.each(function(tmpMyClass,key){ 
             log('update '+tmpMyClass.options.name+' => '+key); 
             console.log('update '+tmpMyClass.options.name+' => '+key); 
             tmpMyClass.options.key = key; 
             tmpMyClass.options.firstParam = key; 
             tmpMyClass.element.inject(this.mainElement); 
         },this); 
     } 

}); 
 
//Launch myNewSecondClass 
document.id('launchButton').addEvent('click',function(){ 
    myNewSecondClass = new mySecondClass({ 
     'myClasses':[ 
         new myClass({ 
             'name':'first class', 
             'onBlur':function(that){ 
                 log('BLUR => first myClass options key : ',this.options.key); 
                 log('BLUR => first myClass param : ',this.firstParam); 
                 
                 console.log('BLUR => first myClass options key : ',this.options.key);
                 console.log('BLUR => first myClass param : ',this.firstParam); 
  ...