JSFiddle - React, Tailwind, and code Playground

by Johan Vandeplas

HTML

<span class="member-text"> <p> We can onboard <span class="max-members">0</span> companies per month.
<br>There are <span class="members"></span> companies onboarded this month so far.</p></span>

JavaScript

var minMembers = 5,
  maxMembers = 14;
debugger;
$(".max-members").text(maxMembers);

var getMembers = function() {
  var members = 0,
    lastDayOfMonth = (new Date(new Date().getFullYear(), 2, 0)).getDate(),
    month = (new Date()).getMonth(),
    day = (new Date()).getDate();

  try {
    data = JSON.parse(localStorage.getItem("members"));
    if (data.month == month) {
      members = data.members;
    }
  } catch (e) {
    members = 0;
  }

  if (!members || members < minMembers) {
    members = Math.floor(maxMembers * day / lastDayOfMonth);
    members = Math.max(minMembers, members);
  }
  
	try {
    localStorage.setItem("members", JSON.stringify({
      month: month,
      members: members
    }));
	} catch (e) {}
  
  return members;
},
addMember = function() {
	var members = getMembers(),
   month = (new Date()).getMonth();
   
  members = Math.min(members + 1, maxMembers);
  
  try {
    localStorage.setItem("members", JSON.stringify({
      month: month,
      members: members
    }));
	} catch (e) {}
  
  return members;
}

$('.members').text(getMembers());

setTimeout(function() {
  $('.members').text(addMember());
}, 6000);