JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="sidebar-widget">
  <ul id="present-users" class="collapsible fixed-max clear-both">
    <li class="present-user user-container user-15377381 arriving" id="present-user-15377381" style="opacity: 0.999845; visibility: hidden; width: 8.48352px;">
      <div class="avatar"><img class="user-gravatar32" width="32" height="32" alt="Oscar Cardoso Garcia" title="Oscar Cardoso Garcia" src="https://i.stack.imgur.com/QFR7d.jpg?s=42&amp;g=1"></div><span class="data"><span class="last-activity-time">1624079173.534</span></span>
    </li>
    <li class="present-user user-container user-9821583" id="present-user-9821583" style="opacity: 0.897246;">
      <div class="avatar"><img class="user-gravatar32" width="32" height="32" alt="sBot" title="sBot" src="https://i.stack.imgur.com/ixXG4.png?s=42&amp;g=1"></div>
			<span class="data"><span class="last-activity-time">1624078739</span></span>
    </li>
    <li class="present-user user-container user-965146" id="present-user-965146" style="opacity: 0.896774;">
      <div class="avatar"><img class="user-gravatar32" width="32" height="32" alt="Shree" title="Shree" src="https://i.stack.imgur.com/vSVWj.jpg?s=42&amp;g=1"></div><span class="data"><span class="last-activity-time">1624078737</span></span>
    </li>
    <li class="present-user user-container user-6294609" id="present-user-6294609" style="opacity: 0.555357;">
      <div class="avatar"><img class="user-gravatar32" width="32" height="32" alt="Queen" title="Queen" src="https://i.stack.imgur.com/58jhk.jpg?s=42&amp;g=1"></div><span class="data"><span class="last-activity-time">1624077291</span></span>
    </li>
    <li class="present-user user-container user-7481043" id="present-user-7481043" style="opacity: 0.15;">
      <div class="avatar"><img class="user-gravatar32" width="32" height="32" alt="Generic Bot" title="Generic Bot"...

JavaScript

var roomModerator = ["Shree", "sBot", "sss"];
var msg = '';
var count = 0;

$("#present-users > .present-user").each(function(index) {

  var uName = $(this).find('.avatar > img').attr('title');
  var aTime = $(this).find('.last-activity-time').text();
  aTime = timeDifference(new Date(aTime * 1000));

  var cf = roomModerator.includes(uName);
  if (cf) {
    msg += uName + "(last-activity-time: " + aTime + ") ";
    count++
  }
});



//nsole.log(msg + '---' + 'Count:' + count);
//nsole.log('There are currently ' + count + ' RO in this room. ' + msg);
//There are currently two administrators 
//Credit goes to "https://stackoverflow.com/a/6109105/965146"


var rndl= Math.floor(Math.random() * $('#present-users > .present-user').length );
var rndli= $('#present-users > .present-user').get(rndl);
var blame =$(rndli).find('.avatar > img').attr('title');
console.log(blame);


function timeDifference(activeTime) {
  var current = new Date();
  var msPerMinute = 60 * 1000;
  var msPerHour = msPerMinute * 60;
  var msPerDay = msPerHour * 24;
  var msPerMonth = msPerDay * 30;
  var msPerYear = msPerDay * 365;

  var elapsed = current - activeTime;

  if (elapsed < msPerMinute) {
    return Math.round(elapsed / 1000) + ' seconds ago';
  } else if (elapsed < msPerHour) {
    return Math.round(elapsed / msPerMinute) + ' minutes ago';
  } else if (elapsed < msPerDay) {
    return Math.round(elapsed / msPerHour) + ' hours ago';
  } else if (elapsed < msPerMonth) {
    return 'approximately ' + Math.round(elapsed / msPerDay) + ' days ago';
  } else if (elapsed < msPerYear) {
    return 'approximately ' + Math.round(elapsed / msPerMonth) + ' months ago';
  } else {
    return 'approximately ' + Math.round(elapsed / msPerYear) + ' years ago';
  }
}