JSFiddle - React, Tailwind, and code Playground

by Aubrey Taylor

HTML

<h1>Decorator Example</h1>
<p class="mod"></p>
<p class="mod-decorated"></p>

CSS

h1{
 font-family: sans-serif;
 font-weight:bold;
 font-size:25px;
 padding-bottom:15px;
 padding-left:10px;
 padding-top:10px;
}
p{
 font-family: Courier, sans-serif; 
 font-size: 13px;
 padding-left:10px;                
}

JavaScript

var Fiddle = Fiddle || {};

Fiddle.Module = function(spec, my){
    var self = {};
    my = my || {};

    var _cost = 1;

    function __new__(){
        self.cost = cost;
    }
    
    /* initialization */

    function __init__(){
        self.name = 'Fiddle.Module';
        
    }

    /* public methods */
    function cost(){
        return _cost;
    }


    // do not delete //
    __new__();
    __init__();
    return self;
    // #eo do not delete //
};

Fiddle.ModuleAddCost = function(module, amt){
    var _cost = module.cost();

    module.cost = function(){
        return _cost + amt;
    };

    return module;
};

// run test
!function(){
    
    var mod = Fiddle.Module();
    $('.mod').html('module original cost &rarr; ' + mod.cost());

    mod = Fiddle.ModuleAddCost(mod, 10);
    $('.mod-decorated').html('module decorated cost &rarr; ' + mod.cost());

}();