JSFiddle - React, Tailwind, and code Playground

by dreamyguy

HTML

<a href="#">Signed up 13/22</a>
<a href="#">Signed up 10/22</a>
<a href="#">Signed up 2/22</a>
<a href="#">Signed up 22/22</a>
<a href="#">Signed up 8/22</a>
<a href="#">Signed up 0/22</a>

CSS

a { display: block }
/*
.status { display: inline-block; height: 12px; width: 12px; }
.on { background: yellowgreen; }
.off { background: yellow; }
.empty { background: red; )
.full { background: #6C9023; )
*/

JavaScript

$('a').each( function () {
    var string = $(this).text();
    var status = string.split('/');
    var attendees = status[0];
    var capacity = status[1];
    var attendees = attendees.replace('Signed up ', '');
    // if nr of attendees is equal or greater than the third of the total capacity, show status as green, if not show as red
    if (attendees == 0) {
        $(this).append(' <span class="status empty"></span>');
    } else if ((attendees > (capacity / 3)) && (attendees < capacity)) {
        $(this).append(' <span class="status on"></span>');
    } else if (attendees === capacity) {
        $(this).append(' <span class="status full"></span>');
    } else {
        $(this).append(' <span class="status off"></span>');
    }
});
$('.status').css({ 'display' : 'inline-block', 'height' : '12px', 'width' : '12px' });
$('.on').css('background','yellowgreen');
$('.off').css('background','yellow');
$('.empty').css('background','red');
$('.full').css('background','#6C9023');