Skip to content

Feedr project done #1

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 7 commits into
base: master
Choose a base branch
from
Open

Feedr project done #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
24d0e7d
type
julesforrest Mar 16, 2017
0a5b700
GA label
julesforrest Mar 16, 2017
c8e2a1f
got popup working
julesforrest Mar 16, 2017
c8487a1
basic stuff working for digg
julesforrest Apr 1, 2017
132d3cc
apis working
julesforrest Apr 1, 2017
8925280
filtering
julesforrest Apr 1, 2017
c53ef4d
finished project
julesforrest Apr 2, 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
65 changes: 7 additions & 58 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Feedr @ GA</title>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link rel="stylesheet" href="styles/normalize.css" media="screen" charset="utf-8">
<link rel="stylesheet" href="styles/html5bp.css" media="screen" charset="utf-8">
<link rel="stylesheet" href="styles/style.css" media="screen" charset="utf-8">
Expand All @@ -20,14 +21,14 @@

<header>
<section class="container">
<a href="#"><h1>Feedr</h1></a>
<a href="#" id="logo"><h1>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><a href="#">News Source: <span id="currentPub">All</span></a>
<ul id="sourceList">
<li><a href="#" id="nyt">The New York Times</a></li>
<li><a href="#" id="guardian">The Guardian</a></li>
<li><a href="#" id="digg">Digg</a></li>
</ul>
</li>
</ul>
Expand All @@ -50,58 +51,6 @@ <h1>Article title here</h1>
</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">
<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>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Expand Down
136 changes: 136 additions & 0 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,139 @@
/*
GA SF JSD6
Jules Forrest
Please add all Javascript code to this file.
*/

var createArticleListing = function(title, image, category, impressions, timestamp, publication) {
timestamp = new Date(timestamp).getTime();
return `<article class="article" data-date="${timestamp}" data-pub="${publication}"><section class="featuredImage">
<img src="${image}" alt="" />
</section>
<section class="articleContent">
<a href="#"><h3> ${title} </h3></a>
<h6 class="category">${category}</h6>
</section>
<section class="impressions">
${impressions}
</section>
<div class="clearfix"></div></article>`;
}

$(function() {
$('#popUp').removeClass('hidden');

var guardianRequest = $.get("https://accesscontrolalloworiginall.herokuapp.com/http://content.guardianapis.com/search?show-fields=thumbnail%2CtrailText%2Cwordcount&api-key=e8a00826-f3d6-4965-a89b-16ad2066bfa4");
var nytRequest = $.get("http://api.nytimes.com/svc/topstories/v2/home.json?api-key=2999869bd86b4da48852d255f65250ff");
var diggRequest = $.get("https://accesscontrolalloworiginall.herokuapp.com/http://digg.com/api/news/popular.json");

$.when(guardianRequest, nytRequest, diggRequest).done(function(guardianResponse, nytResponse, diggResponse){

if (guardianResponse){
if (guardianResponse[0].response == null){
alert('This feed could not be loaded');
} else {
console.log(guardianResponse);
guardianResponse[0].response.results.forEach(function(result){
var newArticle = createArticleListing(result.webTitle, result.fields.thumbnail, result.sectionName, result.fields.wordcount, result.webPublicationDate, "guardian");
newArticle = $(newArticle).data( "articleData", { description: result.fields.trailText, url: result.webUrl } );
$("#main").append(newArticle);
})
}
}

if (nytResponse){
if (nytResponse[0].results == null){
alert('This feed could not be loaded');
} else {
console.log(nytResponse);
nytResponse[0].results.forEach(function(result){
var imgUrl = result.multimedia[0] ? result.multimedia[0].url : null;
var newArticle = createArticleListing(result.title, imgUrl, result.section, result.abstract.length, result.published_date, "nyt");
newArticle = $(newArticle).data( "articleData", { description: result.abstract, url: result.url } );
$("#main").append(newArticle);
})
}
}

if (diggResponse){
if (diggResponse[0].data == null){
alert('This feed could not be loaded');
} else {
console.log(diggResponse);
diggResponse[0].data.feed.forEach(function(result){
var newArticle = createArticleListing(result.content.title, result.content.media.images[0].url, result.content.tags[0].name, result.digg_score, (result.date_published*1000), "digg");
newArticle = $(newArticle).data( "articleData", { description: result.content.description, url: result.content.url } );
$("#main").append(newArticle);
})
}
}

var $articleListContainer = $('#main');
var $articleList = $articleListContainer.children('article');
$articleList.sort(function(a,b){
var ad = a.getAttribute('data-date');
var bd = b.getAttribute('data-date');

if(ad > bd) {
return 1;
}
if(ad < bd) {
return -1;
}
return 0;
});

$articleList.detach().appendTo($articleListContainer);
$('#popUp').addClass('hidden');
}).fail(function() {

});

});

$('#search img').click(function(){
$(this).parents('#search').toggleClass('active');
});

$('#main').on('click', '.article', function(){
$('#popUp').removeClass('hidden loader');
var headline = $(this).find('h3').text();
$('#popUp').find('h1').text(headline);
var description = $(this).data("articleData").description;
$('#popUp').find('p').text(description);
var url = $(this).data("articleData").url;
$('#popUp').find('.popUpAction').attr("href", url);
});

$('.closePopUp').click(function(){
$('#popUp').addClass('hidden');
});

$('#main').on('click', '.article', function(){
$('#popUp').removeClass('hidden loader');
var headline = $(this).find('h3').text();
$('#popUp').find('h1').text(headline);
var description = $(this).data("articleData").description;
$('#popUp').find('p').text(description);
var url = $(this).data("articleData").url;
$('#popUp').find('.popUpAction').attr("href", url);
});

var pubToggle = function(pub, pubName){
$('#popUp').removeClass('hidden');
$('#currentPub').text(pubName);
$("#main").find(`article[data-pub="${pub}"]`).removeClass('hidden');
$("#main").find(`article[data-pub!="${pub}"]`).addClass('hidden');
$('#popUp').addClass('hidden');
};

$('#sourceList li').on('click', function(){
var pub = $(this).children('a').attr('id');
var pubName = $(this).text();
pubToggle(pub, pubName);
});

$('#logo').on('click', function(){
$('#currentPub').text("All");
$("#main").find('.article').removeClass('hidden');
})
2 changes: 1 addition & 1 deletion styles/normalize.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

html {
font-family: sans-serif; /* 1 */
font-family: 'Work Sans', sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
Expand Down
8 changes: 6 additions & 2 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* General styles */
.container {
max-width: 1000px;
margin: 0 auto;
Expand Down Expand Up @@ -174,7 +173,7 @@ nav ul li:hover > ul {

/* First Tier Dropdown */
nav ul ul li {
width:170px;
width: 200px;
float:none;
display:list-item;
position: relative;
Expand Down Expand Up @@ -235,3 +234,8 @@ nav ul ul li {
text-align: right;
color: #097FB2;
}

.category {
text-transform: uppercase;
letter-spacing: 1px;
}