patternjavascriptMinor
Feed API to display RSS feeds Ted talk
Viewed 0 times
rssdisplayfeedtalkfeedsapited
Problem
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
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 ' + 'View on Ted.com' + '';
var image = result.feed.entries[i].mediaGroups[0].contents[0].thumbnails[0].url;
$(".inner").append(' '+ entry.title +' ' + entry.contentSnippet + ''+ link + ' ');
}
//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 = ' ';
$(plant).append(' '+ entry.title +' ' + video + 'Published Date:'+ entry.publishedDate +' ' + entry.content + '');
$(".expandedView").show(1000);
}
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
TED Talks Google Feed API
Welcome to the Ted talks Feed
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 ' + 'View on Ted.com' + '';
var image = result.feed.entries[i].mediaGroups[0].contents[0].thumbnails[0].url;
$(".inner").append(' '+ entry.title +' ' + entry.contentSnippet + ''+ link + ' ');
}
//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 = ' ';
$(plant).append(' '+ entry.title +' ' + video + 'Published Date:'+ entry.publishedDate +' ' + entry.content + '');
$(".expandedView").show(1000);
}
Solution
There are a couple things you could improve here. First, you should specify a character encoding for the document, like this:
Next, your indentation is erratic:
This should be indented like this:
The indentation on your CSS and JS is also erratic.
One excellent thing is that your HTML and CSS validates to the W3C validators:
HTML Validator
CSS Validator
Your JS does not validate at JSLint because your indentation is off.
Page Title
Next, your indentation is erratic:
TED Talks Google Feed API
Welcome to the Ted talks Feed
This should be indented like this:
TED Talks Google Feed API
Welcome to the Ted talks Feed
The indentation on your CSS and JS is also erratic.
One excellent thing is that your HTML and CSS validates to the W3C validators:
HTML Validator
CSS Validator
Your JS does not validate at JSLint because your indentation is off.
Code Snippets
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head><!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><!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>Context
StackExchange Code Review Q#57138, answer score: 6
Revisions (0)
No revisions yet.