I am trying to create a webpage that will read RSS feeds from the TED talk website and display it on a page. I am using Google's Feed API for this.
Here is the link to view the code online.
Could someone please tell me if there is a better way to display the data coming from the feed?
HTML
<!DOCTYPE html>
<!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. -->
<head>
<title>TED Talks Google Feed API</title>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
<script src="js/google.js" type="text/javascript"></script>
</head>
<body style="font-family: Arial;border: 0 none;">
<h1>Welcome to the Ted talks Feed</h1>
<div id="dialog" title="Basic dialog"></div>
<div id="content">
<div class="inner">
</div>
</div>
</body>
Feed API (JavaScript)
google.load("feeds", "1");
// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var link = '<a target=_blank; href="' + entry.link + '">' + 'View on Ted.com' + '</a>';
var image = result.feed.entries[i].mediaGroups[0].contents[0].thumbnails[0].url;
$(".inner").append('<div class="innerdetail viewmore" data-num="'+ i +'"> <img class="thumbnail" title="Click to view more" src="'+ image +'"/> <p class="title">'+ entry.title +' </p> <p class="snippet">' + entry.contentSnippet + '</p>'+ link + ' </div>');
}
//On click of the thumbnail(Image), we will display more data with more metadata.
$(".thumbnail").click(function() {
//Removing all arrows before initializing
$(".arrow-up").remove();
var parentClass = $(this).parent();
//Checking to see if the parent class already is expanded or not
if ($(parentClass).hasClass( "expandedMain" ) ) {
$("div").removeClass("expandedMain");
$(".expandedView").remove();
$(".arrow-up").remove();
}
else{
$(".arrow-up").show();
$("div").removeClass("expandedMain");
$(this).parent().addClass("expandedMain");
var plant = $(this).parent();
var DataCount = plant[0].dataset.num;
var entry = result.feed.entries[DataCount];
//Appending the cideo in a variable for use later
var video = '<video class="video" width="480" height="320" controls> <source src="'+ entry.mediaGroups[0].contents[0].url +'" type="video/mp4"></video>';
$(plant).append('<div class="arrow-up"></div> <div class="expandedView" data-category="'+ entry.categories[0] +'"><p class="title">'+ entry.title +' </p>' + video + '<p class="publishedDate">Published Date:'+ entry.publishedDate +' <p> <p class="fullcontent">' + entry.content + '</p></div>');
$(".expandedView").show(1000);
}
});
}
}
//On Load event
function OnLoad() {
var feed = new google.feeds.Feed("http://feeds.feedburner.com/tedtalks_video");
feed.includeHistoricalEntries(); // tell the API we want to have old entries too
feed.setNumEntries(250); // we want a maximum of 250 entries, if they exist
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
CSS:
h1{
text-align: center;
font-family: 'Raleway', arial, sans-serif;
}
a{
font-family: 'Raleway', arial, sans-serif;
font-size: 0.75em;
}
#content{
background: #e1e1e1;
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
}
.thumbnail{
width: 100%;
max-width: 200px;
display: block;
height: 100%;
max-height: 150px;
cursor: pointer;
}
.innerdetail{
width: 200px;
display: inline-table;
height: auto;
margin: 1em;
border: 1px solid lightgray;
box-shadow: 0px 0px 2px black;
padding: 1em;
background-color: ghostwhite;
}
.title, .publishedDate{
font-size: 14px;
font-family: 'arial', sans-serif;
}
.snippet, .fullcontent{
font-size: 12px;
font-family: 'arial', sans-serif;
}
.expandedView{
width: 100%;
background-color: #ffffff;
height: auto;
left: 0px;
position: absolute;
transition: 1s ease;
box-sizing: border-box;
padding: 1em;
z-index: 1000;
cursor: default;
display: none;
box-shadow: inset 0px 0px 2px black;
}
.expandedView .title, .expandedView .publishedDate{
text-align: center;
}
.expandedView .title{
font-size: 16px;
font-family: 'Raleway', arial, sans-serif;
font-weight: bold;
margin: 0 auto;
}
.expandedMain{
height: 600px;
}
.video{
display: block;
margin: 0 auto;
z-index: 100;
}
.inner{
position: relative;
height: 100%;
width: 100%;
z-index: 1;
}
.close{
z-index: 1001;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
}
.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid gray;
}
