JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<ul id="twitter_results"></ul>

CSS

#twitter_results {
    font: 76% Arial, sans-serif;
    margin: 1em auto;
    width: 70%;
}

#twitter_results li {
    margin-bottom: 1em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #ccc;
    min-height: 48px;
}

#twitter_results li img {
    float: left;
}

#twitter_results cite {
    font-weight: bold;
    display: block;
    margin-left: 55px;
}

#twitter_results li p {
    margin-left: 55px;
    padding-top: 4px;
}

JavaScript

if(typeof String.prototype.linkify !== 'function') {
    
     String.prototype.linkify = function() {
    var tweet = this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g, function(url) { 
        var wrap = document.createElement('div');
        var anch = document.createElement('a');
        anch.href = url;
        anch.target = "_blank";
        anch.innerHTML = url;
        wrap.appendChild(anch);
        return wrap.innerHTML;
    });
    tweet = tweet.replace(/(^|\s)@(\w+)/g, '$1@<a href="http://www.twitter.com/$2" target="_blank">$2</a>');
    return tweet.replace(/(^|\s)#(\w+)/g, '$1#<a href="http://search.twitter.com/search?q=%23$2" target="_blank">$2</a>');
 };   
    
    
}





$.ajax({
        type:'GET',
        dataType:'jsonp',
        url:'http://api.twitter.com/1/statuses/user_timeline.json',
        data:{screen_name:'gabromanato', include_rts:1}, //show retweets
        success:function(data, textStatus, XMLHttpRequest) {
            var tmp = false;
            var results = $('#twitter_results');
            console.log(data);
            for(i in data) {
                if(data[i].retweeted_status != null) {
                    tmp = $('<li class="retweet" itemid="'+data[i].retweeted_status.id_str+'"><img src="'+data[i].retweeted_status.user.profile_image_url+'" alt="" width="48" height="48" /><cite>'+data[i].retweeted_status.user.screen_name+'</cite><p>'+data[i].retweeted_status.text.linkify()+'</p></li>');
                    if(data[i].retweeted_status.favorited) {
                        tmp.addClass('favorite');
                    }
                } else {
                    tmp = $('<li itemid="'+data[i].id_str+'"><img src="'+data[i].user.profile_image_url+'" alt="" width="48" height="48" /><cite>'+data[i].user.screen_name+'</cite><p>'+data[i].text.linkify() +'</p></li>');
                    if(data[i].favorited) {
                        tmp.addClass('favorite');
                    }
                }
       ...