JSFiddle - React, Tailwind, and code Playground

by Mohan Ravi

HTML

<script>
    $(function() {

      var $a = $('a').Coloring();
      var $div = $('div').Coloring({ color: '#F0F', backgroundColor: '#FFF' });
      var $div = $('strong').Coloring({ color: '#gold', backgroundColor: 'pink' });
    });
</script>
<a>hello links </a>
<a>hello links</a>
<hr>
<div>hello div</div>
<div>hello div</div>

<hr>
<strong>Hello I am strong</strong>
<strong>Hello I am strong</strong>

CSS

a,strong,div{
  display: block;
  margin:2px;
}

TypeScript

module Coloring {
  interface IGreenifyOptions {
    color: string;
    backgroundColor: string;
  }

  export class GreenifyOptions implements IGreenifyOptions {
    // Fields
    color: string;
    backgroundColor: string;

    constructor(color: string, backgroundColor: string) {
      this.color = color;
      this.backgroundColor = backgroundColor;
    }
  }

  export class Greenify {
    // Fields
    element: JQuery;
    options: GreenifyOptions;

    constructor(element: JQuery, options: GreenifyOptions) {
      this.element = element;
      this.options = options;

      this.OnCreate();
    }

    OnCreate() {
      this.element.css('color', this.options.color).css('background-color', this.options.backgroundColor);
    }
  }
}


//jquery plugin wrapper.
;(function(w,$){
    if(!$) return false;
    
    $.fn.extend({
        Coloring: function(opts){
						
            //defaults
            var defaults: Coloring.GreenifyOptions = new Coloring.GreenifyOptions('#0F0', '#000');
            
            var opts = $.extend(defaults, opts);
            
            return this.each(function(){
                var o = opts;
                var obj = $(this);
                new Coloring.Greenify(obj,o);
                
            });
        }        
    });
})(window, jQuery);