JSFiddle - React, Tailwind, and code Playground

by androidyou

HTML

<main>
    <label><span>Your Name</span><input id='name' type="text"/></label>
    <br/>
    <label> <button >Check</button></label>    
        <br/>
    <label><span>msg</span><div id='msg'  ></div></label>
    <br/>
</main>

JavaScript

$(document).ready(function()
                  {
                      $.fn.areyouhappy=function(options)
                      {
                          //default options
                          var q=$.extend({name:"DefautGuy"},options);                            
                          
                          this.text('I AM happy ' + q.name).hide().fadeIn(300);
                      }
                      
                      
                      $("button").on("click",function(event)
                                     {
                                         if($("#name").val())
                                             $("#msg").areyouhappy({name:$("#name").val()});
                                         else
                                             $("#msg").areyouhappy(); //default options
                                                                    
                                     }
                      
                                    )})