JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<script src="http://www.mallea.net/js/channeldata.js"></script>
<div id="wrapper">
    <div class="header">Live Now</div>
    <ul id="streams"></ul>
</div>

CSS

body {
    font-family: Helvetica, Arial, serif;
    font-size: 1em;
}

h3 {
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
}

#wrapper {
    width: 60%;
}

.header {
    background: #CD423D url(http://wellplayed.org/assets/img/sidebar_header_bg.png);
    border: 1px solid #A42B27;
    color: white;
    font-size: 1em;
    font-weight: bold;
    padding: 7px;
    text-align: center;
}

ul#streams {
    font-size: .9em;
}

ul#streams li {
    padding: 5px;
    border-bottom: 1px dashed #B9C3C5;    
}

ul#streams li:hover {
    background-color: #F7F7F7;
}

ul#streams li a {
    display: block;
    color: #333;    
    text-decoration: none;
}

.viewers {
    background-image: url(http://wellplayed.org/assets/img/icon/sidebar_live.png);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    color: #CD423D;
    padding-left: 4px;
    padding-right: 10px;
    float: right;    
}

JavaScript

function t (s, d) {
    for(var p in d) {
        s = s.replace(new RegExp('{' + p + '}', 'g'), d[p]);
    }
    return s;
}

function displayChannels (channeldata) {
    var htmltemplate = '<li><a href="http://wellplayed.org/{slug}">{name}<span class="viewers">{viewers}</span></a></li>',
        len = channeldata.length,
        stream = null,
        temp = null,
        i = 0;
    
    for (; i < len; i++) {
        
        stream = channeldata[i];
        
        temp = t(htmltemplate, {
            name: stream.name,
            biography: stream.biography,
            description: stream.description,
            hotness: stream.hotness,
            viewers: stream.viewers,
            slug: stream.slug
        });
        
        $('#streams').append( $(temp) );
    }
}

displayChannels(channeldata);