JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <h1 class="text-center">News site</h1>
    <script src="application.js"></script>
</div>

JavaScript

// Location of server.
var solr_url = "http://uptsearch.cloudapp.net/solr/rss/select";

// Finds all news sources.
function find_news_sources() {
    console.log("Requesting sources from server...");
    var sources = new Array();
    $.ajax({
        'url': solr_url,
        'dataType': 'jsonp',
        'jsonp': 'json.wrf',
        'data': {
            'wt': 'json',
            'q': '*',
            'rows': '0',
            'facet': 'true',
            'facet.limit': '-1',
            'facet.field': 'source'
        },
        'success': function (data) {
            var news_sources = data.facet_counts.facet_fields.source;
            console.log("JSON success, found rows: " + news_sources.length);
            for (var key = 0; key < news_sources.length; key++) {
                var source_name = news_sources[key];
                var source_news_count = news_sources[key + 1];
                sources.push(source_name + "," + source_news_count);
                key += 1;
            }
            console.log("Found total sources: " + sources.length);
            draw_tables(sources);
        }
    });
}
find_news_sources();

// Starts to draw tables.
function draw_tables(sources) {
    console.log("Starting to draw tables, acquired sources count: " + sources.length);

    for (var key = 0; key < sources.length; key++) {
        var table_data = sources[key].split(',');
        var source_name = table_data[0];
        var news_count = table_data[1];

        console.log("Starting to draw table for: " + source_name);
        var news_table;
        news_table = $("<table id=" + table_data[0] + " class=\"table table-bordered table-responsive table-condensed\">");
        news_table.append("<thead><tr><td colspan=\"3\" class=\"text-center\"><button id=" + source_name + " class=\"btn btn-default btn-lg btn-block\">Feed provider: " + source_name + " (news count: " + news_count + ")</button></td></tr></thead>");
        var newstable = find_three_news(news_table,...