var $loadTweetsButton = $('<button></button>'); $loadTweetsButton.appendTo($main); $loadTweetsButton.click(function() { displayHomepage(); }); var $newTweet = $('<form id="newTweet"></form>'); var $visitorName = $('<div><label for="visitorName">Username</label>\n<input type="text" id="visitorName"></div>'); var $visitorTweet = $('<div><label for="visitorTweet">Tweet</label>\n<input type="text" id="visitorTweet"></div>'); var $visitorButton = $('<div><input type="submit"></div>'); var $githubLink = $('<span id="github">Built by <a href="https://github.com/ascherj">Jake Ascher</a></span>'); $newTweet.append($visitorName, $visitorTweet, $visitorButton); $newTweet.appendTo($main); $('#newTweet').submit(function(event) { event.preventDefault(); window.visitor = $('#visitorName').val(); writeTweet($('#visitorTweet').val()); $('#visitorName').val(''); $('#visitorTweet').val(''); displayHomepage(); }); var $tweets = $('<div class="tweets"></div>'); $tweets.appendTo($main); function renderTweet(tweet) { var $tweet = $('<div></div>'); $tweet.append('@' + '<a class="user">' + tweet.user + '</a>' + ': ' + tweet.message); $tweet.append('<br>'); var $timestamp = $('<i class="timestamp"></i>'); $timestamp.append(moment(tweet.created_at).fromNow()); $timestamp.attr('title', moment(tweet.created_at).format('MMM DD, YYYY, h:mm:ss a')); $timestamp.appendTo($tweet); $tweet.appendTo($tweets); } function loadTweets(tweets) { $tweets.html(''); var index = tweets.length - 1; while(index >= 0){ var tweet = tweets[index]; renderTweet(tweet); index -= 1; } $('.user').on('click', function(event) { displayUserTimeline(event.target.text); }); } function displayUserTimeline(user) { $pageName.text(user + '\'s Timeline'); $loadTweetsButton.text('Return to Home'); loadTweets(streams.users[user]); } function displayHomepage() { $pageName.text('Homepage'); $loadTweetsButton.text('Load New Tweets'); loadTweets(streams.home); } displayHomepage(); $main.append($githubLink);
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter