diff --git a/index.html b/index.html index 3ba0ab0..d756075 100755 --- a/index.html +++ b/index.html @@ -1,112 +1,57 @@ - - - - Feedr @ GA - - - - - + + + + Feedr @ GA + + + + + + - - - - - -
-
-

Feedr

 +
+
+

Feedr
-
-
- -
- - - -
+
+ +
- - - + + + + - diff --git a/js/app.js b/js/app.js index a6502cd..c639db9 100755 --- a/js/app.js +++ b/js/app.js @@ -1,3 +1,274 @@ /* - Please add all Javascript code to this file. + GA JS-SF-9 + Jonathan Kern + Please add all Javascript code to this file. */ + +'use strict'; + +// set up API functionality +const buzzFeedAPIKey = 'API_KEY'; +const buzzFeedUrl = 'https://newsapi.org/v2/top-headlines?sources=buzzfeed&apiKey=' + buzzFeedAPIKey; +const buzzFeedRequest = new Request(buzzFeedUrl); + +const guardianAPIKey = 'API_KEY'; +const guardianUrl = 'http://content.guardianapis.com/search?show-fields=lastModified,headline,trailText,thumbnail&api-key=' + guardianAPIKey; +const guardianRequest = new Request(guardianUrl); + +const nyTimesAPIKey = 'API_KEY'; +const nyTimesUrl = 'http://api.nytimes.com/svc/topstories/v2/sports.json?api-key=' + nyTimesAPIKey; +const nyTimesRequest = new Request(nyTimesUrl); + +let status; +let articles; +let title; +let description; +let tag; +let thumbnailUrl; +let imageUrl; +let publishDate; +let articleUrl; +let $newsSource; + +const $newsSourceSpan = $('.newsSource'); +const $main = $('#main'); +const $popUpWrapper = $('#popUp'); + +function beginAll() { + beginBuzzFeed(); + beginGuardian(); + beginNYTimes(); +} + +function beginBuzzFeed() { + fetch(buzzFeedRequest).then(function(response) { + if (response.ok) { + // get status + status = response.status; + // console.log('BuzzFeed Status: ' + status); + + // pull data and parse json + return response.json(); + } else { + alert('there was a problem with the request'); + } + }).then(function(data) { + // console.log(data); + $popUpWrapper.removeClass('loader'); + + buzzFeedHandler(data); + }); +} + +function beginGuardian() { + fetch(guardianRequest).then(function(response) { + if (response.ok) { + // get status + status = response.status; + // console.log('Guardian Status: ' + status); + // pull data and parse json + return response.json(); + } else { + alert('there was a problem with the request'); + } + }).then(function(data) { + // console.log(data); + $popUpWrapper.removeClass('loader'); + + guardianHandler(data); + }); +} + +function beginNYTimes() { + fetch(nyTimesRequest).then(function(response) { + if (response.ok) { + // get status + status = response.status; + // console.log('NY Times Status: ' + status); + // pull data and parse json + return response.json(); + } else { + alert('there was a problem with the request'); + } + }).then(function(data) { + // console.log(data); + $popUpWrapper.removeClass('loader'); + + nyTimesHandler(data); + }); +} + +function buzzFeedHandler(data) { + // console.log('BuzzFeed'); + + articles = data.articles; + // console.log(articles); + + articles.forEach(function(article) { + title = article.title; + description = article.description; + imageUrl = article.urlToImage; + articleUrl = article.url; + publishDate = article.publishedAt; + tag = 'Top Headlines'; + + return uiHandler(title, description, imageUrl, articleUrl, publishDate, tag); + }); +} + +function guardianHandler(data) { + // console.log('The Guardian'); + + articles = data.response.results; + // console.log(articles); + + articles.forEach(function(article) { + title = article.fields.headline; + description = article.fields.trailText; + imageUrl = article.fields.thumbnail; + articleUrl = article.webUrl; + publishDate = article.fields.lastModified; + tag = article.sectionName; + + return uiHandler(title, description, imageUrl, articleUrl, publishDate, tag); + }); +} + +function nyTimesHandler(data) { + console.log('NY Times'); + + articles = data.results; + // console.log(articles); + + articles.forEach(function(article) { + title = article.title; + description = article.abstract; + imageUrl = article.multimedia[0].url; + articleUrl = article.url; + publishDate = article.published_date; + tag = article.section; + + return uiHandler(title, description, imageUrl, articleUrl, publishDate, tag); + }); +} + +function uiHandler(title, description, imageUrl, articleUrl, publishDate, tag) { + // console.log('UI Stuff'); + + const $articleWrapper = $('
'); + const $thumbnailWrapper = $('
'); + const $articleContentWrapper = $('
'); + const $impressionsWrapper = $('
'); + const $clear = $('
'); + + // create img element + const $imageElement = $(''); + // create source for img + const $imageUrl = $imageElement.attr('src', imageUrl); + + // create heading elements + const $link = $(''); + const $h3Element = $('

