JSFiddle - React, Tailwind, and code Playground

by zainshaikh

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<div class="well user-provided-info">
        <!--<label class="control-label" for="custom_text"><small>Paste custom useragent</small></label>-->
    
 <div class="control-group">
            <div class="controls">
                <textarea id="custom_text" rows="3" class="input-block-level" placeholder="Paste items here (each in a separate row)"></textarea>
            <button id="check" class="btn btn-info">Check</button>
            </div>
           
        </div>
</div>


<div class="result-container">
    <span class="result"></span>
</div>



<script type="text/template" id="template">
    {[ if (items.length > 0) { ]}
    
    <table class="table">
    {[ _.each(items, function(item) { ]}
        <tr data-id="{{item.id}}">
            <td class="name">
                <h3>{{item.name}}</h3>
            </td>
            <td>
             <div>   
                 <h4>{{item.up_votes}} votes</h4>
                 
                 {[ if (down_votes_enabled) { ]}
                 , downvotes: {{item.down_votes}}
                  {[ }  ]}
                 
                 <button class="btn btn-mini vote-up"><i class="icon-thumbs-up"></i> vote up!</button>
                 
                 {[ if (down_votes_enabled) { ]}
                 <button class="btn btn-mini vote-down"><i class="icon-thumbs-down"></i> vote down!</button>   
                 {[ }  ]}
                 <div class="clearfix"></div>
                </div>
                
            <div class="progress">
                <div class="bar bar-success" style="width: {{item.up_votes}}%;"></div>
            </div>
            </td>
        </tr>
    {[ }); ]}
    </table>
    
{[ } else { ]}

       ...

CSS

body {padding: 0}
body, input, select,textarea {font-family: "Segoe UI", Calibri, Tahoma, Sans-Serif;font-size: 12pt;color: #444444;outline: none/*setting outline to none for chrome, chrome displays a highlight border around textboxes*/;} 
h1, h2, h3, h4 {font-family: "Segoe UI Light"; font-weight: normal;}
#template {display: none}
.name {width: 40%}
.result .btn {float: right}
.result h4 {margin: 0; padding: 0; display: inline-block;}

JavaScript

window.debug = function(d) {
    if (window.console) if (window.console.log) window.console.log(d)
}

_.templateSettings = {
    evaluate: /\{\[([\s\S]+?)\]\}/g,
    interpolate: /\{\{([\s\S]+?)\}\}/g
};

// Get the template's markup...
var template_markup = $('#template').html();
var template = _.template(template_markup);

window.data = {
    "down_votes_enabled": false
};

window.update_vote = function(id) {

    var item = $.grep(window.data.items, function(a) {

        return a.id == id;

    })[0];

    item.up_votes = parseInt(item.up_votes) + 1;

    var c = $('.result tr[data-id="' + id + '"]');
    c.find('.bar').css('width', item.up_votes + '%');
    c.find('h4').html(item.up_votes);
    //window.bind();   
}

window.bind = function() {


    var html = template(window.data);

    debug('html created...');
    $('.result').html(html);

};

$('.btn-mini').live('click', function() {

    var id = $(this).parents('tr:eq(0)').attr('data-id');
    update_vote(id);

});

$('#check').click(function(e) {

    var text = $('#custom_text').val();
    var items = text.split('\n');
    //debug(text );
    //  debug(items);
    var data_items = [];
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        var item_parts = item.split('=')

        data_items.push({
            "id": i + 1,
            "name": item_parts[0],
            "up_votes": item_parts[1] || 0,
            "down_votes": 6
        });
    }

    window.data.items = data_items;

    window.bind();

    e.preventDefault();
    return false;
});