JSFiddle - React, Tailwind, and code Playground

by mcgrailm

HTML

<div id="container">
        <header>

        </header>
        <div id="main" role="main">
            <div id="userPanel">
                <form id="target">
                      <input type="text" value="dalogi" id="userName" />
                      <input type="submit" value="Go" id="goButton" />
                </form>
            </div>

            <div id="userTweets">

            </div>
        </div>
    
        <footer>

        </footer>
     </div>

CSS

/* HTML5 ✰ Boilerplate */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

body { font:13px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
textarea { overflow: auto; } 
.ie6 legend, .ie7 legend { margin-left: -7px; }...

JavaScript

String.prototype.times = function(n) {
    return Array.prototype.join.call({length:n+1}, this);
};
$(document).ready(function(){
    
    $('#target').submit(function() {
        
        var html = "";
        var url = "http://api.twitter.com/1/statuses/user_timeline.json?&callback=?&screen_name=dalogi&count=5";    
        
        $.getJSON(url, function(data) {
            
            // Retrieving tweets
            function getTweets() {
                html += "<pre>";
        $.each(data, function(i, item) {
            var timeCreated = new Date(item.created_at); // date of tweet
            if ( (i+1) in data)  {
                var timeTillNextTweet = new Date( data[ i+1 ].created_at);
                var timeDiff = timeCreated.getTime() - timeTillNextTweet.getTime();
                var secondsDifference = Math.floor(timeDiff/1000);
                var tweetGap = secondsDifference * 3; // Based on 3 characters per second
                // loop for adding spaces. Need a more efficient way of adding spaces after each tweet
                var timeGap = "&nbsp".times(tweetGap);

                html += item.text + timeGap;    
            } else { 
                html += item.text;
            };
        });
        html += "</pre>";
            }
                        
            getTweets();
            $('#userTweets').append(html);    
        });
        return false    
    });
});