From af2b89824a88d8c619b47e9154cbc831f05546b9 Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Wed, 12 Sep 2018 20:28:15 +0100 Subject: [PATCH 01/37] add html placeholder elements --- index.html | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..1525f86 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + + + Responsive News Reader + + + +
+ logo +

Here's the news

+
+ +
+
+

News article headline place holder

+ +

+

+

+ +
+
+ + + + + + \ No newline at end of file From 2ad6942161bce0c58987009f201a722149c3d610 Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Wed, 12 Sep 2018 21:34:08 +0100 Subject: [PATCH 02/37] add FF Meta VF to style.css --- index.html | 3 ++- style.css | 13 +++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 style.css diff --git a/index.html b/index.html index 1525f86..86fdd15 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,13 @@ Responsive News Reader +
logo -

Here's the news

+

Here’s the news

diff --git a/style.css b/style.css new file mode 100644 index 0000000..2fcb240 --- /dev/null +++ b/style.css @@ -0,0 +1,13 @@ +/* FF Meta Variable Demo Font */ +@font-face { + font-family: 'FF Meta VF'; + src: url('https://variablefonts.monotype.com/MetaVariableDemo-Set.woff2') + format('woff2'); + font-display: swap; + font-style: normal italic; + font-weight: 100 900; +} + +body { + font-family: 'FF Meta VF', Helvetica, Arial, sans-serif; +} From 923c964e5744d0adbe3464a6a4c92bde5c260a16 Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Fri, 14 Sep 2018 11:23:40 +0100 Subject: [PATCH 03/37] create article and add to timeline --- index.html | 11 +++-------- index.js | 43 +++++++++++++++++++++++++++++++++++++++++++ style.css | 4 ++++ 3 files changed, 50 insertions(+), 8 deletions(-) create mode 100644 index.js diff --git a/index.html b/index.html index 86fdd15..f3f2700 100644 --- a/index.html +++ b/index.html @@ -16,14 +16,7 @@

Here’s the news

-
-

News article headline place holder

- -

-

-

- -
+
@@ -31,6 +24,8 @@

News article headline place holder

Powered by NewsAPI.org

+ + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..3ed8280 --- /dev/null +++ b/index.js @@ -0,0 +1,43 @@ +fetch( + 'https://newsapi.org/v2/everything?q=bitcoin&from=2018-08-14&sortBy=publishedAt&apiKey=f29390555fbc483ba17e7ec1cb19af1a' +) + .then(response => { + return response.json(); + }) + .then(data => { + addArticleToFeed(data.articles); + }) + .catch(err => { + displayErrorToUser('Server failed to return data'); + }); + +const createArticle = articleData => { + let article = document.createElement('article'); + article.classList.add('news__article'); + article.innerHTML = `

${articleData[0].title}

+ ${articleData[0].title} +

${articleData[0].description}

+

${ + articleData[0].source.name + }

+

${articleData[0].publishedAt}

+ ${ + articleData[0].url + }`; + + console.log(article); + return article; +}; + +const addArticleToFeed = data => { + const newsArticle = createArticle(data); + const newsFeed = document.querySelector('section.news'); + // const refArticle = newsFeed.querySelector('article:first-child'); + newsFeed.appendChild(newsArticle); +}; + +const displayErrorToUser = err => { + alert(err); +}; diff --git a/style.css b/style.css index 2fcb240..02d98cd 100644 --- a/style.css +++ b/style.css @@ -11,3 +11,7 @@ body { font-family: 'FF Meta VF', Helvetica, Arial, sans-serif; } + +img.news__image { + width: 100%; +} From ff0073b4286b831fefeec210a7999f32a7d62faa Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Fri, 14 Sep 2018 13:19:18 +0100 Subject: [PATCH 04/37] add articles to timeline --- index.js | 53 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 33 insertions(+), 20 deletions(-) diff --git a/index.js b/index.js index 3ed8280..78f2ad6 100644 --- a/index.js +++ b/index.js @@ -5,37 +5,50 @@ fetch( return response.json(); }) .then(data => { - addArticleToFeed(data.articles); + addArticlesToNewsfeed(data.articles, 5); }) .catch(err => { displayErrorToUser('Server failed to return data'); }); const createArticle = articleData => { - let article = document.createElement('article'); + console.log(articleData.title); + + const article = document.createElement('article'); article.classList.add('news__article'); - article.innerHTML = `

${articleData[0].title}

- ${articleData[0].title} -

${articleData[0].description}

-

${ - articleData[0].source.name - }

-

${articleData[0].publishedAt}

- ${ - articleData[0].url - }`; + const elapsedTime = Math.floor( + (Date.now() - new Date(articleData.publishedAt).valueOf()) / 60000 + ); - console.log(article); + article.innerHTML = `

${articleData.title}

+

Published ${elapsedTime} mins ago

+ ${articleData.title} +

${ + articleData.description + }

+

Read the full story at ${ + articleData.source.name + }

+ `; return article; }; -const addArticleToFeed = data => { - const newsArticle = createArticle(data); - const newsFeed = document.querySelector('section.news'); - // const refArticle = newsFeed.querySelector('article:first-child'); - newsFeed.appendChild(newsArticle); +const getArticles = (data, number) => { + return data.filter(article => data.indexOf(article) <= number - 1); +}; + +const addArticlesToNewsfeed = (data, number) => { + const articles = getArticles(data, number); + articles.forEach(story => { + const newsArticle = createArticle(story); + const newsFeed = document.querySelector('section.news'); + const refArticle = newsFeed.querySelector('article:first-child'); + newsFeed.appendChild(newsArticle); + }); }; const displayErrorToUser = err => { From 882ef3bd07f323d84ef8f8d813627592fe864733 Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Fri, 14 Sep 2018 15:27:08 +0100 Subject: [PATCH 05/37] time elapsed since publication with conditional plurals --- index.js | 37 +++++++++++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 78f2ad6..220e5d1 100644 --- a/index.js +++ b/index.js @@ -1,11 +1,11 @@ fetch( - 'https://newsapi.org/v2/everything?q=bitcoin&from=2018-08-14&sortBy=publishedAt&apiKey=f29390555fbc483ba17e7ec1cb19af1a' + 'https://newsapi.org/v2/everything?q=bitcoin&sortBy=publishedAt&apiKey=f29390555fbc483ba17e7ec1cb19af1a' ) .then(response => { return response.json(); }) .then(data => { - addArticlesToNewsfeed(data.articles, 5); + addArticlesToNewsfeed(data.articles, 25); }) .catch(err => { displayErrorToUser('Server failed to return data'); @@ -16,12 +16,11 @@ const createArticle = articleData => { const article = document.createElement('article'); article.classList.add('news__article'); - const elapsedTime = Math.floor( - (Date.now() - new Date(articleData.publishedAt).valueOf()) / 60000 - ); + + const elapsedTime = getTimeSinceArticlePublication(articleData.publishedAt); article.innerHTML = `

${articleData.title}

-

Published ${elapsedTime} mins ago

+

Published ${elapsedTime} ago

${articleData.title} @@ -41,6 +40,32 @@ const getArticles = (data, number) => { return data.filter(article => data.indexOf(article) <= number - 1); }; +const pluralUnits = (val, unit) => { + console.log(val); + return val >= 2 ? unit.replace(' ', 's ') : unit; +}; + +const getTimeSinceArticlePublication = date => { + let mins = Math.floor((Date.now() - new Date(date).valueOf()) / 60000); + let hours = mins / 60; + console.log(hours + 'hours'); + let days = hours / 24; + console.log(days + 'days'); + let elapsedTime = ''; + if (days >= 1) { + elapsedTime += `${Math.floor(days)} ${pluralUnits(days, 'day ')}`; + hours = hours % 24; + } + if (hours >= 1) { + elapsedTime += `${Math.floor(hours)} ${pluralUnits(hours, 'hour ')}`; + mins = mins % 60; + } + + elapsedTime += `${mins} ${pluralUnits(mins, 'min ')}`; + + return elapsedTime; +}; + const addArticlesToNewsfeed = (data, number) => { const articles = getArticles(data, number); articles.forEach(story => { From 3e90cbfa5c74f66f74ea213233752cf916e3388e Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Fri, 14 Sep 2018 17:22:45 +0100 Subject: [PATCH 06/37] refactor --- index.js | 109 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 66 insertions(+), 43 deletions(-) diff --git a/index.js b/index.js index 220e5d1..b601bb7 100644 --- a/index.js +++ b/index.js @@ -1,81 +1,104 @@ -fetch( - 'https://newsapi.org/v2/everything?q=bitcoin&sortBy=publishedAt&apiKey=f29390555fbc483ba17e7ec1cb19af1a' -) +const setCategory = cat => { + return `https://newsapi.org/v2/top-headlines?country=gb&category=${cat}&apiKey=f29390555fbc483ba17e7ec1cb19af1a`; +}; + +console.log(setCategory('entertainment')); + +fetch(setCategory('entertainment')) .then(response => { return response.json(); }) .then(data => { - addArticlesToNewsfeed(data.articles, 25); + addArticlesToFeed(data.articles); }) .catch(err => { displayErrorToUser('Server failed to return data'); }); -const createArticle = articleData => { - console.log(articleData.title); +// Error function +const displayErrorToUser = err => { + alert(err); +}; + +// Content creation functions +const createArticle = articleData => { const article = document.createElement('article'); article.classList.add('news__article'); - const elapsedTime = getTimeSinceArticlePublication(articleData.publishedAt); - article.innerHTML = `

${articleData.title}

-

Published ${elapsedTime} ago

- ${articleData.title} -

${ - articleData.description - }

-

Read the full story at ${ +

Published ${elapsedTime} ago

+ ${articleData.title} +

${ + articleData.description + }

+

Read the full story at ${ articleData.source.name - }

- `; + }

`; + return article; }; -const getArticles = (data, number) => { - return data.filter(article => data.indexOf(article) <= number - 1); +const createArticles = data => { + const newsWrapper = document.createElement('div'); + data.forEach(story => { + const newsArticle = createArticle(story); + newsWrapper.appendChild(newsArticle); + }); + + return newsWrapper; +}; + +const addArticlesToFeed = data => { + const newsFeed = document.querySelector('section.news'); + const stories = createArticles(data); + newsFeed.appendChild(stories); }; +// Content helper functions + const pluralUnits = (val, unit) => { - console.log(val); return val >= 2 ? unit.replace(' ', 's ') : unit; }; const getTimeSinceArticlePublication = date => { let mins = Math.floor((Date.now() - new Date(date).valueOf()) / 60000); let hours = mins / 60; - console.log(hours + 'hours'); let days = hours / 24; - console.log(days + 'days'); + let weeks = days / 7; let elapsedTime = ''; if (days >= 1) { - elapsedTime += `${Math.floor(days)} ${pluralUnits(days, 'day ')}`; - hours = hours % 24; + return (elapsedTime += `${Math.floor(days)} ${pluralUnits(days, 'day ')}`); } if (hours >= 1) { - elapsedTime += `${Math.floor(hours)} ${pluralUnits(hours, 'hour ')}`; - mins = mins % 60; + return (elapsedTime += `${Math.floor(hours)} ${pluralUnits( + hours, + 'hour ' + )}`); } - elapsedTime += `${mins} ${pluralUnits(mins, 'min ')}`; - - return elapsedTime; + return (elapsedTime += `${mins} ${pluralUnits(mins, 'min ')}`); }; -const addArticlesToNewsfeed = (data, number) => { - const articles = getArticles(data, number); - articles.forEach(story => { - const newsArticle = createArticle(story); - const newsFeed = document.querySelector('section.news'); - const refArticle = newsFeed.querySelector('article:first-child'); - newsFeed.appendChild(newsArticle); - }); -}; +// UI interactivity functions -const displayErrorToUser = err => { - alert(err); +// Pagination + +const addPagination = () => { + const nextPage = document.createElement('button'); + nextPage.textContent = 'More stories'; + + return nextPage; }; + +// Search + +// Category select + +// Filter data to only return stories with description + +// Give me cats! From 0d3ebddfbb646bdf9c0d0798f1e34311ec911da8 Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Sat, 15 Sep 2018 08:37:50 +0100 Subject: [PATCH 07/37] initialise and set News API URL --- index.html | 16 +++++++++++++--- index.js | 29 ++++++++++++++++++++++------- 2 files changed, 35 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index f3f2700..88915ca 100644 --- a/index.html +++ b/index.html @@ -14,11 +14,21 @@ logo

Here’s the news

- +
- +
-