<section id='rendered' class='template-rendered'></section>

<script id='template' type='text/x-handlebars-template'>
  <h3 class='title'>Google News</h3>
  <ul>
    {{#entries}}
    <li>
      <a href='{{link}}' target='_blank'>
        <div class='date gray'>{{publishedDate}}</div>
        <div class='author gray'>{{authorFormat author}}</div>
        <div class='item-title'>{{title}}</div>
        <div class='gray'>Categories: {{categoriesFormat categories}}</div>
      </a>
    </li>
    {{/entries}}
  </ul>
</script>
/* Responsive design, smallest device first */
/* This is about the responsive concept and templating and have skipped adding classes for html elements and used id instead here and there for quicker prototyping */

* {
  box-sizing: border-box;
}

html,
body {
  margin-top: 1em;
}

.date {
  float: left;
  font-size: 70%;
}

.author {
  float: right;
  font-size: 70%;
}

.gray {
  color: gray;
}

.template-rendered {
  margin: 0 auto;
}

#rendered ul {
  list-style-type: none;
}

#rendered li {
  display: block;
  margin: 1em 0.5em 1em 0.5em;
}

#rendered li a {
  display: block;
  padding: 0.5em;
  border: 1px solid black;
  border-radius: 0.5em;
}

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

a:hover {
  background: linear-gradient(white, #ddd);
}

#rendered .item-title {
  clear: both;
  margin: 0.5em 0;
  margin-top: 1.2em;
}

#rendered .title {
  text-align: center;
}

#rendered .title::after {
  content: ' - Phone';
}

@media (min-width: 480px) {
  #rendered .title::after {
    content: ' - Phone large';
  }
  #rendered {
    width: 96%;
    font-size: 110%;
  }
}

@media (min-width: 768px) {
  #rendered .title::after {
    content: " - Tablet";
  }
  #rendered {
    width: 80%;
    font-size: 120%;
  }
}

@media (min-width: 992px) {
  #rendered .title::after {
    content: ' - Desktop';
  }
  #rendered {
    width: 70%;
    font-size: 130%;
  }
  #rendered li {
    margin: 0.5em;
  }
}

@media (min-width: 1200px) {
  #rendered .title::after {
    content: ' - Desktop large';
  }
  #rendered {
    width: 60%;
    font-size: 140%;
  }
}
! function(d, $) {
  var stub = {
    entries: [{
      title: 'title 1',
      link: 'link 1',
      author: 'author 1',
      publishedDate: 'publishedDate 1',
      categories: [
        'category 11', 'category 12'
      ]
    }, {
      title: 'title 2',
      link: 'link 2',
      author: 'author 2',
      publishedDate: 'publishedDate 2',
      categories: [
        'category 21', 'category 22'
      ]
    }]
  };

  // Aggregate string array to string
  Handlebars.registerHelper('categoriesFormat', function(categories) {
    if (!categories || categories.length === 0) return '';
    if (categories.length === 1) return categories[0];

    return categories.reduce(function(a, b) {
      return a + b + ', ';
    }, '');
  });

  // Format author data
  Handlebars.registerHelper('authorFormat', function(author) {
    return author ? '- ' + author : '- Unknown author';
  });

  var
    templateSource = $('#template').html(),
    template = Handlebars.compile(templateSource),
    html = '',

    // Json url
    url = '//ajax.googleapis.com/ajax/services/feed/load?v=1.0';
  url += '&num=10&q=https://news.google.com/news?output=rss';

  // Get json data from Google
  $.ajax({
    url: url,
    type: 'GET',
    // Avoid having no CORS policy issues by using jsonp
    // I trust Google will do no evil
    dataType: 'jsonp',
    success: function(result) {
      // If download was success, then apply rendering
      if (result.responseStatus === 200) {
        html = template(result.responseData.feed);
      } else {
        html = template(stub);
      }
    },
    error: function(result) {
      html = template(stub);
      console.log(result);
      $('body').append('ERROR - ' + JSON.stringify(result));
    },
    complete: function() {
      $('#rendered').append(html);
    }
  });
}(document, jQuery);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js