From 576794933dece90554d7024dbf0fadfc6d8fcf4a Mon Sep 17 00:00:00 2001 From: Phil B Date: Fri, 14 Sep 2018 00:39:05 +0100 Subject: [PATCH 01/13] Unstyled but kind of working news app --- images/header-ventoux.jpg | Bin 0 -> 17795 bytes index.html | 54 ++++++++++++++++++++++ index.js | 92 ++++++++++++++++++++++++++++++++++++++ style.css | 83 ++++++++++++++++++++++++++++++++++ 4 files changed, 229 insertions(+) create mode 100644 images/header-ventoux.jpg create mode 100644 index.html create mode 100644 index.js create mode 100644 style.css diff --git a/images/header-ventoux.jpg b/images/header-ventoux.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5df79421f1d161047daff3520f2f2d73154ac069 GIT binary patch literal 17795 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 + + + + + + + Layout 2 + + + + +

+
+
+
+ +
Search for anything. About cycling ....
+
SEARCH BOX
+
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..a26dc97 --- /dev/null +++ b/index.js @@ -0,0 +1,92 @@ +function formListener () { + const formElement = document.querySelector("form"); + const formInput = document.querySelector("#form-search"); + formElement.addEventListener('submit', event => { + event.preventDefault(); + clearArticles(); + search = formInput.value; + page=1; + getArticles(1) + console.log("HI"); + }); +} + +function nextListener () { + const nextButton = document.querySelector("#next"); + nextButton.addEventListener('click', event => { + page ++; + console.log(`getting page: ${page}`) + + getArticles(page); + addPageLink(); + }); +} + + +function mouseOverArticle(articleNode) { + articleNode.addEventListener("mouseover", event => { + articleNode.style.backgroundColor = "red"; + }) + articleNode.addEventListener("mouseout", event => { + articleNode.style.backgroundColor = "white"; + }) +} + +function clearArticles() { + const mainNode = document.querySelector('main'); + mainNode.innerHTML = ""; +} + +function createArticles(body) { + clearArticles(); + body.articles.forEach(article => { + const articleNode = document.createElement('div'); + articleNode.innerHTML = ` +
${article.title}
+ ` + const parentNode = document.querySelector('main'); + parentNode.appendChild(articleNode); + mouseOverArticle(articleNode); + }); +}; + +function getArticles(page) { + var url = 'https://newsapi.org/v2/everything?' + + 'q=' + search + + '&page=' + page + + '&apiKey=280f7af9f5c448c4a3598861960c947a'; + var req = new Request(url); + fetch(req) + .then(function (response) { + return response.json(); + }) + .then(function (body) { + createArticles(body); + }) +} + +function addPageLink() { + const pageLinkNode = document.createElement('li'); + const parentNode = document.querySelector('.pagination__ul'); + console.log(parentNode); + pageLinkNode.innerHTML = page; + pageLinkNode.className = "pagination__page"; + parentNode.appendChild(pageLinkNode); + pageLinkNode.addEventListener("click", event => {getArticles(pageLinkNode.innerHTML)}); +} + + +let search = "cycling"; +let page = 1; +getArticles(); +formListener(); +nextListener(); +addPageLink(); + diff --git a/style.css b/style.css new file mode 100644 index 0000000..3f46771 --- /dev/null +++ b/style.css @@ -0,0 +1,83 @@ +* { + box-sizing: inherit; +} + +body { + box-sizing: border-box; + margin: 0; + font-family: "Open Sans", sans-serif; + display: flex; + flex-direction: column; + min-height: 100vh; + background: gray; + } + +.app { + display: flex; + flex-direction: column; + flex:1; + background: white; +} + +.hero__photo { + display:flex; + flex-direction:row; + min-height:200px; + background-image: + url("images/header-ventoux.jpg"); + object-fit: cover; + + } + +img { + width:100%; + height:auto; + } + +nav { + display:none; +} + +main { + display: flex; + flex-direction: column; + margin: 10px; +} + +article { + display: flex; + flex-direction: column; + margin: 0 0 10px 0; +} + +.article__title { + margin-bottom: 5px; + font-weight:400; +} + +.article__description { + font-size:0.8em; +} + +.article__meta { + display:flex; + flex-direction: row; + justify-content: space-between; + border-bottom:2px; + font-size:0.8em; +} + +.article__image { + display:none; +} + +.pagination__ul { + display:flex; + flex-direction:row; + flex:1; +} + +.pagination__page { + display:flex; + min-width:50px; +} From 501780ce7b5d21f5c73b7bc4f21da2c9a0f22610 Mon Sep 17 00:00:00 2001 From: Phil B Date: Fri, 14 Sep 2018 11:03:37 +0100 Subject: [PATCH 02/13] minor updates to styling, added click event to article div, refectored article template --- index.html | 22 ++++++++++------------ index.js | 47 +++++++++++++++++++++++++++++++++-------------- style.css | 30 ++++++++++++++++++++++++++---- 3 files changed, 69 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 572afe1..6303db4 100644 --- a/index.html +++ b/index.html @@ -15,23 +15,20 @@
- -
Search for anything. About cycling ....
-
SEARCH BOX
+ +
All the news ... All the time!
+
+
+ + +
+
-
- - -
@@ -48,6 +45,7 @@ + diff --git a/index.js b/index.js index a26dc97..2742f38 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,4 @@ +// adds a listener to the search submit button function formListener () { const formElement = document.querySelector("form"); const formInput = document.querySelector("#form-search"); @@ -7,10 +8,10 @@ function formListener () { search = formInput.value; page=1; getArticles(1) - console.log("HI"); }); } +// adds a listener to the next button function nextListener () { const nextButton = document.querySelector("#next"); nextButton.addEventListener('click', event => { @@ -22,46 +23,63 @@ function nextListener () { }); } - +// adds listeners that change the colour of the article the mouse is over function mouseOverArticle(articleNode) { articleNode.addEventListener("mouseover", event => { articleNode.style.backgroundColor = "red"; }) articleNode.addEventListener("mouseout", event => { - articleNode.style.backgroundColor = "white"; + articleNode.style.backgroundColor = "gray"; + }) +} + +// add a listener to article creating 'click' event that takes user to URL +function clickArticle(articleNode, url) { + articleNode.addEventListener("click", event => { + window.location = url; }) } +// clears existing articles from page in preparation for a new search or new page function clearArticles() { const mainNode = document.querySelector('main'); mainNode.innerHTML = ""; } -function createArticles(body) { - clearArticles(); - body.articles.forEach(article => { - const articleNode = document.createElement('div'); - articleNode.innerHTML = ` +function articleTemplate(article) { + return `
${article.title}
- ` + ` +} + + +// takes request body and turns it into html to be appended into 'main' +function createArticles(body) { + clearArticles(); + body.articles.forEach(article => { + const articleNode = document.createElement('div'); + articleNode.className = "article"; + articleNode.innerHTML = articleTemplate(article); const parentNode = document.querySelector('main'); parentNode.appendChild(articleNode); - mouseOverArticle(articleNode); + mouseOverArticle(articleNode) + clickArticle(articleNode, article.url); }); }; +// api request to news api. Returns json and calls createArticles function function getArticles(page) { var url = 'https://newsapi.org/v2/everything?' + 'q=' + search + '&page=' + page + - '&apiKey=280f7af9f5c448c4a3598861960c947a'; + '&apiKey=280f7af9f5c448c4a3598861960c947a&sortBy=publishedAt'; var req = new Request(url); fetch(req) .then(function (response) { @@ -72,6 +90,7 @@ function getArticles(page) { }) } +// adds a link to a new page when the next button is clicked function addPageLink() { const pageLinkNode = document.createElement('li'); const parentNode = document.querySelector('.pagination__ul'); @@ -83,7 +102,7 @@ function addPageLink() { } -let search = "cycling"; +let search = "uk"; let page = 1; getArticles(); formListener(); diff --git a/style.css b/style.css index 3f46771..18d5d88 100644 --- a/style.css +++ b/style.css @@ -3,6 +3,7 @@ } body { + box-sizing: border-box; margin: 0; font-family: "Open Sans", sans-serif; @@ -15,10 +16,15 @@ body { .app { display: flex; flex-direction: column; - flex:1; + flex:10; background: white; } +.article { + display: flex; + flex-direction:column; + margin:1em; +} .hero__photo { display:flex; flex-direction:row; @@ -38,16 +44,25 @@ nav { display:none; } +header { + display:flex; + flex-direction:column; + margin-left: 1em; + margin-right: 1em; +} + main { display: flex; flex-direction: column; - margin: 10px; + margin: 1em; } -article { +.article { display: flex; flex-direction: column; - margin: 0 0 10px 0; + margin:0; + margin-bottom:1em; + background:gray; } .article__title { @@ -81,3 +96,10 @@ article { display:flex; min-width:50px; } + +input[type=search] { + border: 1px dotted #999; + border-radius: 0; + + -webkit-appearance: none; + } From cff2b57a1c49a0220e8f64f14a92ac150898ea24 Mon Sep 17 00:00:00 2001 From: Phil B Date: Fri, 14 Sep 2018 12:46:11 +0100 Subject: [PATCH 03/13] created functionality to exclude news source by clicking on link - needs some serious polish still --- index.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/index.js b/index.js index 2742f38..e8b91b7 100644 --- a/index.js +++ b/index.js @@ -46,7 +46,15 @@ function clearArticles() { mainNode.innerHTML = ""; } -function articleTemplate(article) { +function excludeDomain(articleDomain) { + if (!excludedDomainsArray.includes(articleDomain)) { + excludedDomainsArray.push(articleDomain); + } + console.log(excludedDomainsArray.toString()); + getArticles(1,excludedDomainsArray.toString()); +} + +function articleTemplate(article, articleDomain) { return `
${article.title}
@@ -54,7 +62,7 @@ function articleTemplate(article) {
-
${article.source.name} - More from ${article.source.name}
+
${article.source.name} - exclude articles from ${article.source.name}
${article.publishedAt}
` } @@ -66,20 +74,22 @@ function createArticles(body) { body.articles.forEach(article => { const articleNode = document.createElement('div'); articleNode.className = "article"; - articleNode.innerHTML = articleTemplate(article); + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + articleNode.innerHTML = articleTemplate(article,articleDomain); const parentNode = document.querySelector('main'); parentNode.appendChild(articleNode); mouseOverArticle(articleNode) - clickArticle(articleNode, article.url); + //clickArticle(articleNode, article.url); }); }; // api request to news api. Returns json and calls createArticles function -function getArticles(page) { +function getArticles(page, excludedDomainsStr='') { var url = 'https://newsapi.org/v2/everything?' + 'q=' + search + '&page=' + page + - '&apiKey=280f7af9f5c448c4a3598861960c947a&sortBy=publishedAt'; + '&apiKey=280f7af9f5c448c4a3598861960c947a&sortBy=publishedAt' + + '+&excludeDomains=' + excludedDomainsStr; var req = new Request(url); fetch(req) .then(function (response) { @@ -94,14 +104,13 @@ function getArticles(page) { function addPageLink() { const pageLinkNode = document.createElement('li'); const parentNode = document.querySelector('.pagination__ul'); - console.log(parentNode); pageLinkNode.innerHTML = page; pageLinkNode.className = "pagination__page"; parentNode.appendChild(pageLinkNode); pageLinkNode.addEventListener("click", event => {getArticles(pageLinkNode.innerHTML)}); } - +const excludedDomainsArray = []; let search = "uk"; let page = 1; getArticles(); From 6344a23a230d808ca18a013886b9f3890681b519 Mon Sep 17 00:00:00 2001 From: Phil B Date: Fri, 14 Sep 2018 13:18:47 +0100 Subject: [PATCH 04/13] can now add and remove domains - still no polish. --- index.html | 3 +++ index.js | 22 +++++++++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 6303db4..dbf825d 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,9 @@ +
    + +
diff --git a/index.js b/index.js index e8b91b7..d1826d0 100644 --- a/index.js +++ b/index.js @@ -54,6 +54,24 @@ function excludeDomain(articleDomain) { getArticles(1,excludedDomainsArray.toString()); } +function createExcluded() { + console.log(excludedDomainsArray.length); + document.querySelector('.excludedDomains').innerHTML = ""; + if (excludedDomainsArray.length>0) { + console.log(61); + excludedDomainsArray.forEach(domain => { + const parentNode = document.querySelector('.excludedDomains'); + const childNode = document.createElement('li'); + childNode.innerHTML = domain; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => { + excludedDomainsArray.splice(excludedDomainsArray.indexOf(domain),1); + getArticles(); + }) + }) + } +} + function articleTemplate(article, articleDomain) { return `
${article.title}
@@ -96,7 +114,9 @@ function getArticles(page, excludedDomainsStr='') { return response.json(); }) .then(function (body) { - createArticles(body); + createArticles(body) + createExcluded();; + console.log("boom"); }) } From efdbf7d406fe1ccbafea973457c1cebaf55489a9 Mon Sep 17 00:00:00 2001 From: Phil B Date: Fri, 14 Sep 2018 17:07:17 +0100 Subject: [PATCH 05/13] slightly more styling --- index.html | 1 + index.js | 35 ++++++++++--- style.css | 144 +++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 160 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index dbf825d..6a736d1 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,7 @@ + Publishers you have excluded from search. Click to re-apply.
diff --git a/index.js b/index.js index d1826d0..e3feedd 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,5 @@ +let itemId = 1; + // adds a listener to the search submit button function formListener () { const formElement = document.querySelector("form"); @@ -26,17 +28,18 @@ function nextListener () { // adds listeners that change the colour of the article the mouse is over function mouseOverArticle(articleNode) { articleNode.addEventListener("mouseover", event => { - articleNode.style.backgroundColor = "red"; + articleNode.style.backgroundColor = "#ffc754"; }) articleNode.addEventListener("mouseout", event => { - articleNode.style.backgroundColor = "gray"; + articleNode.style.backgroundColor = "white"; }) } // add a listener to article creating 'click' event that takes user to URL function clickArticle(articleNode, url) { articleNode.addEventListener("click", event => { - window.location = url; + + window.location = url; }) } @@ -47,6 +50,7 @@ function clearArticles() { } function excludeDomain(articleDomain) { + event.stopPropagation(); if (!excludedDomainsArray.includes(articleDomain)) { excludedDomainsArray.push(articleDomain); } @@ -54,6 +58,7 @@ function excludeDomain(articleDomain) { getArticles(1,excludedDomainsArray.toString()); } +// creates red buttons for excluded domains / publishers at top of page. function createExcluded() { console.log(excludedDomainsArray.length); document.querySelector('.excludedDomains').innerHTML = ""; @@ -62,6 +67,7 @@ function createExcluded() { excludedDomainsArray.forEach(domain => { const parentNode = document.querySelector('.excludedDomains'); const childNode = document.createElement('li'); + childNode.className = "excludedDomains__li"; childNode.innerHTML = domain; parentNode.appendChild(childNode); childNode.addEventListener("click", event => { @@ -80,7 +86,7 @@ function articleTemplate(article, articleDomain) {
-
${article.source.name} - exclude articles from ${article.source.name}
+
${article.source.name}

