JSFiddle - React, Tailwind, and code Playground

by saomocari

HTML

<div id="sample"></div>

CSS

.item{
      width: 120px;
      float: left;  
}
.item img{
    width: 115px;
}
.item p{
    font-size:10px;
    margin: 0 0 10px;
}

JavaScript

$(function() {
		$.getJSON(
            "http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?time=this_week&max-results=5&v=2&alt=json", 

            function(data) {
                 feed = data.feed;
                 $.each(feed.entry, function(i,item){
		         	var thumb = item.media$group.media$thumbnail[1].url; //サムネ
		            var link = item.link[0].href; // アドレス
		            var title = item.title.$t; // タイトル
		                
		            var sec = "";
		            sec +='<a href="'+ link +'" target="_blank"><img src="'+　thumb +'" alt="'+ title +'の動画" /></a>';
		            sec +='<p><a href="'+ link +'" target="_blank">'+ title +'</a></p>';
		            $("#sample").append('<div class="item">'+ sec +'</div>');
				});                     
			}
		);
});