Project 2 Feedr Rachel Yankelevitz.js

$(document).ready(function(){

  // Array to store all feed sources
  var SOURCES = [
    {
      displayName: "Reddit",
      url: "https://www.reddit.com/r/worldnews/top/.json",
      proxyRequired: true,
      defaultSource: true, // You can have only one default source
      formatResponse: function(response) {
        var items = response.data.children;
        return items.map(function(child) {
            return {
              title: child.data.title,
              author: child.data.author,
              score: child.data.score,
              link: child.data.url,
              thumbnail: child.data.thumbnail,
              tag: child.data.subreddit,
              description: child.data.domain
            };
        });
      }
    },
    {
      displayName: "Mashable",
      url: "http://mashable.com/stories.json",
      proxyRequired: true,
      defaultSource: false,
      formatResponse: function(response){
        var articles = response.new;
          return _.map(articles, function(article) {
            return {
              description: article.content.plain,
              score: article.shares.total,
              link: article.link,
              tag: article.channel,
              title: article.title,
              thumbnail: article.responsive_images[2].image
            }
      });
      }
    },
    {
      displayName: "Digg",
      url: "http://digg.com/api/news/popular.json",
      proxyRequired: true,
      defaultSource: false,
      formatResponse: function(response){
        var articles = response.data.feed;
          return _.map(articles, function(article) {
              return {
                  description: article.content.description,
                  score: article.digg_score,
                  link: article.content.url,
                  tag: article.content.kicker,
                  title: article.content.title,
                  thumbnail: article.content.media.images[0].url
              }
          });
      }
    }
  ];

  // Prefix url for proxy
  var PROXY_URL = "https://accesscontrolalloworiginall.herokuapp.com/";
  //this appends to the non-default apis because they need to be called with an appended url
  // Utils object to store any misc. methods
  var Utils = {
    markupFromArticles: function(articles) {

      return _.map(articles, function(article) {
        return Utils.markupFromSingleArticle(article);
      }).join('');
    },
    markupFromSingleArticle: function(article) {
      return Utils.articleTemplate(article);
    },
    articleTemplate: _.template('<article class="article clearfix">' +
      '<section class="featuredImage">' +
        '<img src="<%= thumbnail %>" alt="">' +
      '</section>' +
      '<section class="articleContent">' +
        '<a data-description="<%= description %>" href="<%= link %>" ><h3><%= title %></h3></a>' +
        '<h6><%= tag %></h6>' +
      '</section>' +
      '<section class="impressions"><%= score %></section>' +
    '</article>')
  };

  // App object to store all app relates metods
  var App = {
    init: function() {
      // Methods that need to be called on initialization
      App.bindEvents();
      App.showDefaultFeed();
      App.displayDropDown();
    },
    showDefaultFeed: function() {
      var defaultFeed = _.findWhere(SOURCES, { defaultSource: true });
      App.showFeed(defaultFeed);
    },
    currentArticles: [],
    showFeed: function(source) {
      var request = App.requestFeed(source);
      // debugger;
      request.done(function(response) {
        var currentArticles = source.formatResponse(response);
        App.currentArticles = currentArticles;
        App.renderArticles(currentArticles);
      });
      // add in fail scenario
    },
    requestFeed: function(source){
      var url = source.proxyRequired ? PROXY_URL + source.url : source.url;
      App.setView('loader');
      return $.ajax(url, {
        dataType: 'json'
      });
    },

    displayDropDown: function() {
        SOURCES.forEach(function(item) {
            var sourceHTML = _.template('<li><a href="#"><%= displayName %></a></li>')
            var sourceName = sourceHTML(item);
            $(".sources-dropdown").append(sourceName);
        });

    },
    //onclick of list item, go to renderArticles function//

    renderArticles: function(articles) {
      App.setView('feed');
      var articlesHTML = Utils.markupFromArticles(articles);
      $("#main").html(articlesHTML);
   
    },
    bindEvents: function() {

        $(".closePopUp").on("click",function(e) {
            e.preventDefault();
            App.setView('feed');
        });

        // $('.sources-dropdown').on('click', 'a', App.showFeed); <-- don't delete this!!!!
        $(".sources-dropdown").on("click", "li", function() {
            var index = $(this).index();
            var feedObject = SOURCES[index];
            App.showFeed(feedObject);
        });
      // Attach event listeners

        $("section#main").on("click", "article a", function(e) {
            e.preventDefault();
            App.setView('detail');
            var buttonLink = $(this).attr('href');
             $('.container > a').attr('href', buttonLink);
             $('.container > h1').text(this.text);
             var desc = $(this).data('description');
             $('.container > p').text(desc);
             $('#popUp').removeClass('loader hidden');
             $('.closePopUp').removeClass('hidden');
            
             // console.log('desc', desc); <-- sanity check for the desc variable//
            

        });

    },
    setView: function(viewType) {
      var $popup = $('#popUp');
      var $closePopUp = $('.closePopUp');

      if (viewType === 'loader') {
        $popup.removeClass('hidden');
        $closePopUp.addClass('hidden');
        $popup.addClass('loader');
      }
      else if (viewType === 'detail') {
        $popup.removeClass('hidden');
        $closePopUp.removeClass('hidden');
        $popup.removeClass('loader');
      }
      else if (viewType === 'feed') {
        $popup.addClass('hidden');
        $closePopUp.addClass('hidden');
      }
    }
  };



  App.init();
});

4/4

This is technically sound and well written. Great job!

Some thoughts,

• https://gist.github.com/donoage/ca264ee1acc03a5220b3a50bd4886c03#file-project-2-feedr-rachel-yankelevitz-js-L161-L162

It strikes me as a bit odd that you thought to put this in when you've already done the showing the popup part with App.setView('detail');

• https://gist.github.com/donoage/ca264ee1acc03a5220b3a50bd4886c03#file-project-2-feedr-rachel-yankelevitz-js-L140-L167

You can break these out into their own methods and just have a line each that calls those methods when the event handlers are run.