Read Twitter with JS

This example shows how to get your tweets using $.getJSON and displaying them in a unordered list

by BinaryAcid

HTML

<div id="input">
    <span>Enter Twitter Username</span>
    <input id="twitterUsername" type="text" value="@hackernewsbot"/>
    <button id="getTweets">Get Tweets</button>
</div>
<div id="output"></div>

CSS

#input { padding-bottom: 5px; }
#output ul { 
    padding-top: 5px; 
    border-top: solid 1px black; 
    line-height: 2em;
    list-style-type: disc;
    padding-left: 15px;
}

JavaScript

$( "#getTweets" ).bind( "click", function() {
    var twitterUsername = $( "#twitterUsername" ).val();
    var url = "http://twitter.com/status/user_timeline/" + 
        twitterUsername + 
        ".json?count=30&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( "slow" );            
        });
    });
});