diff --git a/index.html b/index.html
index 3ba0ab0..de67a02 100755
--- a/index.html
+++ b/index.html
@@ -20,85 +20,48 @@
 
         <header>
           <section class="container">
-            <a href="#"><h1>Feedr</h1></a>
+            <a href="#"><h1 id="feedrButton">Feedr</h1></a>
             <nav>
               <ul>
                 <li><a href="#">News Source: <span>Source Name</span></a>
                   <ul>
-                      <li><a href="#">Source 1</a></li>
-                      <li><a href="#">Source 2</a></li>
-                      <li><a href="#">Source 3</a></li>
+                      <li id="huffPoFilter"><a href="#">HuffPo</a></li>
+                      <li id="guardianFilter"><a href="#">Guardian</a></li>
+                      <li id="source3"><a href="#">Source 3</a></li>
                   </ul>
                 </li>
               </ul>
               <section id="search">
-                <input type="text" name="name" value="">
+                <input id="searchBox" type="text" name="name" value="" size="30">
                 <a href="#"><img src="images/search.png" alt="" /></a>
               </section>
             </nav>
             <div class="clearfix"></div>
           </section>
         </header>
-        <div id="popUp" class="loader hidden">
+
+        <div id="popUp" class="hidden">
           <a href="#" class="closePopUp">X</a>
-          <div class="container">
+          <div id="popUpContent" class="container">
             <h1>Article title here</h1>
             <p>
-              Article description/content here.
+
             </p>
             <a href="#" class="popUpAction" target="_blank">Read more from source</a>
           </div>
         </div>
+
         <section id="main" class="container">
-          <article class="article">
-            <section class="featuredImage">
-              <img src="images/article_placeholder_1.jpg" alt="" />
-            </section>
-            <section class="articleContent">
-                <a href="#"><h3>Test article title</h3></a>
-                <h6>Lifestyle</h6>
-            </section>
-            <section class="impressions">
-              526
-            </section>
-            <div class="clearfix"></div>
-          </article>
-          <article class="article">
-            <section class="featuredImage">
-              <img src="images/article_placeholder_2.jpg" alt="" />
-            </section>
-            <section class="articleContent">
-                <a href="#"><h3>Test article title</h3></a>
-                <h6>Lifestyle</h6>
-            </section>
-            <section class="impressions">
-              526
-            </section>
-            <div class="clearfix"></div>
-          </article>
-          <article class="article">
-            <section class="featuredImage">
-              <img src="images/article_placeholder_2.jpg" alt="" />
-            </section>
-            <section class="articleContent">
-                <a href="#"><h3>Test article title</h3></a>
-                <h6>Lifestyle</h6>
-            </section>
-            <section class="impressions">
-              526
-            </section>
-            <div class="clearfix"></div>
-          </article>
-          <article class="article">
+          <article id="hidden-template" class="article">
             <section class="featuredImage">
               <img src="images/article_placeholder_1.jpg" alt="" />
             </section>
             <section class="articleContent">
-                <a href="#"><h3>Test article title</h3></a>
-                <h6>Lifestyle</h6>
+                <a href="#"><h3 class="articleTitle">Test article title</h3></a>
+                <h6>Test section name</h6>
             </section>
-            <section class="impressions">
-              526
+            <section class="articleDate">
+              Date
             </section>
             <div class="clearfix"></div>
           </article>
diff --git a/js/app.js b/js/app.js
index a6502cd..89a23db 100755
--- a/js/app.js
+++ b/js/app.js
@@ -1,3 +1,191 @@
 /*
-  Please add all Javascript code to this file.
+GA JS-SF-7
+Kesha Seeley
 */
