JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="https://rawgithub.com/kentaromiura/e148a170a449cd79b487/raw/e2c203fe978b83f4ca8d1ba97633f5a5d50bd53b/jQuery.js"></script>
<script src="https://rawgithub.com/kentaromiura/e148a170a449cd79b487/raw/96d86ea81478f8a78126ee7a88c3e956fd495e4e/handlebars.js"></script>
<script src="https://rawgithub.com/kentaromiura/e148a170a449cd79b487/raw/5e5dfbd78500387afcfef7b28f5959a33fac1a7c/ember.js"></script>
<script src="https://rawgithub.com/kentaromiura/e148a170a449cd79b487/raw/4f75555bf965e49a031ba384f49e6b3e3df94d43/ember-data.js"></script>
<script src="https://rawgithub.com/kentaromiura/e148a170a449cd79b487/raw/fe1b241289ae92d5b7c6d14284cd841b55732264/lodash.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/kentaromiura/e148a170a449cd79b487/raw/6d24a3853deac6b6d490a4d34c9e58fcee9ad5b3/normalize.css">
<link rel="stylesheet" href="https://rawgithub.com/kentaromiura/e148a170a449cd79b487/raw/9454f53984acd8cacdfd001e21f26785810cfc8a/style.css">

        <script type="text/x-handlebars">
            <nav class="top-bar" style="">
              <ul class="title-area">
                <!-- Title Area -->
                <li class="name">
                  <h1><a href="/">Embereddit</a></h1>
                </li>
                <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
              </ul>
    
              
           
            </nav>
            
            <div>
              {{outlet}}
            </div>
            <ul id="posts" class="pricing-table"></ul>
            <footer>
              &copy;2013 Embereddit
            </footer>
        </script>

JavaScript

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue','pink'];
  }
});

//http://www.reddit.com/hot.json
App.Store = DS.Store.extend({});

App.hot = function(e){
    var output =[]
    console.log(e)
    _.each(e.data.children, function(child){
        var author = child.data.author,
            permalink = 'http://reddit.com' + child.data.permalink,
            title = child.data.title,
            thumb = child.data.thumbnail,
            url = child.data.url;
        output.push('<li class="description" style="text-align:left; height:120px;"><span style="float:left"><img style="height:70px;width:70px" src="',thumb,'"></img><br /><br />by ',author,'</span><span style="float:right"><h3><a href="',url,'">',title,'</a></h3></span></li><li class="bullet-item" style="text-align:right;"><a href="',permalink,'">Comments</a></h3></li>')   
    })
    console.log(output, jQuery('#post'));
        jQuery('#posts').html(output.join(''));
}

jQuery(function(){
    var script = document.createElement('script');
    script.src= "http://www.reddit.com/hot.json?jsonp=App.hot";
    document.head.appendChild(script)
});