JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<script src="http://api.twitter.com/1/ArnetteEyewear/lists/arnette-family/statuses.json?callback=twitterFeed&amp;per_page=5&amp;something=.js"></script>

<div id="multi_twitter"></div>

JavaScript

var Tweet = function(data) {
    this.data = data;
    this.initialize();
    return this.container;
};

Tweet.prototype = {
    initialize: function() {
        var self = this;
        this.build();
    },
    
    build: function() {
        this.container = jQuery('<div>', {
            "class":"tweet"
        });
        this.container.append(this._buildImage());
        this.container.append(this._buildTriangle());
        this.container.append(this._buildText());
        this.container.append(this._buildPosted());
        this.container.append(this._buildName());
    },

    _buildImage: function(){
        var self = this;
        var image = jQuery('<a>', {
            "class":"user_img",
            "target":"_blank",
            "href":'http://twitter.com/'+self.data.user.screen_name
        });
        
        image.append(jQuery('<img>', {
            "width":25,
            "height":25,
            "src": self.data.user.profile_image_url
        }));
        
        return image;
    },
    
    _buildText: function() {
        var self = this;
        var text = jQuery('<p>', {
            "html": self.data.text
        });
        
        return text;
    },
    _buildPosted: function() {
        var self = this,
            date = new Date(self.data.created_at),
            months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            dayofthemonth = function(dayOfMonth){
                // 1st, 2nd, 3rd, etc.
                return (dayOfMonth > 3 && dayOfMonth < 21) ? 'th' : ['th', 'st', 'nd', 'rd', 'th'][Math.min(dayOfMonth % 10, 4)];
            };
        
        var posted = jQuery('<p>', {
            "class": "posted",
            "html": months[date.getMonth()]+' '+date.getDate()+(dayofthemonth(date.getDate()))+', '+ ((date.getUTCHours()>12)?date.getUTCHours()-12:date.getUTCHours())+':'+((date.getUTCMinutes() < 10)?'0':'') + date.getUTCMinutes() + ' '+((date.getUTCHours() > 12)?'pm':'am')
       ...