JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<div id='channel-list'></div>
<div id='prog-grid'></div>

CSS

redClass {
    background-color:red;
}

JavaScript

channel_list = [{_programs:[{_hour:1,_minutes:1,_title:1,_cat:1,_duree:1,_icon:1,_desc:1,_star:1},                           {_hour:2,_minutes:1,_title:1,_cat:1,_duree:1,_icon:1,_desc:1,_star:1}]}];

function displayChannels() {
    $.each(channel_list, function (index, channel) {
        debugger;
        //Make the code for the channel
        var code_channel = "<li><img src='" + channel._icon + "'/></li>";
        //Display it
        $("#channel-list").append(code_channel);
        //Open a list for the channel's program list
        var code_prog_list = "<ul class='channel_row'>";
        //Add each program in it as a li each time
        $.each(channel._programs, function (index, programme) {
            code_prog_list += "<li><div class='text-left'>" + "<h5>" + programme._hour + ":" + programme._minutes + "</h5>" + "<h6>" + programme._title + "</h6>" + "<p>" + programme._cat + " (" + programme._duree + "mn)" + "</p></div>" + "<div class='programme_icon'><img src='" + programme._icon + "'' alt=''/></div>" + "<div class='desc'>" + programme._desc + "</div>" + "<div class='star'>" + programme._star + "</div>";
            code_prog_list += "</li>";
            //$(this).children().width(programme._width);
            //$(this).css( "width", programme._width + 'px');
            //$( "#channel_row li").width(programme_width);
            //$(this).children('.channel_row li').width(programme._width);
        });
        //Close the list
        code_prog_list += "</ul>";
        //Display it
        $("#prog-grid").append(code_prog_list);
        //$("#prog-grid ul").last().resizePrograms();
    });
    $("#loader").hide();
    //scrollTime();
    $(".channel_row li").on("click", showPopup);
    $("#popup").on("click", function () {
        $("#popup").toggle(500);
    });
}

function showPopup() {
    var x = "<div id='close_button'></div>";
    $("#popup").html(x).show(500);
    $(".channel_row li").css('background-color','');
   ...