AmplifyJS Demo: Ugly Code

The old, ugly way

by cillay

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/redmond/jquery-ui.css">
<div id="input">
    <input id="txtUsername" type="text" value="aisteam" class="ui-corner-all" />
    <button id="btnGetTweets" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Get Tweets</button>
</div>
<div id="output"></div>

CSS

body {
    padding: 20px;
    font: normal 0.85em 'Segoe UI', Verdana, Arial, sans-serif;
}

#output li {
    border: 1px solid cornflowerblue;
    padding: 10px;
    margin-top: 15px;
}

button {
    font-size: 16px !important;
    padding: 4px !important;
    height: 31px;
    position: relative;
    top: -1px;
}

#txtUsername {
    height: 28px;
    line-height: 24px;
    margin-top: 4px;
    background-image: url('http://a0.twimg.com/profile_images/1884991115/at-sign_mini.png');
    background-clip: border-box;
    background-color: white;
    background-repeat: no-repeat;
    background-position: 3px 3px;
    padding-left: 26px;
    font: normal 24px Arial, sans-serif;
    color: #333;
    display: inline-block;
    position: relative;
    top: 2px;
}
#output li {
  /* fallback */
  background-color: #DBFBFF;
  
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BADCFF), to(#DBFBFF));
  
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #BADCFF, #DBFBFF);
  
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #BADCFF, #DBFBFF);
  
  /* IE 10 */
  background: -ms-linear-gradient(top, #BADCFF, #DBFBFF);
  
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #BADCFF, #DBFBFF);
}

JavaScript

$(function() {
    $('#btnGetTweets').bind('click', function() {
        var user = $('#txtUsername').val();
        var url = 'http://twitter.com/status/user_timeline/' + user + ".json?callback=?";
        $.getJSON(url, function(data) {
            var tweetList = $( "<ul>" );
            $.each(data, function(index, item) {
                $('<li>', { "text" : item.text }).appendTo(tweetList);
            });
            $('#output').fadeOut('fast', function() {
                $(this).empty().append(tweetList).fadeIn('slow');            
            });
        });
    });
});