JSFiddle - React, Tailwind, and code Playground

by 533135

HTML

<div id = left>
   our guy here....(TOPIC)
    
    <input id = topicID type = text/>
        <button id = tpi >Inform about my changes  to all who are subscribed to me </button>
</div>
<div id = rit> 
    click to subscribe for  TOPIC
   <button id = mngr>Manager</button>    
</div>
<div id = rit> 
    click to subscribe for  TOPIC
    <button id = gf>GF</button>
 <div>

CSS

#left{
    height:200px;width:200px;
    border:1px solid green;
    float:left
}
#rit{
    margin:5px 10px;
    float:left;
    height:200px;width:200px;
    border:1px solid green;
    
}

JavaScript

var topics = {};
          jQuery.Topic = function( id ) {
            var callbacks,  method,
        topic = id && topics[ id ];
          if ( !topic ) {
          callbacks = jQuery.Callbacks();
          topic = {
          publish: callbacks.fire,
          subscribe: callbacks.add,
          unsubscribe: callbacks.remove
          };
          if ( id ) {
          topics[ id ] = topic;
          }
          }
          return topic;
          };

$(document).ready(function(){
var $mngr = $("#mngr") ,$gf = $("#gf"),$inf = $("#tpi");
    $mngr["click"](function(){$.Topic( "#topicID" ).subscribe( f1 )});
    $gf["click"](function(){$.Topic( "#topicID" ).subscribe( f2 )});
    $inf["click"](function(){
        
        $.Topic( "#topicID" ).publish( $("#topicID").val() )
    });	    
});
function f1(msg){
        if(msg == "sleeping")
	$("#mngr").after("<span>wake up and do work</span>")
    else
        $("#mngr").after("<span>i dont bother </span>")	
		}
function f2(msg){
	if(msg == "talking")
	  $("#gf").after("<span>warning ....</span>")	
      else
          	  $("#gf").after("<span>i dont bother </span>")	
		}