${article.publishedAt}
` } @@ -89,15 +95,32 @@ function articleTemplate(article, articleDomain) { // takes request body and turns it into html to be appended into 'main' function createArticles(body) { clearArticles(); + itemId = 0; body.articles.forEach(article => { + console.log(article.content); + itemId ++ const articleNode = document.createElement('div'); articleNode.className = "article"; let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; - articleNode.innerHTML = articleTemplate(article,articleDomain); + articleNode.innerHTML = articleTemplate(article,articleDomain, itemId); const parentNode = document.querySelector('main'); parentNode.appendChild(articleNode); + + const excludeDomainSpan = document.createElement('span'); + excludeDomainSpan.textContent = "Exclude Publisher"; + excludeDomainSpan.className = "excludeButton"; + console.log(itemId); + const excludeDomainSpanParent = document.querySelector(`#item${itemId}`); + excludeDomainSpanParent.appendChild(excludeDomainSpan); + excludeDomainSpan.addEventListener("click", event => { + excludeDomain(articleDomain); + }) + + // create span element + // insert span element into element with id article.url + // set click click listener on span mouseOverArticle(articleNode) - //clickArticle(articleNode, article.url); + clickArticle(articleNode, article.url); }); }; diff --git a/style.css b/style.css index 18d5d88..4d93d45 100644 --- a/style.css +++ b/style.css @@ -10,29 +10,21 @@ body { display: flex; flex-direction: column; min-height: 100vh; - background: gray; + background:#eeeeee; } .app { display: flex; flex-direction: column; flex:10; - background: white; + background: #eeeeee; } -.article { - display: flex; - flex-direction:column; - margin:1em; -} .hero__photo { display:flex; flex-direction:row; - min-height:200px; - background-image: - url("images/header-ventoux.jpg"); - object-fit: cover; - + min-height:60px; + background:#33b5e5; } img { @@ -51,6 +43,17 @@ header { margin-right: 1em; } +.excludedDomains { + display:flex; + padding:0; + margin:1em; + align-content:flex-start; +} + +.excludedDomains__li { + display:flex; +} + main { display: flex; flex-direction: column; @@ -61,12 +64,13 @@ main { display: flex; flex-direction: column; margin:0; + padding:10px; margin-bottom:1em; - background:gray; + background:white; } .article__title { - margin-bottom: 5px; + margin-bottom:5px; font-weight:400; } @@ -78,6 +82,7 @@ main { display:flex; flex-direction: row; justify-content: space-between; + margin-top:10px; border-bottom:2px; font-size:0.8em; } @@ -103,3 +108,114 @@ input[type=search] { -webkit-appearance: none; } + + .excludedDomains { + display:flex; + flex-direction: row; + flex-wrap: wrap; + margin-left:1em; + } + .excludedDomains__li { + -moz-box-shadow:inset 0px 39px 0px -24px #ff4444; + -webkit-box-shadow:inset 0px 39px 0px -24px #ff4444; + box-shadow:inset 0px 39px 0px -24px #ff4444; + background-color:#ff4444; + -moz-border-radius:4px; + -webkit-border-radius:4px; + border-radius:4px; + border:1px solid #ffffff; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-family:Arial; + font-size:10px; + padding:6px 15px; + margin: 0 5px 5px 0; + text-decoration:none; + text-shadow:0px 1px 0px #b23e35; +} +.excludedDomains__li:hover { + background-color:#72b352; + -moz-box-shadow:inset 0px 39px 0px -24px #72b352; + -webkit-box-shadow:inset 0px 39px 0px -24px #72b352; +} +.excludedDomains__li:active { + position:relative; + top:1px; +} + +.excludeButton { + -moz-box-shadow:inset 0px 39px 0px -24px #ff4444; + -webkit-box-shadow:inset 0px 39px 0px -24px #ff4444; + box-shadow:inset 0px 39px 0px -24px #ff4444; + background-color:#ff4444; + -moz-border-radius:4px; + -webkit-border-radius:4px; + border-radius:4px; + border:1px solid #ffffff; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-family:Arial; + font-size:10px; + padding:6px 15px; + margin-top:5px; + text-decoration:none; + text-shadow:0px 1px 0px #b23e35; +} +.excludeButton:hover { + background-color:black; + -moz-box-shadow:inset 0px 39px 0px -24px black; + -webkit-box-shadow:inset 0px 39px 0px -24px black; +} +.excludeButton:active { + position:relative; + top:1px; +} + +p { + margin:0; +} + +.search { + width: 100%; + position: relative + } + + .searchTerm { + float: left; + width: 100%; + border: 3px solid #00B4CC; + padding: 5px; + height: 20px; + border-radius: 5px; + outline: none; + color: #9DBFAF; + } + + .searchTerm:focus{ + color: #00B4CC; + } + + .searchButton { + position: absolute; + right: -50px; + width: 40px; + height: 36px; + border: 1px solid #00B4CC; + background: #00B4CC; + text-align: center; + color: #fff; + border-radius: 5px; + cursor: pointer; + font-size: 20px; + } + + /*Resize the wrap to see the search bar change!*/ +.wrap { + width: 30%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } \ No newline at end of file From 6087073a6925dbe9b6634304d656ee4fe67a1d44 Mon Sep 17 00:00:00 2001 From: Phil B Date: Sat, 15 Sep 2018 18:07:23 +0100 Subject: [PATCH 06/13] added some responsiveness and images for tablet and above --- index.html | 27 +++++++----- index.js | 65 ++++++++++++++++++++-------- style.css | 125 +++++++++++++++++++++++++++++++++-------------------- 3 files changed, 139 insertions(+), 78 deletions(-) diff --git a/index.html b/index.html index 6a736d1..0ca04b3 100644 --- a/index.html +++ b/index.html @@ -15,38 +15,41 @@
- -
All the news ... All the time!
+ +
+
-
- Publishers you have excluded from search. Click to re-apply. -
    -
