JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div class="topAOLnewsStories"><h2>Top AOL News Stories</h2><ul><li>
<a title="How Was The Joker Potty Trained? Mental Health Experts Psychoanalyze Batman Villains" href="http://www.aolnews.com/2011/07/21/how-was-the-joker-potty-trained-mental-health-experts-psychoana/">How Was The Joker Potty Trained? Mental Health Experts Psychoanalyze Batman Villains</a>
</li><li>
<a title="Alaska's Alleged Sea Monster Caught On Film" href="http://www.aolnews.com/2011/07/21/alaskas-alleged-sea-monster-caught-on-film/">Alaska's Alleged Sea Monster Caught On Film</a>
</li><li>
<a title="WATCH: Exploding manhole Tosses Car In The Air" href="http://www.aolnews.com/2011/07/21/watch-exploding-manhole-tosses-car-in-the-air/">WATCH: Exploding manhole Tosses Car In The Air</a>
</li><li>
<a title="15 Most Annoying Things About Flying The Unfriendly Skies" href="http://www.aolnews.com/2011/07/19/15-most-annoying-things-about-flying-the-unfriendly-skies/">15 Most Annoying Things About Flying The Unfriendly Skies</a>
</li><li>
<a title="Cat Stabs Man (Or So He Says)" href="http://www.aolnews.com/2011/07/19/cat-stabs-man-or-so-he-says/">Cat Stabs Man (Or So He Says)</a>
</li>
</ul><p class="more"><a href="http://www.aolnews.com">More Stories</a></p></div>

CSS

div.topAOLnewsStories ul li {
  background: url("http://o.aolcdn.com/art/dpweather/icon-newsstory") no-repeat scroll left 0.1em transparent;
  margin-bottom: 1em;
  padding-left: 18px;
}

.topAOLnewsStories {
    border: 10px solid red;
}

.topAOLnewsStories ul {
    border: 5px solid orange;
}

.topAOLnewsStories ul li {
    border: 5px solid green;
}

JavaScript

$(document).ready(function(){
var url='http://www.huffingtonpost.com/api/?t=most_popular_merged&source=www.autoblog.com&map=top_x&x=5&callback=?';

        $.getJSON(url,function(json){
            $(".topAOLnewsStories").html('<h2>Top AOL News Stories</h2><ul></ul>');
            $(".topAOLnewsStories ul li").css({'background': 'none', 'padding-left': '0', 'clear': 'left'});
            $(".topAOLnewsStories ul li img").css({'float': 'left'});
            $.each(json.response,function(i,item){
               $(".topAOLnewsStories ul").append('<li><a title="'+item.entry_title+'" href="'+item.entry_url+'"><img src="'+item.entry_image+'" width="74" height="58" />'+item.entry_title+'</a></li>');
            });
        });
});