jQuery - twitter json

jQuery - twitter json

by Andrew Pougher

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="input">
    <span>Enter Twitter Username</span>
    <input id="twitterUsername" type="text" value="@apougher"/>
    <button id="getTweets" class="btn btn-lg btn-danger">Get Tweets</button>
</div>
<div id="output" class="well"></div>

CSS

li {
    padding:10px;font-weight:bold
}

JavaScript

$("#getTweets").bind("click", function() {
    var twitterUsername = $("#twitterUsername").val();
    var url = "https://twitter.com/status/user_timeline/" + twitterUsername + "?count=5&format=json&callback=?"
        
    //var url = "http://twitter.com/status/user_timeline/" + twitterUsername + ".json?count=5&callback=?";
    $.getJSON(url, function(data) {
        var twitterList = $("<ul />");
        $.each(data, function(index, item) {
            $("<li />", {
                "text": item.text
            }).appendTo(twitterList);
        });
        $("#output").fadeOut("fast", function() {
            $(this).empty().append(twitterList).fadeIn(3000);
        });
    })
    /*
    .success(function() { alert("another chained success"); })
    .error(function() { alert("chained error"); })
    .complete(function() { alert("chained complete"); });
    */
    .done(function() {    $("#output").after("another chained success"); })
    .fail(function() { $("#output").after("chained error"); })
    .always(function() { $("#output").after("chained complete"); });
        ;
});