+
+ Excluded publishers
Click to re-apply. +
    + +
+
+ +
+ + + +
-
diff --git a/index.js b/index.js index e3feedd..1e5fb7c 100644 --- a/index.js +++ b/index.js @@ -9,7 +9,8 @@ function formListener () { clearArticles(); search = formInput.value; page=1; - getArticles(1) + getArticles(1,excludedDomainsArray); + console.log(excludedDomainsArray); }); } @@ -18,8 +19,6 @@ function nextListener () { const nextButton = document.querySelector("#next"); nextButton.addEventListener('click', event => { page ++; - console.log(`getting page: ${page}`) - getArticles(page); addPageLink(); }); @@ -45,7 +44,13 @@ function clickArticle(articleNode, url) { // clears existing articles from page in preparation for a new search or new page function clearArticles() { - const mainNode = document.querySelector('main'); + const mainNode = document.querySelector('.articles'); + mainNode.innerHTML = ""; +} + +// clears pagination +function clearPagination() { + const mainNode = document.querySelector('.pagination__ul'); mainNode.innerHTML = ""; } @@ -63,6 +68,7 @@ function createExcluded() { console.log(excludedDomainsArray.length); document.querySelector('.excludedDomains').innerHTML = ""; if (excludedDomainsArray.length>0) { + document.querySelector('.excludedDomains__message').style.display = 'flex'; console.log(61); excludedDomainsArray.forEach(domain => { const parentNode = document.querySelector('.excludedDomains'); @@ -75,6 +81,12 @@ function createExcluded() { getArticles(); }) }) + document.querySelector('.excludedDomainsDiv').style.display = 'flex'; + } else { + document.querySelector('.excludedDomainsDiv').style.display = 'none'; + } + if (excludedDomainsArray.length > 4) { + document.querySelector('.excludedDomainsDiv').style.flexDirection = 'column'; } } @@ -97,19 +109,17 @@ function createArticles(body) { clearArticles(); itemId = 0; body.articles.forEach(article => { - console.log(article.content); itemId ++ const articleNode = document.createElement('div'); articleNode.className = "article"; let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; articleNode.innerHTML = articleTemplate(article,articleDomain, itemId); - const parentNode = document.querySelector('main'); + const parentNode = document.querySelector('.articles'); parentNode.appendChild(articleNode); const excludeDomainSpan = document.createElement('span'); excludeDomainSpan.textContent = "Exclude Publisher"; excludeDomainSpan.className = "excludeButton"; - console.log(itemId); const excludeDomainSpanParent = document.querySelector(`#item${itemId}`); excludeDomainSpanParent.appendChild(excludeDomainSpan); excludeDomainSpan.addEventListener("click", event => { @@ -121,11 +131,12 @@ function createArticles(body) { // set click click listener on span mouseOverArticle(articleNode) clickArticle(articleNode, article.url); + document.body.scrollTop = document.documentElement.scrollTop = 0; }); }; // api request to news api. Returns json and calls createArticles function -function getArticles(page, excludedDomainsStr='') { +function getArticles(page=1, excludedDomainsStr='', i) { var url = 'https://newsapi.org/v2/everything?' + 'q=' + search + '&page=' + page + @@ -139,25 +150,41 @@ function getArticles(page, excludedDomainsStr='') { .then(function (body) { createArticles(body) createExcluded();; - console.log("boom"); + addPagination(body.totalResults); }) } // adds a link to a new page when the next button is clicked -function addPageLink() { - const pageLinkNode = document.createElement('li'); - const parentNode = document.querySelector('.pagination__ul'); - pageLinkNode.innerHTML = page; - pageLinkNode.className = "pagination__page"; - parentNode.appendChild(pageLinkNode); - pageLinkNode.addEventListener("click", event => {getArticles(pageLinkNode.innerHTML)}); +// function addPageLink() { +// const pageLinkNode = document.createElement('li'); +// const parentNode = document.querySelector('.pagination__ul'); +// pageLinkNode.innerHTML = page; +// pageLinkNode.className = "pagination__page"; +// parentNode.appendChild(pageLinkNode); +// pageLinkNode.addEventListener("click", event => {getArticles(pageLinkNode.innerHTML)}); +// } + +// adds 5 page links to bottom of page +function addPagination(totalResults) { + clearPagination(); + let numberOfPages = Math.floor(totalResults/20)+1; + if (numberOfPages > 5) {numberOfPages = 5}; + for (i=1;i<=numberOfPages;i++) { + const pageLinkNode = document.createElement('li'); + const parentNode = document.querySelector('.pagination__ul'); + pageLinkNode.innerHTML = i; + pageLinkNode.className = "pagination__page"; + parentNode.appendChild(pageLinkNode); + console.log("i: " + i) + // console.log("page aP :" + page); + pageLinkNode.addEventListener("click", event => {getArticles(pageLinkNode.innerHTML)}); + } } const excludedDomainsArray = []; let search = "uk"; -let page = 1; getArticles(); formListener(); -nextListener(); -addPageLink(); +// nextListener(); +// addPageLink(); diff --git a/style.css b/style.css index 4d93d45..abf1eb6 100644 --- a/style.css +++ b/style.css @@ -6,7 +6,7 @@ body { box-sizing: border-box; margin: 0; - font-family: "Open Sans", sans-serif; + font-family: Helvetica Neue,Helvetica,Arial,sans-serif; display: flex; flex-direction: column; min-height: 100vh; @@ -20,7 +20,7 @@ body { background: #eeeeee; } -.hero__photo { +.top { display:flex; flex-direction:row; min-height:60px; @@ -41,6 +41,13 @@ header { flex-direction:column; margin-left: 1em; margin-right: 1em; + margin-bottom: 10px; +} + +.excludedDomainsDiv { + display: flex; + flex-direction:column; + } .excludedDomains { @@ -113,13 +120,13 @@ input[type=search] { display:flex; flex-direction: row; flex-wrap: wrap; - margin-left:1em; + margin:0; } .excludedDomains__li { - -moz-box-shadow:inset 0px 39px 0px -24px #ff4444; - -webkit-box-shadow:inset 0px 39px 0px -24px #ff4444; - box-shadow:inset 0px 39px 0px -24px #ff4444; - background-color:#ff4444; + -moz-box-shadow:inset 0px 39px 0px -24px #fd7627; + -webkit-box-shadow:inset 0px 39px 0px -24px #fd7627; + box-shadow:inset 0px 39px 0px -24px #fd7627; + background-color:#fd7627; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; @@ -177,45 +184,69 @@ p { margin:0; } -.search { - width: 100%; - position: relative - } - - .searchTerm { - float: left; - width: 100%; - border: 3px solid #00B4CC; - padding: 5px; - height: 20px; - border-radius: 5px; - outline: none; - color: #9DBFAF; - } - - .searchTerm:focus{ - color: #00B4CC; - } - - .searchButton { - position: absolute; - right: -50px; - width: 40px; - height: 36px; - border: 1px solid #00B4CC; - background: #00B4CC; - text-align: center; - color: #fff; - border-radius: 5px; - cursor: pointer; - font-size: 20px; +.excludedDomainsDiv { + display:flex; + flex-direction: row; +} + + .excludedDomains__message { + display:none; + margin-bottom:10px; + font-size:.7em; + min-width: 150px; + + } - /*Resize the wrap to see the search bar change!*/ -.wrap { - width: 30%; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } \ No newline at end of file + .pagination__page { + display: inline-block; + padding: 0px 9px; + margin-right: 4px; + border-radius: 3px; + border: solid 1px #c0c0c0; + background: #e9e9e9; + box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1); + font-size: .875em; + font-weight: bold; + text-decoration: none; + color: #717171; + text-shadow: 0px 1px 0px rgba(255,255,255, 1); +} + +.pagination__page:hover, .page.gradient:hover { + background: #fefefe; + background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0)); + background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0); +} + +.pagination__page.active { + border: none; + background: #616161; + box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8); + color: #f0f0f0; + text-shadow: 0px 0px 3px rgba(0,0,0, .5); +} + +@media (min-width: 768px) { + main { + flex-direction: row-reverse; + } + + .excludedDomainsDiv { + flex:3; + flex-direction:column; + padding:10px; + background: white; + margin-left:10px; + } + + .articles { + flex:9; + } + + .article__image { + display: block; + margin-top:10px; + } + +} \ No newline at end of file From 20c4a3638987c3524e7fe746442bed6eb1b9ff81 Mon Sep 17 00:00:00 2001 From: Phil B Date: Sat, 15 Sep 2018 18:21:43 +0100 Subject: [PATCH 07/13] Unstyled but kind of working news app --- .DS_Store | Bin 0 -> 8196 bytes images/news-etc.png | Bin 0 -> 20210 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 .DS_Store create mode 100644 images/news-etc.png diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..afbc1efc855b4027637eae18d48a56fb2a998273 GIT binary patch literal 8196 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 Date: Sat, 15 Sep 2018 19:21:46 +0100 Subject: [PATCH 08/13] fixed some alignment issues --- index.html | 4 +--- style.css | 9 ++++++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 0ca04b3..232a6a7 100644 --- a/index.html +++ b/index.html @@ -44,15 +44,13 @@
-
- + diff --git a/style.css b/style.css index abf1eb6..fb08c5d 100644 --- a/style.css +++ b/style.css @@ -30,6 +30,7 @@ body { img { width:100%; height:auto; + max-width:300px; } nav { @@ -64,9 +65,10 @@ header { main { display: flex; flex-direction: column; - margin: 1em; + margin: 1em 1em 0 1em; } + .article { display: flex; flex-direction: column; @@ -102,6 +104,7 @@ main { display:flex; flex-direction:row; flex:1; + margin:0 0 1em 0; } .pagination__page { @@ -235,9 +238,9 @@ p { .excludedDomainsDiv { flex:3; flex-direction:column; - padding:10px; + padding:10px 10px 0 10px; background: white; - margin-left:10px; + margin:0 0 1em 10px; } .articles { From 9e6e5d99b9cded4d5411353e8b17b7fca3f4866a Mon Sep 17 00:00:00 2001 From: Phil B Date: Sat, 15 Sep 2018 22:34:38 +0100 Subject: [PATCH 09/13] added top publishers but need to tidy in the morning --- index.html | 3 +++ index.js | 51 +++++++++++++++++++++++++++++++++++++++++++++++++-- style.css | 42 +++++++++++++++++++++++++++++++++++++----- 3 files changed, 89 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 232a6a7..61969cf 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,9 @@
+
+ +
diff --git a/index.js b/index.js index 1e5fb7c..23f87a0 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,6 @@ let itemId = 1; + // adds a listener to the search submit button function formListener () { const formElement = document.querySelector("form"); @@ -48,6 +49,12 @@ function clearArticles() { mainNode.innerHTML = ""; } +// clears publishers +function clearPublishers() { + const mainNode = document.querySelector('.publisher__list'); + mainNode.innerHTML = ""; +} + // clears pagination function clearPagination() { const mainNode = document.querySelector('.pagination__ul'); @@ -136,12 +143,14 @@ function createArticles(body) { }; // api request to news api. Returns json and calls createArticles function -function getArticles(page=1, excludedDomainsStr='', i) { +function getArticles(page=1, excludedDomainsStr='', filterDomains="") { + console.log(filterDomains); var url = 'https://newsapi.org/v2/everything?' + 'q=' + search + '&page=' + page + '&apiKey=280f7af9f5c448c4a3598861960c947a&sortBy=publishedAt' + - '+&excludeDomains=' + excludedDomainsStr; + '+&excludeDomains=' + excludedDomainsStr + '&domains=' + filterDomains; + console.log(url); var req = new Request(url); fetch(req) .then(function (response) { @@ -150,7 +159,9 @@ function getArticles(page=1, excludedDomainsStr='', i) { .then(function (body) { createArticles(body) createExcluded();; + publisherCount(body.articles); addPagination(body.totalResults); + }) } @@ -181,6 +192,39 @@ function addPagination(totalResults) { } } +function publisherCount(articles) { + clearPublishers(); + const publishersNames = []; + const publishersObjects = {}; + + console.log(articles.length); + articles.forEach(article => { + if (!publishersNames.includes(article.source.name)) { + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + publishersNames.push(article.source.name) + publishersObjects[article.source.name]= {name:article.source.name,domain:articleDomain,count:1} + } else { + publishersObjects[article.source.name].count++; + } + }) + + publishersNames.forEach(publisher => { + const parentNode = document.querySelector('.publisher__list'); + const childNode = document.createElement('div'); + childNode.textContent = `${publisher} (${publishersObjects[publisher].count})`; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => {getArticles(1,"",publishersObjects[publisher].domain)}) + console.log("208" + publishersObjects[publisher].name); + + }) + + + // console.log(publishersNames); + // console.log(publishersObjects); + // console.log(555); +} + +const publisherObject = []; const excludedDomainsArray = []; let search = "uk"; getArticles(); @@ -188,3 +232,6 @@ formListener(); // nextListener(); // addPageLink(); + + + diff --git a/style.css b/style.css index fb08c5d..034fd8d 100644 --- a/style.css +++ b/style.css @@ -40,8 +40,8 @@ nav { header { display:flex; flex-direction:column; - margin-left: 1em; - margin-right: 1em; + margin-left: 10px; + margin-right: 10px; margin-bottom: 10px; } @@ -54,7 +54,7 @@ header { .excludedDomains { display:flex; padding:0; - margin:1em; + margin:10px; align-content:flex-start; } @@ -65,16 +65,23 @@ header { main { display: flex; flex-direction: column; - margin: 1em 1em 0 1em; + margin: 10px 10px 0 10px; + padding: 0; } +.articles { + display:flex; + flex:9; + flex-direction:column; + margin:0; +} .article { display: flex; flex-direction: column; margin:0; padding:10px; - margin-bottom:1em; + margin-bottom:10px; background:white; } @@ -244,7 +251,32 @@ p { } .articles { + display:flex; flex:9; + flex-direction:column; + } + + .article__image { + display: block; + margin-top:10px; + } + +} + +@media (min-width: 960px) { + + + .articles { + display:flex; + flex:9; + flex-direction:row; + flex-wrap:wrap; + justify-content: space-around; + } + + .article { + width:49%; + margin: 0 0 10px 0; } .article__image { From 6914f444074f4d4ded2a35cb7eb942d49e212d8e Mon Sep 17 00:00:00 2001 From: Phil B Date: Sun, 16 Sep 2018 14:44:55 +0100 Subject: [PATCH 10/13] tidied up sidebar and did some minor refactoring of code --- index.html | 18 +++-- index.js | 228 ++++++++++++++++++++++++----------------------------- style.css | 22 +++++- 3 files changed, 132 insertions(+), 136 deletions(-) diff --git a/index.html b/index.html index 61969cf..de3b3de 100644 --- a/index.html +++ b/index.html @@ -29,14 +29,18 @@
-
- Excluded publishers
Click to re-apply. -
    - -
-
- +
+
+ Excluded publishers
Click to re-apply. +
    + +
+
+
+
+
+
diff --git a/index.js b/index.js index 23f87a0..7a99c53 100644 --- a/index.js +++ b/index.js @@ -2,81 +2,100 @@ let itemId = 1; // adds a listener to the search submit button -function formListener () { +const formListener = () => { const formElement = document.querySelector("form"); const formInput = document.querySelector("#form-search"); formElement.addEventListener('submit', event => { event.preventDefault(); - clearArticles(); search = formInput.value; page=1; getArticles(1,excludedDomainsArray); - console.log(excludedDomainsArray); }); } -// adds a listener to the next button -function nextListener () { - const nextButton = document.querySelector("#next"); - nextButton.addEventListener('click', event => { - page ++; - getArticles(page); - addPageLink(); - }); +// api request to news api. Returns json and calls createArticles function +const getArticles = (page=1, excludedDomainsStr='', filterDomains="") => { + var url = 'https://newsapi.org/v2/everything?' + + 'q=' + search + + '&page=' + page + + '&apiKey=280f7af9f5c448c4a3598861960c947a&sortBy=publishedAt' + + '+&excludeDomains=' + excludedDomainsStr + '&domains=' + filterDomains; + var req = new Request(url); + fetch(req) + .then(function (response) { + return response.json(); + }) + .then(function (body) { + createArticles(body) + createExcluded();; + publisherCount(body.articles); + addPagination(body.totalResults); + + }) } -// adds listeners that change the colour of the article the mouse is over -function mouseOverArticle(articleNode) { - articleNode.addEventListener("mouseover", event => { - articleNode.style.backgroundColor = "#ffc754"; - }) - articleNode.addEventListener("mouseout", event => { - articleNode.style.backgroundColor = "white"; - }) + +// takes request body and turns it into html to be appended into '.articles' +const createArticles = (body) => { + clearDiv('.articles'); + itemId = 0; + body.articles.forEach(article => { + itemId ++ + const articleNode = document.createElement('div'); + articleNode.className = "article"; + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + articleNode.innerHTML = articleTemplate(article,articleDomain, itemId); + const parentNode = document.querySelector('.articles'); + parentNode.appendChild(articleNode); + + const excludeDomainSpan = document.createElement('span'); + excludeDomainSpan.textContent = "Exclude Publisher"; + excludeDomainSpan.className = "excludeButton"; + const excludeDomainSpanParent = document.querySelector(`#item${itemId}`); + excludeDomainSpanParent.appendChild(excludeDomainSpan); + excludeDomainSpan.addEventListener("click", event => { + excludeDomain(articleDomain); + }) + mouseOverArticle(articleNode) + clickArticle(articleNode, article.url); + document.body.scrollTop = document.documentElement.scrollTop = 0; + }); +}; + +const articleTemplate = (article, articleDomain) => { + return ` +
${article.title}
+
+
${article.description}
+
+
+
+
${article.source.name}

+
${article.publishedAt}
+
` } // add a listener to article creating 'click' event that takes user to URL -function clickArticle(articleNode, url) { - articleNode.addEventListener("click", event => { - +const clickArticle = (articleNode, url) => { + articleNode.addEventListener("click", event => { window.location = url; }) } -// clears existing articles from page in preparation for a new search or new page -function clearArticles() { - const mainNode = document.querySelector('.articles'); - mainNode.innerHTML = ""; -} - -// clears publishers -function clearPublishers() { - const mainNode = document.querySelector('.publisher__list'); - mainNode.innerHTML = ""; -} - -// clears pagination -function clearPagination() { - const mainNode = document.querySelector('.pagination__ul'); - mainNode.innerHTML = ""; -} function excludeDomain(articleDomain) { event.stopPropagation(); if (!excludedDomainsArray.includes(articleDomain)) { excludedDomainsArray.push(articleDomain); } - console.log(excludedDomainsArray.toString()); getArticles(1,excludedDomainsArray.toString()); } // creates red buttons for excluded domains / publishers at top of page. function createExcluded() { - console.log(excludedDomainsArray.length); document.querySelector('.excludedDomains').innerHTML = ""; if (excludedDomainsArray.length>0) { document.querySelector('.excludedDomains__message').style.display = 'flex'; - console.log(61); excludedDomainsArray.forEach(domain => { const parentNode = document.querySelector('.excludedDomains'); const childNode = document.createElement('li'); @@ -97,87 +116,17 @@ function createExcluded() { } } -function articleTemplate(article, articleDomain) { - return ` -
${article.title}
-
-
${article.description}
-
-
-
-
${article.source.name}

-
${article.publishedAt}
-
` -} -// takes request body and turns it into html to be appended into 'main' -function createArticles(body) { - clearArticles(); - itemId = 0; - body.articles.forEach(article => { - itemId ++ - const articleNode = document.createElement('div'); - articleNode.className = "article"; - let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; - articleNode.innerHTML = articleTemplate(article,articleDomain, itemId); - const parentNode = document.querySelector('.articles'); - parentNode.appendChild(articleNode); - const excludeDomainSpan = document.createElement('span'); - excludeDomainSpan.textContent = "Exclude Publisher"; - excludeDomainSpan.className = "excludeButton"; - const excludeDomainSpanParent = document.querySelector(`#item${itemId}`); - excludeDomainSpanParent.appendChild(excludeDomainSpan); - excludeDomainSpan.addEventListener("click", event => { - excludeDomain(articleDomain); - }) - // create span element - // insert span element into element with id article.url - // set click click listener on span - mouseOverArticle(articleNode) - clickArticle(articleNode, article.url); - document.body.scrollTop = document.documentElement.scrollTop = 0; - }); -}; -// api request to news api. Returns json and calls createArticles function -function getArticles(page=1, excludedDomainsStr='', filterDomains="") { - console.log(filterDomains); - var url = 'https://newsapi.org/v2/everything?' + - 'q=' + search + - '&page=' + page + - '&apiKey=280f7af9f5c448c4a3598861960c947a&sortBy=publishedAt' + - '+&excludeDomains=' + excludedDomainsStr + '&domains=' + filterDomains; - console.log(url); - var req = new Request(url); - fetch(req) - .then(function (response) { - return response.json(); - }) - .then(function (body) { - createArticles(body) - createExcluded();; - publisherCount(body.articles); - addPagination(body.totalResults); - }) -} -// adds a link to a new page when the next button is clicked -// function addPageLink() { -// const pageLinkNode = document.createElement('li'); -// const parentNode = document.querySelector('.pagination__ul'); -// pageLinkNode.innerHTML = page; -// pageLinkNode.className = "pagination__page"; -// parentNode.appendChild(pageLinkNode); -// pageLinkNode.addEventListener("click", event => {getArticles(pageLinkNode.innerHTML)}); -// } // adds 5 page links to bottom of page function addPagination(totalResults) { - clearPagination(); + clearDiv('.pagination__ul'); let numberOfPages = Math.floor(totalResults/20)+1; if (numberOfPages > 5) {numberOfPages = 5}; for (i=1;i<=numberOfPages;i++) { @@ -186,18 +135,19 @@ function addPagination(totalResults) { pageLinkNode.innerHTML = i; pageLinkNode.className = "pagination__page"; parentNode.appendChild(pageLinkNode); - console.log("i: " + i) - // console.log("page aP :" + page); pageLinkNode.addEventListener("click", event => {getArticles(pageLinkNode.innerHTML)}); } } -function publisherCount(articles) { - clearPublishers(); - const publishersNames = []; +// counts the articles on the search query by publisher and sorts them. Publisher can be clicked to show search by term + publishers filter. +// can definitely be re-written. Seems like a pretty messy way of sortinging that I've used. + +const publisherCount = (articles) => { + clearDiv('.publisher__list'); + let publishersNames = []; const publishersObjects = {}; + const publishersCount = []; - console.log(articles.length); articles.forEach(article => { if (!publishersNames.includes(article.source.name)) { let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; @@ -208,29 +158,55 @@ function publisherCount(articles) { } }) + publishersNames.forEach(publisher => { + publishersCount.push([publishersObjects[publisher].name,publishersObjects[publisher].count]); + }) + + publishersCount.sort(function(b, a) { + return a[1] - b[1]; + }); + + publishersNames =[]; + + publishersCount.forEach(publisher => { + publishersNames.push(publisher[0]); + }) + publishersNames.forEach(publisher => { const parentNode = document.querySelector('.publisher__list'); const childNode = document.createElement('div'); childNode.textContent = `${publisher} (${publishersObjects[publisher].count})`; parentNode.appendChild(childNode); childNode.addEventListener("click", event => {getArticles(1,"",publishersObjects[publisher].domain)}) - console.log("208" + publishersObjects[publisher].name); - }) +} - // console.log(publishersNames); - // console.log(publishersObjects); - // console.log(555); +// adds listeners that change the colour of the article the mouse is over - move to css +const mouseOverArticle = (articleNode) => { + articleNode.addEventListener("mouseover", event => { + articleNode.style.backgroundColor = "#ffc754"; + }) + articleNode.addEventListener("mouseout", event => { + articleNode.style.backgroundColor = "white"; + }) } + +const clearDiv = (divClass) => { + const mainNode = document.querySelector(divClass); + mainNode.innerHTML = ""; + console.log(`div cleared: ${divClass}`); +}; + const publisherObject = []; const excludedDomainsArray = []; let search = "uk"; + + getArticles(); formListener(); -// nextListener(); -// addPageLink(); + diff --git a/style.css b/style.css index 034fd8d..853bd7c 100644 --- a/style.css +++ b/style.css @@ -108,14 +108,13 @@ main { } .pagination__ul { - display:flex; flex-direction:row; flex:1; margin:0 0 1em 0; + } .pagination__page { - display:flex; min-width:50px; } @@ -208,6 +207,10 @@ p { } + .publishers { + display:none; + } + .pagination__page { display: inline-block; padding: 0px 9px; @@ -238,18 +241,31 @@ p { } @media (min-width: 768px) { + .publishers { + display: flex; + flex-direction:column; + padding:10px 10px 0 10px; + background: white; + margin:0 0 1em 10px; + } + main { flex-direction: row-reverse; } .excludedDomainsDiv { - flex:3; flex-direction:column; padding:10px 10px 0 10px; background: white; margin:0 0 1em 10px; } + .sideOrTopBar { + display:flex; + flex-direction:column; + flex:3; + } + .articles { display:flex; flex:9; From e6e24e77aaabde465330c8b8290186dd5234308c Mon Sep 17 00:00:00 2001 From: Phil B Date: Sun, 16 Sep 2018 18:22:12 +0100 Subject: [PATCH 11/13] now pulling 100 stories and can flip between 5 pages using the array that brings in. Also decided it was about time to put a little formatting into the date. And also using the 100 results to populate a sorted list of top ten publishers for the query --- index.js | 39 ++++++++++++++++++++++++++++----------- style.css | 8 ++++---- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/index.js b/index.js index 7a99c53..156dc04 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,5 @@ let itemId = 1; +let hundredArticles = []; // adds a listener to the search submit button @@ -15,19 +16,21 @@ const formListener = () => { // api request to news api. Returns json and calls createArticles function const getArticles = (page=1, excludedDomainsStr='', filterDomains="") => { + console.log('Function : Fetching Articles (getArticles)'); var url = 'https://newsapi.org/v2/everything?' + 'q=' + search + '&page=' + page + - '&apiKey=280f7af9f5c448c4a3598861960c947a&sortBy=publishedAt' + - '+&excludeDomains=' + excludedDomainsStr + '&domains=' + filterDomains; + '&apiKey=280f7af9f5c448c4a3598861960c947a' + + '&excludeDomains=' + excludedDomainsStr + '&domains=' + filterDomains + '&pageSize=100&sortBy=publishedAt&language=en'; var req = new Request(url); fetch(req) .then(function (response) { return response.json(); }) .then(function (body) { - createArticles(body) - createExcluded();; + hundredArticles = body.articles; + createArticles(0); + createExcluded(); publisherCount(body.articles); addPagination(body.totalResults); @@ -36,10 +39,14 @@ const getArticles = (page=1, excludedDomainsStr='', filterDomains="") => { // takes request body and turns it into html to be appended into '.articles' -const createArticles = (body) => { +const createArticles = (startArticle) => { + console.log('Function : Creating Articles (createArticles)'); clearDiv('.articles'); + // console.log(hundredArticles); + + twentyArticles = hundredArticles.slice(startArticle,startArticle+20); itemId = 0; - body.articles.forEach(article => { + twentyArticles.forEach(article => { itemId ++ const articleNode = document.createElement('div'); articleNode.className = "article"; @@ -47,7 +54,6 @@ const createArticles = (body) => { articleNode.innerHTML = articleTemplate(article,articleDomain, itemId); const parentNode = document.querySelector('.articles'); parentNode.appendChild(articleNode); - const excludeDomainSpan = document.createElement('span'); excludeDomainSpan.textContent = "Exclude Publisher"; excludeDomainSpan.className = "excludeButton"; @@ -55,6 +61,7 @@ const createArticles = (body) => { excludeDomainSpanParent.appendChild(excludeDomainSpan); excludeDomainSpan.addEventListener("click", event => { excludeDomain(articleDomain); + console.log(articleDomain); }) mouseOverArticle(articleNode) clickArticle(articleNode, article.url); @@ -63,6 +70,15 @@ const createArticles = (body) => { }; const articleTemplate = (article, articleDomain) => { + if (!article.urlToImage) { + article.urlToImage="images/blank.gif"; + }; + if (!article.description) { + article.description=" "; + }; + + dateSlicedAndSplit = (article.publishedAt.slice(0,10).split('-')); + return `
${article.title}
@@ -71,7 +87,7 @@ const articleTemplate = (article, articleDomain) => {
${article.source.name}

-
${article.publishedAt}
+
${dateSlicedAndSplit[2]} - ${dateSlicedAndSplit[1]} - ${dateSlicedAndSplit[0]}
` } @@ -135,7 +151,7 @@ function addPagination(totalResults) { pageLinkNode.innerHTML = i; pageLinkNode.className = "pagination__page"; parentNode.appendChild(pageLinkNode); - pageLinkNode.addEventListener("click", event => {getArticles(pageLinkNode.innerHTML)}); + pageLinkNode.addEventListener("click", event => {createArticles((pageLinkNode.innerHTML-1)*20)}); } } @@ -172,7 +188,9 @@ const publisherCount = (articles) => { publishersNames.push(publisher[0]); }) - publishersNames.forEach(publisher => { + let topTenPublishers = publishersNames.slice(0,10); + + topTenPublishers.forEach(publisher => { const parentNode = document.querySelector('.publisher__list'); const childNode = document.createElement('div'); childNode.textContent = `${publisher} (${publishersObjects[publisher].count})`; @@ -196,7 +214,6 @@ const mouseOverArticle = (articleNode) => { const clearDiv = (divClass) => { const mainNode = document.querySelector(divClass); mainNode.innerHTML = ""; - console.log(`div cleared: ${divClass}`); }; const publisherObject = []; diff --git a/style.css b/style.css index 853bd7c..d56ddae 100644 --- a/style.css +++ b/style.css @@ -244,9 +244,9 @@ p { .publishers { display: flex; flex-direction:column; - padding:10px 10px 0 10px; + padding:10px 10px 10px 10px; background: white; - margin:0 0 1em 10px; + margin:0 0 10px 10px; } main { @@ -263,12 +263,12 @@ p { .sideOrTopBar { display:flex; flex-direction:column; - flex:3; + flex:4; } .articles { display:flex; - flex:9; + flex:8; flex-direction:column; } From 8f3fd495ad99affe6ca2485157159677be1168b6 Mon Sep 17 00:00:00 2001 From: Phil B Date: Sun, 16 Sep 2018 18:42:42 +0100 Subject: [PATCH 12/13] just changed the html title tag --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index de3b3de..c29c169 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - Layout 2 + Phil's Newsreader. From dc25636e168d7d2815142bd988aa8fa8c1145cb6 Mon Sep 17 00:00:00 2001 From: Phil B Date: Mon, 17 Sep 2018 17:10:20 +0100 Subject: [PATCH 13/13] added missing images --- functionNames.js | 48 +++++++++++ images/.DS_Store | Bin 0 -> 6148 bytes images/blank.gif | Bin 0 -> 42 bytes new.js | 220 +++++++++++++++++++++++++++++++++++++++++++++++ old.js | 213 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 481 insertions(+) create mode 100644 functionNames.js create mode 100644 images/.DS_Store create mode 100644 images/blank.gif create mode 100644 new.js create mode 100644 old.js diff --git a/functionNames.js b/functionNames.js new file mode 100644 index 0000000..d7bed71 --- /dev/null +++ b/functionNames.js @@ -0,0 +1,48 @@ +// adds a listener to the search submit button +function formListener () { + +function articleTemplate(article, articleDomain) { + return + + // takes request body and turns it into html to be appended into 'main' +function createArticles(body) { + +// api request to news api. Returns json and calls createArticles function +function getArticles(page=1, excludedDomainsStr='', filterDomains="") { + +// add a listener to article creating 'click' event that takes user to URL +function clickArticle(articleNode, url) { + +// adds listeners that change the colour of the article the mouse is over +function mouseOverArticle(articleNode) { + + + +// clears existing articles from page in preparation for a new search or new page +function clearArticles() { + +// clears publishers +function clearPublishers() { + +// clears pagination +function clearPagination() { + +function excludeDomain(articleDomain) { + +// creates red buttons for excluded domains / publishers at top of page. +function createExcluded() { + + + +// adds 5 page links to bottom of page +function addPagination(totalResults) { + +function publisherCount(articles) { +clearPublishers(); + +global + +const publisherObject = []; +const excludedDomainsArray = []; +let search = "uk"; +let itemId = 1; diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..1f5edb96861301a04104c267f50647f95060b40f GIT binary patch literal 6148 zcmeHKyG{c!5FA5_NTi6UC|%NkL``Ewp`hjmAjt`YA}$IEQ2KZHN|^B)(1oibgmxwG z?Crykk)vAG2s-CUCmZ!5evfZ*tl$T{tXm>6F{LnsfQi2wbvYD4E VW<&KNe<>&WMW7Jk${E-L1D^~zED8Vs literal 0 HcmV?d00001 diff --git a/images/blank.gif b/images/blank.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/new.js b/new.js new file mode 100644 index 0000000..f37d4b0 --- /dev/null +++ b/new.js @@ -0,0 +1,220 @@ +let itemId = 1; +let hundredArticles = []; + + +// adds a listener to the search submit button +const formListener = () => { + const formElement = document.querySelector("form"); + const formInput = document.querySelector("#form-search"); + formElement.addEventListener('submit', event => { + event.preventDefault(); + search = formInput.value; + page=1; + getArticles(1,excludedDomainsArray); + }); +} + +// api request to news api. Returns json and calls createArticles function +const getArticles = (page=1, excludedDomainsStr='', filterDomains="") => { + console.log('Function : Fetching Articles (getArticles)'); + var url = 'https://newsapi.org/v2/everything?' + + 'q=' + search + + '&page=' + page + + '&apiKey=280f7af9f5c448c4a3598861960c947a' + + '&excludeDomains=' + excludedDomainsStr + '&domains=' + filterDomains + '&pageSize=100&sortBy=publishedAt'; + var req = new Request(url); + fetch(req) + .then(function (response) { + return response.json(); + }) + .then(function (body) { + hundredArticles = body.articles; + createArticles(0); + createExcluded(); + publisherCount(body.articles); + addPagination(body.totalResults); + + }) +} + + +// takes request body and turns it into html to be appended into '.articles' +const createArticles = (startArticle) => { + console.log('Function : Creating Articles (createArticles)'); + clearDiv('.articles'); + // console.log(hundredArticles); + + twentyArticles = hundredArticles.slice(startArticle,startArticle+20); + itemId = 0; + twentyArticles.forEach(article => { + itemId ++ + const articleNode = document.createElement('div'); + articleNode.className = "article"; + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + articleNode.innerHTML = articleTemplate(article,articleDomain, itemId); + const parentNode = document.querySelector('.articles'); + parentNode.appendChild(articleNode); + const excludeDomainSpan = document.createElement('span'); + excludeDomainSpan.textContent = "Exclude Publisher"; + excludeDomainSpan.className = "excludeButton"; + const excludeDomainSpanParent = document.querySelector(`#item${itemId}`); + excludeDomainSpanParent.appendChild(excludeDomainSpan); + excludeDomainSpan.addEventListener("click", event => { + excludeDomain(articleDomain); + console.log(articleDomain); + }) + mouseOverArticle(articleNode) + clickArticle(articleNode, article.url); + document.body.scrollTop = document.documentElement.scrollTop = 0; + }); +}; + +const articleTemplate = (article, articleDomain) => { + console.log(article.urlToImage); + return ` +
${article.title}
+
+
${article.description}
+
+
+
+
${article.source.name}

+
${article.publishedAt}
+
` +} + +// add a listener to article creating 'click' event that takes user to URL +const clickArticle = (articleNode, url) => { + articleNode.addEventListener("click", event => { + window.location = url; + }) +} + + +function excludeDomain(articleDomain) { + event.stopPropagation(); + if (!excludedDomainsArray.includes(articleDomain)) { + excludedDomainsArray.push(articleDomain); + } + getArticles(1,excludedDomainsArray.toString()); +} + +// creates red buttons for excluded domains / publishers at top of page. +function createExcluded() { + document.querySelector('.excludedDomains').innerHTML = ""; + if (excludedDomainsArray.length>0) { + document.querySelector('.excludedDomains__message').style.display = 'flex'; + excludedDomainsArray.forEach(domain => { + const parentNode = document.querySelector('.excludedDomains'); + const childNode = document.createElement('li'); + childNode.className = "excludedDomains__li"; + childNode.innerHTML = domain; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => { + excludedDomainsArray.splice(excludedDomainsArray.indexOf(domain),1); + getArticles(); + }) + }) + document.querySelector('.excludedDomainsDiv').style.display = 'flex'; + } else { + document.querySelector('.excludedDomainsDiv').style.display = 'none'; + } + if (excludedDomainsArray.length > 4) { + document.querySelector('.excludedDomainsDiv').style.flexDirection = 'column'; + } +} + + + + + + + + + +// adds 5 page links to bottom of page +function addPagination(totalResults) { + clearDiv('.pagination__ul'); + let numberOfPages = Math.floor(totalResults/20)+1; + if (numberOfPages > 5) {numberOfPages = 5}; + for (i=1;i<=numberOfPages;i++) { + const pageLinkNode = document.createElement('li'); + const parentNode = document.querySelector('.pagination__ul'); + pageLinkNode.innerHTML = i; + pageLinkNode.className = "pagination__page"; + parentNode.appendChild(pageLinkNode); + pageLinkNode.addEventListener("click", event => {createArticles((pageLinkNode.innerHTML-1)*20)}); + } +} + +// counts the articles on the search query by publisher and sorts them. Publisher can be clicked to show search by term + publishers filter. +// can definitely be re-written. Seems like a pretty messy way of sortinging that I've used. + +const publisherCount = (articles) => { + clearDiv('.publisher__list'); + let publishersNames = []; + const publishersObjects = {}; + const publishersCount = []; + + articles.forEach(article => { + if (!publishersNames.includes(article.source.name)) { + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + publishersNames.push(article.source.name) + publishersObjects[article.source.name]= {name:article.source.name,domain:articleDomain,count:1} + } else { + publishersObjects[article.source.name].count++; + } + }) + + publishersNames.forEach(publisher => { + publishersCount.push([publishersObjects[publisher].name,publishersObjects[publisher].count]); + }) + + publishersCount.sort(function(b, a) { + return a[1] - b[1]; + }); + + publishersNames =[]; + + publishersCount.forEach(publisher => { + publishersNames.push(publisher[0]); + }) + + publishersNames.forEach(publisher => { + const parentNode = document.querySelector('.publisher__list'); + const childNode = document.createElement('div'); + childNode.textContent = `${publisher} (${publishersObjects[publisher].count})`; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => {getArticles(1,"",publishersObjects[publisher].domain)}) + }) +} + + +// adds listeners that change the colour of the article the mouse is over - move to css +const mouseOverArticle = (articleNode) => { + articleNode.addEventListener("mouseover", event => { + articleNode.style.backgroundColor = "#ffc754"; + }) + articleNode.addEventListener("mouseout", event => { + articleNode.style.backgroundColor = "white"; + }) +} + + +const clearDiv = (divClass) => { + const mainNode = document.querySelector(divClass); + mainNode.innerHTML = ""; +}; + +const publisherObject = []; +const excludedDomainsArray = []; +let search = "uk"; + + +getArticles(); +formListener(); + + + + + diff --git a/old.js b/old.js new file mode 100644 index 0000000..d98f2fb --- /dev/null +++ b/old.js @@ -0,0 +1,213 @@ +let itemId = 1; + + +// adds a listener to the search submit button +const formListener = () => { + const formElement = document.querySelector("form"); + const formInput = document.querySelector("#form-search"); + formElement.addEventListener('submit', event => { + event.preventDefault(); + search = formInput.value; + page=1; + getArticles(1,excludedDomainsArray); + }); +} + +// api request to news api. Returns json and calls createArticles function +const getArticles = (page=1, excludedDomainsStr='', filterDomains="") => { + var url = 'https://newsapi.org/v2/everything?' + + 'q=' + search + + '&page=' + page + + '&apiKey=280f7af9f5c448c4a3598861960c947a&sortBy=publishedAt' + + '+&excludeDomains=' + excludedDomainsStr + '&domains=' + filterDomains + '&pageSize=100&sortBy=publishedAt'; + var req = new Request(url); + fetch(req) + .then(function (response) { + return response.json(); + }) + .then(function (body) { + createArticles(body) + createExcluded();; + publisherCount(body.articles); + addPagination(body.totalResults); + + }) +} + + +// takes request body and turns it into html to be appended into '.articles' +const createArticles = (body) => { + clearDiv('.articles'); + twentyArticles = body.articles.slice(0,10); + itemId = 0; + twentyArticles.forEach(article => { + itemId ++ + const articleNode = document.createElement('div'); + articleNode.className = "article"; + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + articleNode.innerHTML = articleTemplate(article,articleDomain, itemId); + const parentNode = document.querySelector('.articles'); + parentNode.appendChild(articleNode); + const excludeDomainSpan = document.createElement('span'); + excludeDomainSpan.textContent = "Exclude Publisher"; + excludeDomainSpan.className = "excludeButton"; + const excludeDomainSpanParent = document.querySelector(`#item${itemId}`); + excludeDomainSpanParent.appendChild(excludeDomainSpan); + excludeDomainSpan.addEventListener("click", event => { + excludeDomain(articleDomain); + }) + mouseOverArticle(articleNode) + clickArticle(articleNode, article.url); + document.body.scrollTop = document.documentElement.scrollTop = 0; + }); +}; + +const articleTemplate = (article, articleDomain) => { + return ` +
${article.title}
+
+
${article.description}
+
+
+
+
${article.source.name}

+
${article.publishedAt}
+
` +} + +// add a listener to article creating 'click' event that takes user to URL +const clickArticle = (articleNode, url) => { + articleNode.addEventListener("click", event => { + window.location = url; + }) +} + + +function excludeDomain(articleDomain) { + event.stopPropagation(); + if (!excludedDomainsArray.includes(articleDomain)) { + excludedDomainsArray.push(articleDomain); + } + getArticles(1,excludedDomainsArray.toString()); +} + +// creates red buttons for excluded domains / publishers at top of page. +function createExcluded() { + document.querySelector('.excludedDomains').innerHTML = ""; + if (excludedDomainsArray.length>0) { + document.querySelector('.excludedDomains__message').style.display = 'flex'; + excludedDomainsArray.forEach(domain => { + const parentNode = document.querySelector('.excludedDomains'); + const childNode = document.createElement('li'); + childNode.className = "excludedDomains__li"; + childNode.innerHTML = domain; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => { + excludedDomainsArray.splice(excludedDomainsArray.indexOf(domain),1); + getArticles(); + }) + }) + document.querySelector('.excludedDomainsDiv').style.display = 'flex'; + } else { + document.querySelector('.excludedDomainsDiv').style.display = 'none'; + } + if (excludedDomainsArray.length > 4) { + document.querySelector('.excludedDomainsDiv').style.flexDirection = 'column'; + } +} + + + + + + + + + +// adds 5 page links to bottom of page +function addPagination(totalResults) { + clearDiv('.pagination__ul'); + let numberOfPages = Math.floor(totalResults/20)+1; + if (numberOfPages > 5) {numberOfPages = 5}; + for (i=1;i<=numberOfPages;i++) { + const pageLinkNode = document.createElement('li'); + const parentNode = document.querySelector('.pagination__ul'); + pageLinkNode.innerHTML = i; + pageLinkNode.className = "pagination__page"; + parentNode.appendChild(pageLinkNode); + pageLinkNode.addEventListener("click", event => {getArticles(pageLinkNode.innerHTML)}); + } +} + +// counts the articles on the search query by publisher and sorts them. Publisher can be clicked to show search by term + publishers filter. +// can definitely be re-written. Seems like a pretty messy way of sortinging that I've used. + +const publisherCount = (articles) => { + clearDiv('.publisher__list'); + let publishersNames = []; + const publishersObjects = {}; + const publishersCount = []; + + articles.forEach(article => { + if (!publishersNames.includes(article.source.name)) { + let articleDomain = article.url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0]; + publishersNames.push(article.source.name) + publishersObjects[article.source.name]= {name:article.source.name,domain:articleDomain,count:1} + } else { + publishersObjects[article.source.name].count++; + } + }) + + publishersNames.forEach(publisher => { + publishersCount.push([publishersObjects[publisher].name,publishersObjects[publisher].count]); + }) + + publishersCount.sort(function(b, a) { + return a[1] - b[1]; + }); + + publishersNames =[]; + + publishersCount.forEach(publisher => { + publishersNames.push(publisher[0]); + }) + + publishersNames.forEach(publisher => { + const parentNode = document.querySelector('.publisher__list'); + const childNode = document.createElement('div'); + childNode.textContent = `${publisher} (${publishersObjects[publisher].count})`; + parentNode.appendChild(childNode); + childNode.addEventListener("click", event => {getArticles(1,"",publishersObjects[publisher].domain)}) + }) +} + + +// adds listeners that change the colour of the article the mouse is over - move to css +const mouseOverArticle = (articleNode) => { + articleNode.addEventListener("mouseover", event => { + articleNode.style.backgroundColor = "#ffc754"; + }) + articleNode.addEventListener("mouseout", event => { + articleNode.style.backgroundColor = "white"; + }) +} + + +const clearDiv = (divClass) => { + const mainNode = document.querySelector(divClass); + mainNode.innerHTML = ""; + console.log(`div cleared: ${divClass}`); +}; + +const publisherObject = []; +const excludedDomainsArray = []; +let search = "uk"; + + +getArticles(); +formListener(); + + + + +