JSFiddle - React, Tailwind, and code Playground

by Bernat Comerma

HTML

<h4><span id="lbCtClicks">0</span> / 5 (Clicks). Last click @: <span id="lbLastClick"></span></h4>
<button id="btClick">Click me</button>

JavaScript

var MAX_CLICKS = 5

/* Module 1 ---------------------------------------------------- */

var ctClicks = 0;

function ClickOn_btClick(e) 
{
  var _data = {
    clicksCounter: ++ctClicks,
    From: 'Module 1'
  };
  $(document).trigger('CtClickEvt', [_data, ClickProcessCallback]);
}

$('#btClick').on('click', ClickOn_btClick);

function ClickProcessCallback(pIntoBounds, pDate) 
{
  if (pIntoBounds) {
    $('#lbCtClicks').text(ctClicks);
    $('#lbLastClick').text(pDate.toUTCString());
  }
  if (ctClicks == MAX_CLICKS) {
    $('#btClick').prop('disabled', true);
  }
}

/* Core Business Rules Module ----------------------------------------------  */

function CtClickEvtFunc(e, pData, pCallback) 
{
  pCallback(pData.clicksCounter <= MAX_CLICKS, new Date());
}

$(document).on('CtClickEvt', CtClickEvtFunc);