JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/js/ratchet.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet-theme-ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.min.css">
<header class="bar bar-nav"> <a class="icon icon-left-nav pull-left hide" onclick="loadLeagues()" id="back"></a>

     <h1 class="title">Dota2</h1>

</header>
<div class="content">
    <ul class="table-view" id="leagues">
        
    </ul>
</div>

CSS

.hide {
    display: none;
}

CoffeeScript

leaguesData = false
tournamentsData = false

window.loadLeagues = ->
    $('#leagues').html('')
    $('#back').addClass('hide')
    $.getJSON "http://mystalia.com/dota2/tournaments", (json) ->
        tournamentsData = json
        $.getJSON "http://mystalia.com/dota2/leagues", (json) ->
            leaguesData = json
            availableLeagues = []
            for tournament in tournamentsData
                for league in leaguesData when league.id is tournament.league_id
                    unless availableLeagues.indexOf(league.id) > -1
                        availableLeagues.push(league.id)
                        html = "<li class=\"table-view-cell media\"><a class=\"navigate-right\" onclick=\"loadTournaments(#{league.id})\"><img width=\"80\" class=\"media-object pull-left\" src=\"#{league.image}\" /><div class=\"media-body\">#{league.name}<p>#{league.date}</p></div></a></li>"
                        $('#leagues').append html
    
window.loadTournaments = (lid) ->
    $('#leagues').html('')
    $('#back').removeClass('hide')
    for tournament in tournamentsData when tournament.league_id == lid
        team1 = tournament.teams[0] || { logo: '', team_name: '' }
        team2 = tournament.teams[1] || { logo: '', team_name: '' }
        
        html = "<li class=\"table-view-cell media\"><a class=\"navigate-right\"><img width=\"80\" class=\"media-object pull-right\" src=\"#{team2.logo}\" /><img width=\"80\" class=\"media-object pull-left\" src=\"#{team1.logo}\" /><div class=\"media-body\">#{team1.team_name} vs #{team2.team_name}<p>#{tournament.comment}</p></div></a></li>"
        $('#leagues').append html

loadLeagues()