JSFiddle - React, Tailwind, and code Playground

by Emerson Marini

HTML

<span class="channel">
    <span class="channum">01</span>
    TV1
</span>
<span id="tv1" class="showing">
    <span class="starttime">22:30</span> 
    Program Title
    <span class="progresscontainer">
        <span class="progressbar" style="width:50%"></span>
    </span>
    <br />
    <span class="endtime">23:00</span> Program Title
</span>
<hr />
<span class="channel">
    <span class="channum">02</span>
    TV2
</span>
<span id="tv2" class="showing">
    <span class="starttime">22:15</span> 
    Program Title
    <span class="progresscontainer">
        <span class="progressbar" style="width:0%"></span>
    </span>
    <br />
    <span class="endtime">23:30</span> 
    Program Title
</span>
<hr />
<span class="channel">
    <span class="channum">03</span>
    TV3
</span>
<span id="tv3" class="showing">
    <span class="starttime">21:45</span> 
    Program Title
    <span class="progresscontainer">
        <span class="progressbar" style="width:75%"></span>
    </span>
    <br />
    <span class="endtime">22:30</span> 
    Program Title
</span>
<hr />
Now: <span class="now"></span>

CSS

.showing {
    display: block;
}

JavaScript

$(function() {
    var now = new Date();
    
    // For easy comparison.
    now.setSeconds(0);
    now.setMilliseconds(0);
    
    // For debugging.
    $('.now').text(now.getHours() + ':' + now.getMinutes());
    
    $('.showing').each(function(){
        // Finding out the start time.
        var start = new Date(
            now.getFullYear(), 
            now.getMonth(), 
            now.getDate(), 
            parseInt($(this).find('.starttime').text().split(':')[0], 10), 
            parseInt($(this).find('.starttime').text().split(':')[1], 10), 
            0, 
            0);
        
        // Finding out the end time.
        var end = new Date(
            now.getFullYear(),
            now.getMonth(), 
            now.getDate(),
            parseInt($(this).find('.endtime').text().split(':')[0], 10), 
            parseInt($(this).find('.endtime').text().split(':')[1], 10), 
            0, 
            0);
        
        if (now <= end && now >= start) {        
            var epg = $(this).attr('id') + '.php';
            
            // Removed for debugging.
            //$(this).load(epg);
            
            // For debugging.
            $(this).html('<b>' + epg + '</b>');
        }
    });
});