+
+// Pseudocode:
+// 1. Pull feeds from outside source.
+// 2. Filter between publications through the dropdown on the header menu.
+// 3. Clicking on the articles will load a pop up with more info.
+// 4. User can dismiss the additional info or go to the referenced article.
+// 5. After we pull from the respective feed APIs, we will toggle the appropriate classes and content for the provided site architecture.
+
+/* Proxy server to filter API requests:
+$.get("https://accesscontrolalloworiginall.herokuapp.com/http://digg.com/api/news/popular.json", function(results){
+console.log(results);
+results.data.feed.forEach(function(result){
+$("ul").append("<li>"+result.content.title+"</li>")
+})
+});
+*/
+
+$(document).ready(function() {
+
+  addHuffPo();
+  addGuardian();
+  filterBySearch();
+  closePopUp();
+
+  $('#guardianFilter').on('click', function (event) {
+    event.preventDefault();
+    filterGuardian();
+  });
+
+  $('#huffPoFilter').on('click', function (event) {
+    event.preventDefault();
+    filterHuffPo();
+  });
+
+  $('#feedrButton').on('click', function (event){
+    event.preventDefault();
+    filterByTime();
+  });
+
+  $('#search').on('click', function (event) {
+    event.preventDefault();
+    $('#search').addClass("active");
+  });
+
+});
+
+var addArticleToPage = function(url, title, sectionName, publicationDate, description, imageUrl){
+  //console.log(url, title, sectionName, publicationDate, description, imageUrl);
+  // clone the first instance of class="article"
+  var $articleClone = $('.article').first().clone();
+  // remove id="hidden-template"
+  $articleClone.removeAttr('id');
+  // grab popup block and remove class="hidden"
+  $($articleClone).click(function(event){
+    event.preventDefault();
+    $('#popUp').removeClass('hidden');
+    var $popUpContent = $('#popUpContent').children();
+    $($popUpContent[0]).html('<h1>' + title + '</h1>');
+    $($popUpContent[1]).html('<p>' + description + '</p>');
+    $($popUpContent[2]).attr('href', url);
+    //console.log($popUpContent);
+  })
+  if (imageUrl) {
+    var $featuredImage = $articleClone.children()[0];
+    // to use API image of article:
+    $($featuredImage).find("img").attr('src', imageUrl);
+  }
+  // get the content w/in the html
+  var $articleContent = $articleClone.children()[1];
+  // get the href and h6
+  var $articleContentChildren = $($articleContent).children();
+  // to avoid duplicate href, change only the attribute of selected object
+  $($articleContentChildren[0]).attr('href', url);
+  // change title
+  $($articleContentChildren[0]).html('<h3 class="articleTitle">' + title + '</h3>');
+  // change section name
+  $($articleContentChildren[1]).html(sectionName);
+  var articleDate = $($articleClone.children()[2]).html(publicationDate);
+  $('#main').append($articleClone);
+  //console.log($articleClone);
+}
+
+var closePopUp = function(){
+  $('.closePopUp').click(function(event){
+      event.preventDefault();
+      $('#popUp').addClass('hidden');
+  })
+}
+
+var addGuardian = function(){
+  // // Guardian API
+  $.ajax({
+    url: "https://content.guardianapis.com/search?api-key=2f0d0817-d151-477d-891f-2f97fa4961ee",
+    data: {
+      format: "json"
+    },
+
+    success: function(data) {
+      //console.log(data.response);
+      var articleSort = data.response.results.sort(function(a, b){
+        return new Date(b.webPublicationDate) - new Date(a.webPublicationDate);
+      })
+
+      articleSort.forEach(function(newsStory) {
+        addArticleToPage(newsStory.webUrl, newsStory.webTitle, newsStory.sectionName, newsStory.webPublicationDate, "", "");
+      })
+    }
+  })
+}
+
+var addHuffPo = function(){
+  //  News API
+  $.ajax({
+    url: "https://newsapi.org/v1/articles?source=the-huffington-post&sortBy=top&apiKey=52a18f8747024a0489c4eacf5be95e32",
+    data: {
+      format: "json"
+    },
+
+    success: function(data) {
+      //console.log(data);
+
+      var articleSort = data.articles.sort(function(a, b){
+        return new Date(b.publishedAt) - new Date(a.publishedAt);
+      })
+      //console.log(articleSort);
+      articleSort.forEach(function(newsStory) {
+        addArticleToPage(newsStory.url, newsStory.title, "", newsStory.publishedAt, newsStory.description, newsStory.urlToImage);
+      })
+    }
+  })
+}
+
+var filterByTime = function(){
+  // grab all the children of id="main" except for the first child (hidden template)
+  var $mainChildren = $('#main').children().not(':first');
+  // create a jquery function to sort by newest date
+  $mainChildren.sort(function(a,b){
+    a = $(a).children('.articleDate').html();
+    b = $(b).children('.articleDate').html();
+    return new Date(b) - new Date(a);
+  })
+  // empty out the article content
+  $('#main').children().not(':first').remove();
+  // replace with the sorted order
+  $($mainChildren).each(function(){
+    $('#main').append(this);
+  })
+}
+
+var filterBySearch  = function(){
+
+  // var allRemoved = [];
+
+  $('#searchBox').keyup(function(){
+
+    var $allTitles = $('#main').children().not(':first');
+    // get text from text box
+    var input = $(this).val();
+    // compares text from searchBox to articleTitle
+    $($allTitles).each(function(){
+      var $title = $(this).children();
+      var $titleText = $($title[1]).children()[0];
+      $titleText = $($titleText).text();
+      // matches searchBox regardless of case
+      if ($titleText.toLowerCase().indexOf(input) < 0) {
+        // allRemoved.push(this);
+        // console.log(allRemoved)
+        $(this).remove();
+      }
+      // else if (allRemoved.sometitle.indexOf(input) >= 0) {
+      //   #main.append
+      // }
+    })
+  })
+
+}
+
+
+var filterGuardian = function(){
+  $('#main').children().not(':first').remove();
+  addGuardian();
+}
+
+var filterHuffPo = function(){
+  $('#main').children().not(':first').remove();
+  addHuffPo();
+}
diff --git a/styles/style.css b/styles/style.css
index fcfbf38..846e256 100755
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,3 +1,9 @@
+/* KLS new styles */
+#hidden-template {
+  display: none;
+}
+
+
 /* General styles */
 .container {
   max-width: 1000px;
@@ -59,7 +65,7 @@
 
 /* Header styles */
 header {
-  background-color: #FE052C;
+  background-color: #00838F;
   position: fixed;
   top: 0;
   left: 0;
@@ -103,7 +109,7 @@ header #search a {
 }
 
 header #search a:hover {
-  background: #CC0020;
+  background: #E0F7FA;
 }
 
 header #search img {
@@ -128,7 +134,7 @@ header #search.active input {
 }
 
 header #search.active a {
-  background: #CC0020;
+  background: #00838F;
 }
 
 header nav a {
@@ -142,8 +148,8 @@ header nav a {
 }
 
 header nav a:hover {
-  background-color: #fff;
-  color: #CC0020;
+  background-color: #E0F7FA;
+  color: #00838F;
 }
 
 nav ul {
@@ -156,7 +162,7 @@ nav ul {
 
 nav ul li {
 	display:inline-block;
-	background-color: #CC0020;
+	background-color: #00838F;
   position: relative;
 }
 
@@ -219,7 +225,7 @@ nav ul ul li {
 
 .article .articleContent h3 {
   margin-bottom: 0;
-  color: #FE052C;
+  color: #00838F;
 }
 
 .article .articleContent h6 {