7
\$\begingroup\$

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; 
}
\$\endgroup\$
6
\$\begingroup\$

There are a couple things you could improve here. First, you should specify a character encoding for the document, like this:

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

Next, your indentation is erratic:

<!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>

This should be indented like this:

<!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>

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.

\$\endgroup\$
  • \$\begingroup\$ Sorry about the indentation. I completely missed that in a hurry. \$\endgroup\$ – Snehal Shah Mar 17 '15 at 23:35
5
\$\begingroup\$

As @Hosch250 pointed out, this is hard to read because the indentation is off in many places.

A minor thing about this loop:

      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>');
      }

The $(".inner") dom lookup will be performed in every iteration of the loop, which is inefficient. It would be better to cache this lookup in a variable before the loop:

      var $inner = $(".inner");
      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>');
      }
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.