JSFiddle - React, Tailwind, and code Playground

by javad ebrahimi

HTML

<div class="foo"></div>
<div class="foo" id="highlight"></div>
<div class="bar"></div>

CSS

body {
          margin: 0;
          padding: 50px;
          line-height: 40px;
          font-family: sans-serif;
          font-size: 24px;
          color: #555;
          background: #fdfdfd;
        }
        
        .highlight {
          color: #2196F3;
          display: inline-block;
          border-radius: 3px;
          background: #f2f2f2;
        }
        
        div {
          padding: 7px 10px;
        }

JavaScript

(function($) {

  "use strict"
  var opt;

  $.fn.extend({
    myplugin: function(options) {
      if (!options || typeof(options) == 'object') {
        opt = $.extend({}, $.fn.myPlugin.defaults, options);
      }

      this.each(function() {
        new $(this).myPlugin(options);
      });
      return;
    }
  });

  $.fn.myPlugin = function(methodOrOptions) {

    var elem = this;

    var method = {
      init: function() {
        $(elem).text(opt.text);
      },
      highlight: function() {
        $(elem).addClass("highlight");
      }
    };

    if (method[methodOrOptions]) {
      return method[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
      return method.init.apply(this, arguments);
    } else {
      $.error('method ' + methodOrOptions + 'not exist . . . :( . . .');
    }

  };

  $.fn.myPlugin.defaults = {
    text: "welcome Dear user"
  };

})(jQuery);

$(function() {

  $(".foo").myplugin();

  $(".bar").myplugin({
    text: "welcome & Have Good Time . . ."
  })

  $("#highlight").myplugin("highlight");

})