Skip to content

feedr test #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feedr test #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
654c7b0
feedr test
keshaseeley Jun 20, 2017
b96d493
feedr assignment
keshaseeley Jul 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 15 additions & 52 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
190 changes: 189 additions & 1 deletion js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
}
20 changes: 13 additions & 7 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
/* KLS new styles */
#hidden-template {
display: none;
}


/* General styles */
.container {
max-width: 1000px;
Expand Down Expand Up @@ -59,7 +65,7 @@

/* Header styles */
header {
background-color: #FE052C;
background-color: #00838F;
position: fixed;
top: 0;
left: 0;
Expand Down Expand Up @@ -103,7 +109,7 @@ header #search a {
}

header #search a:hover {
background: #CC0020;
background: #E0F7FA;
}

header #search img {
Expand All @@ -128,7 +134,7 @@ header #search.active input {
}

header #search.active a {
background: #CC0020;
background: #00838F;
}

header nav a {
Expand All @@ -142,8 +148,8 @@ header nav a {
}

header nav a:hover {
background-color: #fff;
color: #CC0020;
background-color: #E0F7FA;
color: #00838F;
}

nav ul {
Expand All @@ -156,7 +162,7 @@ nav ul {

nav ul li {
display:inline-block;
background-color: #CC0020;
background-color: #00838F;
position: relative;
}

Expand Down Expand Up @@ -219,7 +225,7 @@ nav ul ul li {

.article .articleContent h3 {
margin-bottom: 0;
color: #FE052C;
color: #00838F;
}

.article .articleContent h6 {
Expand Down