JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<button id="myButton">Alert Me</button>
<br/><br/>
<div id="myDiv"><//div>

CSS

.myCss {
    height:100px;
    background-color:yellow;
}

.myCss2 {
    height:100px;
    background-color:lightgreen;
    font-weight:bold;
    text-align:center;
    font-size:20px;
}

JavaScript

(function ($) {
    $.fn.extend({

        AlertMe: function (options) {
            var defaults = {
                alertMsg: 'Noting passed in option'
            }

            options = $.extend(defaults, options);
            var el = this.get(0);
            console.log(el.id);

            if (options.alertMsg) {
                alert(options.alertMsg);
            }
        },
        
          AddCss: function (options) {
            var defaults = {
              className: "",
                myText: ""
            }

            options = $.extend(defaults, options);
            var el = this.get(0);
          //  console.log(el.id);

            if (options.className) {
                $(el).toggleClass(options.className);
            }
              if (options.myText) {
                $(el).text(options.myText);
            }
        }
    });
})(jQuery);







$(document).ready(function () {
    
    $("#myDiv").AddCss({className: 'myCss', myText: "First Text"});
    
    $("button").click(function () {
        CustOptions = {
            alertMsg: "Div's class name changed"
        }
        $(this).AlertMe(CustOptions);
         $("#myDiv").AddCss({className: 'myCss2', myText: "Text is changed"});
    });
});