Testing Done

SUBMISSION.md

@@ -2,7 +2,12 @@
 
 Use this md to tell us the bugs you solved and also explain the approach you had while solving them. Make them bulleted like
 
-1. Accessibility - **Something here**
+1. Accessibility -
+- Changed the icon-menu using class as icon-menu instead of icon-list and also changed the .icon-menu:before content using the icomoon app
+
 2. Aesthetics - **Something here**
 3. Testing - **Something here**
-4. Technicality Improvements - **Something here**
+4. Technicality Improvements - 
+- Changed the links in the nav menu,refer Handlebars docs
+
+- When the menu icon is clicked on, we need to toggle a class on the body to perform the hiding/showing of our menu.

app.js

@@ -1,17 +1,21 @@
-var allFeeds = [{
-  name: 'CSS Tricks',
-  url: 'http://feeds.feedburner.com/CssTricks'
-}, {
-  name: 'HTML5 Rocks',
-  url: 'http://feeds.feedburner.com/html5rocks'
-}, {
-  name: 'Linear Digressions',
-  url: 'http://feeds.feedburner.com/udacity-linear-digressions'
-}];
+var allFeeds = [
+  {
+    name: "CSS Tricks",
+    url: "http://feeds.feedburner.com/CssTricks"
+  },
+  {
+    name: "HTML5 Rocks",
+    url: "http://feeds.feedburner.com/html5rocks"
+  },
+  {
+    name: "Linear Digressions",
+    url: "http://feeds.feedburner.com/udacity-linear-digressions"
+  }
+];
 
 function init() {
   loadFeed(0);
-  $('body').removeClass('menu-hidden');
+  $("body").removeClass("menu-hidden");
 }
 
 /* This function performs everything necessary to load a
@@ -20,19 +24,37 @@ function init() {
  * which will be called after everything has run successfully.
  */
 function loadFeed(id, cb) {
-
+  var feedName = allFeeds[id].name;
   $.ajax({
     type: "GET",
-    url: 'https://api.rss2json.com/v1/api.json',
+    url: "https://api.rss2json.com/v1/api.json",
     data: {
-      rss_url: 'http://feeds.feedburner.com/CssTricks'
+      rss_url: "http://feeds.feedburner.com/CssTricks"
     },
-    success: function (result, status) {
+    success: function(result, status) {
+      var container = $(".feed"),
+        title = $(".header-title"),
+        entries = result.feed.entries,
+        // entriesLen = entries.length,
+        entryTemplate = Handlebars.compile($(".tpl-entry").html());
+
+      title.html(feedName); // Set the header text
+      container.empty(); // Empty out all previous entries
+
+      /* Loop through the entries we just loaded via the Google
+       * Feed Reader API. We'll then parse that entry against the
+       * entryTemplate (created above using Handlebars) and append
+       * the resulting HTML to the list of entries on the page.
+       */
+      entries.forEach(function(entry) {
+        container.append(entryTemplate(entry));
+      });
+
       if (cb) {
-        cb( /*something*/ );
+        cb(/*something*/);
       }
     },
-    error: function (result, status, err) {
+    error: function(result, status, err) {
       //run only the callback without attempting to parse result due to error
       if (cb) {
         cb();
@@ -43,24 +65,29 @@ function loadFeed(id, cb) {
 }
 window.onload = init;
 
-$(function () {
-  var feedList = $('.feed-list'),
-    feedItemTemplate = Handlebars.compile($('.tpl-feed-list-item').html()),
-    menuIcon = $('.menu-icon-link');
+$(
+  (function() {
+    var feedList = $(".feed-list"),
+      feedItemTemplate = Handlebars.compile($(".tpl-feed-list-item").html()),
+      menuIcon = $(".menu-icon-link");
 
+    allFeeds.forEach(function(feed) {
+      console.log(feed.url);
+      feedList.append(feedItemTemplate(feed));
+    });
 
-  allFeeds.forEach(function (feed) {
-    feedList.append(feedItemTemplate(feed));
-  });
-
-  feedList.on('click', function () {
-    var item = $(this);
-    $('body').addClass( /*A class here*/ );
-    loadFeed(item.data('id'));
-    return false;
-  });
+    feedList.on("click", "a", function() {
+      var item = $(this);
+      $("body").addClass("menu-hidden");
+      loadFeed(item.data("id"));
+      return false;
+    });
 
-  /* When the menu icon is clicked on, we need to toggle a class
-   * on the body to perform the hiding/showing of our menu.
-   */
-}());
+    /* When the menu icon is clicked on, we need to toggle a class
+     * on the body to perform the hiding/showing of our menu.
+     */
+    menuIcon.on("click", function() {
+      $("body").toggleClass("menu-hidden");
+    });
+  })()
+);

feedreader.js

@@ -8,70 +8,77 @@
  * since some of these tests may require DOM elements. We want
  * to ensure they don't run until the DOM is ready.
  */
-$(function () {
-  /* This is our first test suite - a test suite just contains
-   * a related set of tests. This suite is all about the RSS
-   * feeds definitions, the allFeeds variable in our application.
-   */
-  describe('RSS Feeds', function () {
-    /* This is our first test - it tests to make sure that the
-     * allFeeds variable has been defined and that it is not
-     * empty. Experiment with this before you get started on
-     * the rest of this project. What happens when you change
-     * allFeeds in app.js to be an empty array and refresh the
-     * page?
+$(
+  (function() {
+    /* This is our first test suite - a test suite just contains
+     * a related set of tests. This suite is all about the RSS
+     * feeds definitions, the allFeeds variable in our application.
      */
-    it('are defined', function () {
-      let expect = chai.expect;
-      expect(allFeeds).to.not.be.undefined;
-      expect(allFeeds.length).to.be.above(0);
+    describe("RSS Feeds", function() {
+      /* This is our first test - it tests to make sure that the
+       * allFeeds variable has been defined and that it is not
+       * empty. Experiment with this before you get started on
+       * the rest of this project. What happens when you change
+       * allFeeds in app.js to be an empty array and refresh the
+       * page?
+       */
+      it("are defined", function() {
+        let expect = chai.expect;
+        expect(allFeeds).to.not.be.undefined;
+        expect(allFeeds.length).to.be.above(0);
+      });
+
+      // This test checks whether all the url field are defined and are not empty.
+      it("should have defined Urls", function() {
+        // Test here
+        for (var i = 0; i < allFeeds.length; i++) {
+          expect(allFeeds[i].url).to.not.be.undefined;
+          expect(allFeeds[i].url.length).to.be.above(0);
+        }
+      });
+
+      // This test check whether all the feed names are defined and are not empty.
+      it("should have defined names", function() {
+        // Test here
+        for (var i = 0; i < allFeeds.length; i++) {
+          expect(allFeeds[i].name).to.not.be.undefined;
+          expect(allFeeds[i].name).to.be.above(0);
+        }
+      });
     });
 
-
-    // This test checks whether all the url field are defined and are not empty.
-    it('should have defined Urls', function () {
-      // Test here
-
+    describe("The Menu", () => {
+      // Test to check node hidden by default.
+      it("should be hidden by default", () => {
+        // test here
+        expect($(".slide-menu").css("transform")).toBe(
+          "matrix(1, 0, 0, 1, -192, 0)"
+        );
+        // Check also that body has class 'menu-hidden'
+        expect(document.body.classList).toContain("menu-hidden");
+        done(); // Need because of async call to setTimeout used in beforeEach
+      });
+      // A test that ensures the menu changes visibility when the menu icon is clicked.
+      // This test have two expectations: does the menu display itself when clicked, and does it hide when clicked again?
+      it("should change visibility when the menu icon is clicked", done => {
+        done();
+      });
     });
 
-    // This test check whether all the feed names are defined and are not empty.
-    it('should have defined names', function () {
-      // Test here
+    describe("Initial Entries", () => {
+      let feedContainer, id;
 
+      // Test to check the entries are not empty.
+      it(`should not be empty for feeds`, done => {
+        done();
+      });
     });
-  });
-
 
-  describe('The Menu', () => {
-
-
-    // Test to check node hidden by default.
-    it('should be hidden by default', () => {
-      // test here
-    });
-    // A test that ensures the menu changes visibility when the menu icon is clicked. 
-    // This test have two expectations: does the menu display itself when clicked, and does it hide when clicked again?
-    it('should change visibility when the menu icon is clicked', (done) => {
-      done();
+    describe("New Feed Selection", () => {
+      // A test that ensures when a new feed is loaded by the loadFeed function that the content actually changes.
+      it(`should change content for feeds`, done => {
+        done();
+      });
     });
-
-  })
-
-  describe('Initial Entries', () => {
-    let feedContainer, id;
-
-    // Test to check the entries are not empty.
-    it(`should not be empty for feeds`, (done) => {
-      done();
-    })
-  })
-
-
-  describe('New Feed Selection', () => {
-
-    // A test that ensures when a new feed is loaded by the loadFeed function that the content actually changes.
-    it(`should change content for feeds`, (done) => {
-      done();
-    })
-  })
-}());
+  })()
+);

icomoon.css

@@ -1,28 +1,29 @@
 @font-face {
-	font-family: 'icomoon';
-	src:url('../fonts/icomoon.eot?efsk18');
-	src:url('../fonts/icomoon.eot?#iefixefsk18') format('embedded-opentype'),
-		url('../fonts/icomoon.woff?efsk18') format('woff'),
-		url('../fonts/icomoon.ttf?efsk18') format('truetype'),
-		url('../fonts/icomoon.svg?efsk18#icomoon') format('svg');
-	font-weight: normal;
-	font-style: normal;
+  font-family: "icomoon";
+  src: url("../fonts/icomoon.eot?efsk18");
+  src: url("../fonts/icomoon.eot?#iefixefsk18") format("embedded-opentype"),
+    url("../fonts/icomoon.woff?efsk18") format("woff"),
+    url("../fonts/icomoon.ttf?efsk18") format("truetype"),
+    url("../fonts/icomoon.svg?efsk18#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal;
 }
 
-[class^="icon-"], [class*=" icon-"] {
-	font-family: 'icomoon';
-	speak: none;
-	font-style: normal;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
+[class^="icon-"],
+[class*=" icon-"] {
+  font-family: "icomoon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
 
-	/* Better Font Rendering =========== */
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-list:before {
-	content: "\e600";
+.icon-menu:before {
+  content: "\e9bd";
 }