From 976c1224b61d1a2ecce858136b94e982379de9a6 Mon Sep 17 00:00:00 2001 From: Yelena Christensen Date: Fri, 14 Sep 2018 12:11:20 +0100 Subject: [PATCH 1/8] Fetch news articles and display on webpage --- index.html | 24 ++++++++++++++++++++++++ src/index.js | 21 +++++++++++++++++++++ style.css | 3 +++ 3 files changed, 48 insertions(+) create mode 100644 index.html create mode 100644 src/index.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..e3e52df --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + + Metro News + + + +
+
+ +
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..e67735b --- /dev/null +++ b/src/index.js @@ -0,0 +1,21 @@ +var url = 'https://newsapi.org/v2/top-headlines?sources=metro&apiKey=7318e7fb7dc04d14af2f0fd675cfda53'; +var req = new Request(url); + +fetch(req) + .then(function (response){ + return response.json(); + }) + .then(function(body){ + displayMobileArticle(body); + }) + + function displayMobileArticle(body) { + body.articles.forEach(article=> { + const divNode = document.createElement('div'); + divNode.innerHTML = `

${article.title}

${article.publishedAt}

+

${article.content}

Read this in Metro`; + const parentNode = document.querySelector('#newsfeed'); + parentNode.appendChild(divNode); + }) + } + diff --git a/style.css b/style.css new file mode 100644 index 0000000..7aba9bf --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +.author { + color: red; +} \ No newline at end of file From 5aa5636f6dfbd2fec6173ff1b88ab7b11ed213fe Mon Sep 17 00:00:00 2001 From: Yelena Christensen Date: Fri, 14 Sep 2018 17:12:21 +0100 Subject: [PATCH 2/8] Search functionality and basic CSS design --- index.html | 15 ++++++++--- src/index.js | 52 ++++++++++++++++++++++++++++++----- style.css | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 131 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index e3e52df..07132f4 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,21 @@ - Metro News + UK News + +
- + +
+
+ + +
+
@@ -21,4 +29,5 @@
Powered by News API
- \ No newline at end of file + + diff --git a/src/index.js b/src/index.js index e67735b..af018dd 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,8 @@ -var url = 'https://newsapi.org/v2/top-headlines?sources=metro&apiKey=7318e7fb7dc04d14af2f0fd675cfda53'; -var req = new Request(url); +const url = 'https://newsapi.org/v2/top-headlines?' + +'country=gb&' + +'apiKey=7318e7fb7dc04d14af2f0fd675cfda53'; +const req = new Request(url); + fetch(req) .then(function (response){ @@ -11,11 +14,46 @@ fetch(req) function displayMobileArticle(body) { body.articles.forEach(article=> { - const divNode = document.createElement('div'); - divNode.innerHTML = `

${article.title}

${article.publishedAt}

-

${article.content}

Read this in Metro`; - const parentNode = document.querySelector('#newsfeed'); - parentNode.appendChild(divNode); + if (article.content) { + const divNode = document.createElement('div'); + divNode.className = 'article-div'; + if (article.urlToImage) { + divNode.innerHTML = `

${article.title}

+

${article.publishedAt}

+
+

${article.description}

+ `; + } else { + divNode.innerHTML = `

${article.title}

+

${article.publishedAt}

+

${article.description}

+ `;; + } + const parentNode = document.querySelector('#newsfeed'); + parentNode.appendChild(divNode); + } }) } +//Add event listened to the search form +document.querySelector('form').addEventListener('submit', e => { + e.preventDefault(); + let searchItem = document.querySelector('#search').value; + document.querySelector('#newsfeed').textContent = ""; + const searchURL = 'https://newsapi.org/v2/everything?' + + `q=${searchItem}&` + + 'from=2018-09-14&' + + 'sortBy=popularity&' + + 'language=en&' + + 'apiKey=7318e7fb7dc04d14af2f0fd675cfda53'; + const reqURL = new Request(searchURL); + fetch(reqURL) + .then(function (response){ + return response.json(); + }) + .then(function(body){ + displayMobileArticle(body); + }) + document.querySelector('#search').value = ''; +}) + diff --git a/style.css b/style.css index 7aba9bf..c93f0bc 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,75 @@ -.author { - color: red; +body{ + margin: 0px; +} + +html { + box-sizing: border-box; + font-family: 'Ubuntu', Helvetica, Arial, sans-serif; +} +*, +*:before, +*:after { + /* display: none; */ + box-sizing: inherit; +} + +.header{ + font-family: 'Ubuntu', sans-serif; + font-size: 40px; + font-weight: 800; + background-color: #A2B6DB; + margin:0px; +} + +/* Style the search field */ +form.search input[type=text] { + padding: 10px; + font-size: 17px; + border: 1px solid grey; + float: left; + width: 80%; + background: #f1f1f1; +} + +/* Style the submit button */ +form.search button { + float: left; + width: 20%; + padding: 10px; + background: #BBD1E1; + color: white; + font-size: 17px; + border: 1px solid grey; + border-left: none; /* Prevent double borders */ + cursor: pointer; +} + +form.search button:hover { + background: #95B8D1; +} + +/* Clear floats */ +form.search::after { + content: ""; + clear: both; + display: table; +} + +main{ + margin: 0px; +} + +img { + display: none; +} + +h2 { + font-size: 1.2em; + background-color: #D1EBE2; + margin: 0; +} + +.article-div{ + background-color: #F7FBF9; + margin: 1em; } \ No newline at end of file From c32b7624d3fedded4f4f9f9bd104fbc49046aa3c Mon Sep 17 00:00:00 2001 From: Yelena Christensen Date: Fri, 14 Sep 2018 17:31:55 +0100 Subject: [PATCH 3/8] Flexbox for header and add img to desktop view --- index.html | 4 ++-- style.css | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 07132f4..b882fd2 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + UK News @@ -15,7 +15,7 @@
- +
diff --git a/style.css b/style.css index c93f0bc..2f25e67 100644 --- a/style.css +++ b/style.css @@ -19,6 +19,7 @@ html { font-weight: 800; background-color: #A2B6DB; margin:0px; + padding:0.2em; } /* Style the search field */ @@ -72,4 +73,18 @@ h2 { .article-div{ background-color: #F7FBF9; margin: 1em; +} + +@media(min-width :768px) { + .header{ + display: flex; + flex-direction: row; + justify-content: space-between; + } + + img{ + display: block; + width: 50%; + } + } \ No newline at end of file From 8a1c31d940789271d4081a51dfbce55aedf936f1 Mon Sep 17 00:00:00 2001 From: YelChristensen Date: Sat, 15 Sep 2018 15:01:47 +0100 Subject: [PATCH 4/8] responsive design for tablets --- src/index.js | 21 +++++++++++---------- style.css | 36 ++++++++++++++++++++++++++++++++++-- 2 files changed, 45 insertions(+), 12 deletions(-) diff --git a/src/index.js b/src/index.js index af018dd..434dd2c 100644 --- a/src/index.js +++ b/src/index.js @@ -14,20 +14,21 @@ fetch(req) function displayMobileArticle(body) { body.articles.forEach(article=> { - if (article.content) { + if (article.description) { const divNode = document.createElement('div'); - divNode.className = 'article-div'; if (article.urlToImage) { - divNode.innerHTML = `

${article.title}

-

${article.publishedAt}

-
+ divNode.className = 'article-div-w-img'; + divNode.innerHTML = `

${article.title}

+

${article.publishedAt}

+

${article.description}

- `; +
Read all about it
`; } else { - divNode.innerHTML = `

${article.title}

-

${article.publishedAt}

-

${article.description}

- `;; + divNode.className = 'article-div'; + divNode.innerHTML = `

${article.title}

+

${article.publishedAt}

+

${article.description}

+
Read all about it
`;; } const parentNode = document.querySelector('#newsfeed'); parentNode.appendChild(divNode); diff --git a/style.css b/style.css index 2f25e67..ffb5522 100644 --- a/style.css +++ b/style.css @@ -70,11 +70,17 @@ h2 { margin: 0; } -.article-div{ +.article-div, .article-div-w-img { background-color: #F7FBF9; margin: 1em; } +footer { + text-align: right; + margin: 1em; + font-size: 70%; +} + @media(min-width :768px) { .header{ display: flex; @@ -82,9 +88,35 @@ h2 { justify-content: space-between; } + .article-div-w-img { + display: flex; + flex-flow: wrap; + } + .title, .date, .link{ + width: 100vw; + } + + .article-div-w-img > .content, .img { + width: 46vw; + + } + img{ display: block; - width: 50%; + height: auto; + max-width: 97%; + } + + .link { + text-align: right; } + .article-div { + display: flex; + flex-flow: wrap; + } + + .article-div > .content { + width: 100vw; + } } \ No newline at end of file From 608a11c891e7f0996291a3f8f16420ad2e4c8dbe Mon Sep 17 00:00:00 2001 From: YelChristensen Date: Sat, 15 Sep 2018 15:50:51 +0100 Subject: [PATCH 5/8] Sticky nav bar and 'go to top' button, fixed date format --- index.html | 1 + src/index.js | 42 ++++++++++++++++++++++++++++++++++++++++-- style.css | 38 +++++++++++++++++++++++++++++++++++++- 3 files changed, 78 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index b882fd2..9286cf9 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@
+
diff --git a/src/index.js b/src/index.js index 434dd2c..fd1c85c 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,8 @@ const url = 'https://newsapi.org/v2/top-headlines?' + const req = new Request(url); + + fetch(req) .then(function (response){ return response.json(); @@ -14,19 +16,21 @@ fetch(req) function displayMobileArticle(body) { body.articles.forEach(article=> { + const ts = new Date(`${article.publishedAt}`) + const date = ts.toGMTString(); if (article.description) { const divNode = document.createElement('div'); if (article.urlToImage) { divNode.className = 'article-div-w-img'; divNode.innerHTML = `

${article.title}

-

${article.publishedAt}

+

${date}

${article.description}

Read all about it
`; } else { divNode.className = 'article-div'; divNode.innerHTML = `

${article.title}

-

${article.publishedAt}

+

${date}

${article.description}

Read all about it
`;; } @@ -58,3 +62,37 @@ document.querySelector('form').addEventListener('submit', e => { document.querySelector('#search').value = ''; }) + +// When the user scrolls the page, execute myFunction +window.onscroll = function() {myFunction(), scrollFunction()}; + +// Get the navbar +var header = document.querySelector(".header"); + +// Get the offset position of the navbar +var sticky = header.offsetTop; + +// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position +function myFunction() { + if (window.pageYOffset >= sticky) { + header.classList.add("sticky") + } else { + header.classList.remove("sticky"); + } +} + +// When the user scrolls down 20px from the top of the document, show the button + +function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + document.getElementById("myBtn").style.display = "block"; + } else { + document.getElementById("myBtn").style.display = "none"; + } +} + +// When the user clicks on the button, scroll to the top of the document +function topFunction() { + document.body.scrollTop = 0; // For Safari + document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera +} \ No newline at end of file diff --git a/style.css b/style.css index ffb5522..1aab426 100644 --- a/style.css +++ b/style.css @@ -22,6 +22,18 @@ html { padding:0.2em; } +/* The sticky class is added to the navbar with JS when it reaches its scroll position */ +.sticky { + position: fixed; + top: 0; + width: 100%; +} + +/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */ +.sticky + .main { + padding-top: 80px; +} + /* Style the search field */ form.search input[type=text] { padding: 10px; @@ -72,7 +84,7 @@ h2 { .article-div, .article-div-w-img { background-color: #F7FBF9; - margin: 1em; + margin: 2em 1em 1em 1em; } footer { @@ -81,6 +93,25 @@ footer { font-size: 70%; } +#myBtn { + display: none; /* Hidden by default */ + position: fixed; /* Fixed/sticky position */ + bottom: 2em; + right: 1em; + z-index: 99; /* Make sure it does not overlap */ + border: none; + outline: none; + background-color: #A2B6DB; + cursor: pointer; /* Add a mouse pointer on hover */ + padding: 15px; + border-radius: 10px; /* Rounded corners */ + font-size: 18px; /* Increase font size */ +} + +#myBtn:hover { + background-color: #BBD1E1; /* Add a dark-grey background on hover */ +} + @media(min-width :768px) { .header{ display: flex; @@ -119,4 +150,9 @@ footer { .article-div > .content { width: 100vw; } + + #myBtn { + bottom: 3em; + right: 10em; + } } \ No newline at end of file From 56d0a83731b5243ec441b5bae31934bac5efd998 Mon Sep 17 00:00:00 2001 From: Yelena Christensen Date: Sun, 16 Sep 2018 06:26:29 +0100 Subject: [PATCH 6/8] Article div changes color on hover --- src/index.js | 6 ++++-- style.css | 5 +++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index fd1c85c..9b201dc 100644 --- a/src/index.js +++ b/src/index.js @@ -16,7 +16,7 @@ fetch(req) function displayMobileArticle(body) { body.articles.forEach(article=> { - const ts = new Date(`${article.publishedAt}`) + const ts = new Date(`${article.publishedAt}`); const date = ts.toGMTString(); if (article.description) { const divNode = document.createElement('div'); @@ -95,4 +95,6 @@ function scrollFunction() { function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera -} \ No newline at end of file +} + +// Converting timestamp to time passed since diff --git a/style.css b/style.css index 1aab426..7c8c310 100644 --- a/style.css +++ b/style.css @@ -123,6 +123,11 @@ footer { display: flex; flex-flow: wrap; } + + .article-div-w-img:hover { + background-color: #F9EEF3; + } + .title, .date, .link{ width: 100vw; } From cdc7701a9baa3b2d05f76867622989e698557c16 Mon Sep 17 00:00:00 2001 From: Yelena Christensen Date: Mon, 17 Sep 2018 11:56:03 +0100 Subject: [PATCH 7/8] Newsfeed with search button --- index.html | 4 +- src/index.js | 208 ++++++++++++++++++++++++++++++++++----------------- style.css | 110 ++++++++++++++++----------- 3 files changed, 210 insertions(+), 112 deletions(-) diff --git a/index.html b/index.html index 9286cf9..528839e 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -9,6 +10,7 @@ +
@@ -30,5 +32,5 @@
Powered by News API
- + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 9b201dc..2f27a6b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,100 +1,170 @@ -const url = 'https://newsapi.org/v2/top-headlines?' + -'country=gb&' + -'apiKey=7318e7fb7dc04d14af2f0fd675cfda53'; +const url = + "https://newsapi.org/v2/top-headlines?" + + "country=gb&" + + "apiKey=7318e7fb7dc04d14af2f0fd675cfda53"; + const req = new Request(url); +// Fetch function for the main headlines +fetch(req) + .then(function(response) { + return response.json(); + }) + .then(function(body) { + displayArticles(body); + }); -fetch(req) - .then(function (response){ - return response.json(); - }) - .then(function(body){ - displayMobileArticle(body); - }) +// Function which generates a div containing the article's headline, time, img, discription, source and link +function displayArticles(body) { + body.articles.forEach(article => { + + //Timestamp is converted into GMT date and time format + const ts = new Date(`${article.publishedAt}`); + const date = ts.toGMTString(); + + //If article does not have description it will not be displayed + if (article.description) { + const divNode = document.createElement("div"); + + //Two divs are generated due to the final layout for wide screens + // one with img and one without; + if (article.urlToImage) { + divNode.className = "article-div-w-img"; + + divNode.innerHTML = `

${article.title}

- function displayMobileArticle(body) { - body.articles.forEach(article=> { - const ts = new Date(`${article.publishedAt}`); - const date = ts.toGMTString(); - if (article.description) { - const divNode = document.createElement('div'); - if (article.urlToImage) { - divNode.className = 'article-div-w-img'; - divNode.innerHTML = `

${article.title}

${date}

+
+

${article.description}

-
Read all about it
`; - } else { - divNode.className = 'article-div'; - divNode.innerHTML = `

${article.title}

+ +

Source: ${ + article.source.name + }

+ +
+ +
Read all about it
`; + } else { + divNode.className = "article-div"; + + divNode.innerHTML = `

${article.title}

+

${date}

+

${article.description}

-
Read all about it
`;; - } - const parentNode = document.querySelector('#newsfeed'); - parentNode.appendChild(divNode); - } - }) + +

Source: ${ + article.source.name + }

+ +
+ +
Read all about it
`; + } + + // The newly created article div is added to the newsfeed + const parentNode = document.querySelector("#newsfeed"); + parentNode.appendChild(divNode); } -//Add event listened to the search form -document.querySelector('form').addEventListener('submit', e => { - e.preventDefault(); - let searchItem = document.querySelector('#search').value; - document.querySelector('#newsfeed').textContent = ""; - const searchURL = 'https://newsapi.org/v2/everything?' + - `q=${searchItem}&` + - 'from=2018-09-14&' + - 'sortBy=popularity&' + - 'language=en&' + - 'apiKey=7318e7fb7dc04d14af2f0fd675cfda53'; - const reqURL = new Request(searchURL); - fetch(reqURL) - .then(function (response){ - return response.json(); - }) - .then(function(body){ - displayMobileArticle(body); + // Tried adding an event listener to 'More news from this source button', but it does not seem to work. + document.querySelector(".news").addEventListener("click", e => { + + let requiredSource = ""; + article.source.id + ? (requiredSource = article.source.id) + : (requiredSource = article.source.name); + + document.querySelector("#newsfeed").textContent = ""; + let newSourceURL = + "https://newsapi.org/v2/top-headlines?" + + `sources=${requiredSource}&` + + "apiKey=7318e7fb7dc04d14af2f0fd675cfda53"; + + const source = new Request(newSourceURL); + + fetch(source) + .then(function(response) { + return response.json(); }) - document.querySelector('#search').value = ''; -}) + + .then(function(body) { + displayArticles(body); + }); + }); + }); +} -// When the user scrolls the page, execute myFunction -window.onscroll = function() {myFunction(), scrollFunction()}; -// Get the navbar -var header = document.querySelector(".header"); +//Add event listener to the search form +document.querySelector("form").addEventListener("submit", e => { + e.preventDefault(); + let searchItem = document.querySelector("#search").value; + //The exisiting newsfeed is cleared before search results displayed + document.querySelector("#newsfeed").textContent = ""; -// Get the offset position of the navbar -var sticky = header.offsetTop; + const searchURL = + "https://newsapi.org/v2/everything?" + + `q=${searchItem}&` + + "from=2018-09-14&" + + "sortBy=popularity&" + + "language=en&" + + "apiKey=7318e7fb7dc04d14af2f0fd675cfda53"; + + const reqURL = new Request(searchURL); + + fetch(reqURL) + .then(function(response) { + return response.json(); + }) + + .then(function(body) { + displayArticles(body); + }); + + document.querySelector("#search").value = ""; +}); -// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position + + +//Two functions are executed on scroll - sticky header and 'go to top' button +window.onscroll = function() { + myFunction(), scrollFunction(); +}; + +// myFunction() activates sticky header +var header = document.querySelector(".header"); +var sticky = header.offsetTop; +// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset >= sticky) { - header.classList.add("sticky") + header.classList.add("sticky"); } else { header.classList.remove("sticky"); } } -// When the user scrolls down 20px from the top of the document, show the button - +// When the user scrolls down 20px from the top of the document, show the 'go to top' button function scrollFunction() { - if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { - document.getElementById("myBtn").style.display = "block"; - } else { - document.getElementById("myBtn").style.display = "none"; - } + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + document.getElementById("myBtn").style.display = "block"; + } else { + document.getElementById("myBtn").style.display = "none"; + } } -// When the user clicks on the button, scroll to the top of the document +// When the user clicks on the 'go to top' button, scroll to the top of the document function topFunction() { - document.body.scrollTop = 0; // For Safari - document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera -} + document.body.scrollTop = 0; // For Safari -// Converting timestamp to time passed since + document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera +} diff --git a/style.css b/style.css index 7c8c310..5a85609 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,10 @@ -body{ +body { margin: 0px; } html { box-sizing: border-box; - font-family: 'Ubuntu', Helvetica, Arial, sans-serif; + font-family: "Ubuntu", Helvetica, Arial, sans-serif; } *, *:before, @@ -13,16 +13,16 @@ html { box-sizing: inherit; } -.header{ - font-family: 'Ubuntu', sans-serif; +.header { + font-family: "Ubuntu", sans-serif; font-size: 40px; font-weight: 800; - background-color: #A2B6DB; - margin:0px; - padding:0.2em; + background-color: #a2b6db; + margin: 0px; + padding: 0.2em; } -/* The sticky class is added to the navbar with JS when it reaches its scroll position */ +/* The sticky class is added to the header with JS when it reaches its scroll position */ .sticky { position: fixed; top: 0; @@ -35,7 +35,7 @@ html { } /* Style the search field */ -form.search input[type=text] { +form.search input[type="text"] { padding: 10px; font-size: 17px; border: 1px solid grey; @@ -49,7 +49,7 @@ form.search button { float: left; width: 20%; padding: 10px; - background: #BBD1E1; + background: #bbd1e1; color: white; font-size: 17px; border: 1px solid grey; @@ -58,7 +58,7 @@ form.search button { } form.search button:hover { - background: #95B8D1; + background: #95b8d1; } /* Clear floats */ @@ -68,76 +68,101 @@ form.search::after { display: table; } -main{ +main { margin: 0px; } +/*No image displayed in mobile version*/ img { display: none; } h2 { font-size: 1.2em; - background-color: #D1EBE2; + background-color: #d1ebe2; margin: 0; } -.article-div, .article-div-w-img { - background-color: #F7FBF9; +h4 { + margin: 0.5em 0em 0em 0em; +} + +.article-div, +.article-div-w-img { + display: flex; + flex-flow: wrap; + background-color: #f7fbf9; margin: 2em 1em 1em 1em; } +.title, +.date, +.link { + width: 100vw; +} + +.more-news { + align-self: flex-end; +} + +.source { + margin: 0em 2em 0em 0em; +} + +.news { + background-color: #d5b3c2; + border-radius: 6px; +} + +.news:hover { + background-color: #d64f89; +} + footer { text-align: right; margin: 1em; font-size: 70%; } +/* CSS relating to 'Go to top' button */ #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ - bottom: 2em; - right: 1em; + bottom: 2em; + right: 1em; z-index: 99; /* Make sure it does not overlap */ - border: none; - outline: none; - background-color: #A2B6DB; + border: none; + outline: none; + background-color: #a2b6db; cursor: pointer; /* Add a mouse pointer on hover */ - padding: 15px; - border-radius: 10px; /* Rounded corners */ - font-size: 18px; /* Increase font size */ + padding: 15px; + border-radius: 10px; + font-size: 18px; } #myBtn:hover { - background-color: #BBD1E1; /* Add a dark-grey background on hover */ + background-color: #bbd1e1; } -@media(min-width :768px) { - .header{ +@media (min-width: 768px) { + .header { display: flex; flex-direction: row; justify-content: space-between; } - - .article-div-w-img { - display: flex; - flex-flow: wrap; - } + /* Article background colour changes on hover */ .article-div-w-img:hover { - background-color: #F9EEF3; + background-color: #f9eef3; } - .title, .date, .link{ - width: 100vw; - } - - .article-div-w-img > .content, .img { + /* Where the article has an image, the image and the description will be placed side by side */ + .article-div-w-img > .content, + .img { width: 46vw; - } - img{ + img { display: block; height: auto; max-width: 97%; @@ -156,8 +181,9 @@ footer { width: 100vw; } + /* Changed 'Go to Top' button position for larger screen due to the general changes in conents position */ #myBtn { - bottom: 3em; - right: 10em; + bottom: 3em; + right: 10em; } -} \ No newline at end of file +} From 83ec6d968219187edfdbc460ad40db671c6d33d1 Mon Sep 17 00:00:00 2001 From: Yelena Christensen Date: Tue, 18 Sep 2018 09:14:59 +0100 Subject: [PATCH 8/8] More news from this source button is not an outside function --- src/index.js | 65 +++++++++++++++++++++++++--------------------------- 1 file changed, 31 insertions(+), 34 deletions(-) diff --git a/src/index.js b/src/index.js index 2f27a6b..e9aee4a 100644 --- a/src/index.js +++ b/src/index.js @@ -29,7 +29,9 @@ function displayArticles(body) { const divNode = document.createElement("div"); //Two divs are generated due to the final layout for wide screens - // one with img and one without; + // one with img and one without; + const articleSource= article.source.id ? article.source.id : article.source.name + if (article.urlToImage) { divNode.className = "article-div-w-img"; @@ -45,7 +47,7 @@ function displayArticles(body) { article.source.name }
-
+

${article.description}

-

Source: ${ - article.source.name - }

+

Source: ${article.source.name}

-
+