JSFiddle - React, Tailwind, and code Playground

by richlewis14

HTML

<div id="jstwitter">
 
    
</div>

CSS

#jstwitter {
    border: 1px solid #ccc;
}

.tweet {
    border-bottom:1px solid #ccc;
}

JavaScript

JQTWEET = {

    // Set twitter username, number of tweets & id/class to append tweets
    user: 'Davids_Carpets',
    numTweets: 4,
    appendTo: '#jstwitter',
    // core function of jqtweet
    loadTweets: function () {
        $.ajax({
                url: 'http://api.twitter.com/1/statuses/user_timeline.json/',
                type: 'GET',
                dataType: 'jsonp',
                data: {
                    screen_name: JQTWEET.user,
                    include_rts: false,
                    count: JQTWEET.numTweets,
                    include_entities: true
                },
                success: function (data, textStatus, xhr) {
                    var html = '<div class="tweet"><p class="tweetText">TWEET_TEXT</p>IMG_TAG<div class="time">AGO</div></div>';
                    var img;
                    // append tweets into page
                    for (var i = 0; i < data.length; i++) {

                        //this is where we grab the image, only generate the HTML code if media entities were found in the JSON data
                        try {
                            if (data[i].entities.media) {
                                img = '<a href="' + data[i].entities.media[0].media_url + '" class="fancybox" rel="group">';
                                img += '<img src="' + data[i].entities.media[0].media_url + '" class="twitterImage"  />';
                                img += '</a>';


                                img_link = '<a href="' + data[i].entities.media[0].media_url + ' "class="showLink">View Photo';
                                img_link += '</a>';
                                img_link += '<img src="' + data[i].entities.media[0].media_url + '" class="twitterImage"  />';

                            } else {
                                img = '';
                            }
                        } catch (e) {
                            //e
                        }

                       ...