'); + const $h6Element = $('

'); + + // convert publish date to human form + const $convertPublishDay = publishDate.substr(5, 5); + // console.log($convertPublishDay); + const $convertPublishYear = publishDate.substr(0,4); + const $convertPublishDate = $convertPublishDay + '-' + $convertPublishYear; + // console.log($convertPublishDate); + const $convertPublishTime = publishDate.substr(11, 5); + // console.log($convertPublishTime); + const $publishText = 'Published: ' + $convertPublishDate + '\n' + 'at ' + $convertPublishTime; + + // add to DOM + //append img to thumbnail wrapper + $thumbnailWrapper.append($imageElement); + + // append article to container + $main.append($articleWrapper); + + // append sections to article + $articleWrapper.append($thumbnailWrapper); + $articleWrapper.append($articleContentWrapper); + $articleWrapper.append($impressionsWrapper); + $articleWrapper.append($clear); + + // append title to h3 + $h3Element.append(title); + + // append h3 to link + $link.append($h3Element); + + // append to tag h6 + $h6Element.append(tag); + + // append headings to article content + $articleContentWrapper.append($link); + $articleContentWrapper.append($h6Element); + + // append publishDate to impressions + $impressionsWrapper.append($publishText); + + // click article to open pop-up + $articleWrapper.click(function() { + // show popup + $popUpWrapper.removeClass('hidden'); + + const $popUpH1Element = $('#popUp .container h1'); + const $popUpPElement = $('#popUp .container p'); + const $popUpAElement = $('.popUpAction'); + const $popUpArticleUrl = $popUpAElement.attr('href', articleUrl); + + $popUpH1Element.append(title); + $popUpPElement.append(description); + $popUpAElement.append($popUpArticleUrl); + + // click handler closePopUp + $('.closePopUp').click(function() { + $popUpWrapper.addClass('hidden'); + }); + }); +} + +function clear() { + // console.log('Reset everything!'); + $('#popUp .container').empty(); + $newsSourceSpan.empty(); + $main.empty(); +} + +$('.mainFeed').click(function() { + clear(); + beginAll(); +}); + +$('.buzzFeedSource').click(function() { + clear(); + + $newsSource = 'Buzzfeed'; + $newsSourceSpan.append($newsSource); + + beginBuzzFeed(); +}); + +$('.guardianSource').click(function() { + clear(); + + $newsSource = 'The Guardian'; + $newsSourceSpan.append($newsSource); + + beginGuardian(); +}); + +$('.nyTimesSource').click(function() { + clear(); + + $newsSource = 'The New York Times'; + $newsSourceSpan.append($newsSource); + + beginNYTimes(); +}); + +// show all by default +beginAll(); diff --git a/styles/style.css b/styles/style.css index fcfbf38..364caba 100755 --- a/styles/style.css +++ b/styles/style.css @@ -197,15 +197,19 @@ nav ul ul li { } .article .featuredImage { - width: 12%; float: left; margin: 1.5%; - max-width: 60px; + width: 50px; + height: 50px; + border-radius: 50%; + overflow: hidden; } .article .featuredImage img { - max-width: 100%; - border-radius: 50px; + height: 100%; + width: auto; + line-height: 50px; + display: block; } .article .articleContent { @@ -230,7 +234,7 @@ nav ul ul li { .article .impressions { width: 15%; float: right; - font-size: 30px; + font-size: 14px; margin-top: 15px; text-align: right; color: #097FB2;