From af612990b557b69de1bda8d0ebc205ee1bef3e39 Mon Sep 17 00:00:00 2001 From: Julius Date: Mon, 18 Jun 2018 07:45:25 +0100 Subject: [PATCH 1/6] Initial commit --- index.html | 34 +++++++++++++++ index.js | 38 +++++++++++++++++ myCSS.css | 122 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 194 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 myCSS.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..db796b1 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + + + Document + + + +
+
+

Top Articles Today

+
+ +
+
+
Section 2
+
+
+ + +
+
+ Back to top of page +
+
+
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..99026d6 --- /dev/null +++ b/index.js @@ -0,0 +1,38 @@ +const displayArticles = document.querySelector("#news"); + +var url = `https://newsapi.org/v2/top-headlines?country=Gb&apiKey=fef23a6326874b0a8642a68a9dc15687`; +var req = new Request(url); +fetch(url) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + console.log(data.articles); + displayNews(data); + }) + .catch(function(error) { + console.log(error); + }); + +function displayNews(data) { + const html = data.articles + .map(function(news) { + return ` +

+ ${news.title} +

+ No article image available +

${news.description}

+

+

Source: ${news.source.name}     Date of publication: ${news.publishedAt}

+

+ `; + }) + .join(""); + + displayArticles.innerHTML = html; +} diff --git a/myCSS.css b/myCSS.css new file mode 100644 index 0000000..5c6ed6f --- /dev/null +++ b/myCSS.css @@ -0,0 +1,122 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.container { + display: flex; + flex-direction: column; + height: 100vh; +} + +.header { + background-color: #ac2d25; + color: white; + display: flex; + flex-direction: column; + text-align: center; + padding: 10px; + height: 8vh; +} + +.header__logo { + margin: 0; + font-weight: 600; + font-size: 220%; +} + +.content { + display: flex; + flex-direction: column; + height: 89vh; + justify-content: space-evenly; + text-align: center; +} + +.content__section1 { + background-color: #f3f3ef; + flex: 1; + display: none; +} + +.content__section2 { + flex: 10; + overflow: auto; +} + +.content__section3 { + background-color: #f3f3ef; + display: none; + flex: 1; +} + +.titles { + font-size: 180%; + padding: 0 100px 20px 100px; +} + +.images { + display: none; +} + +.article-container:nth-child(even) { + background-color: #f3f3f0; +} + +.article-container { + padding-top: 20px; + padding-bottom: 20px; +} + +#footer__back-to-top { + margin: 0; + padding: 0; +} + +.footer { + display: flex; + flex-direction: row; + justify-content: space-evenly; + height: 3vh; + text-align: center; +} + +.footer_section1 { + background-color: black; + color: white; + flex: 1; +} + +@media (min-width: 768px) { + .images { + width: 650px; + display: inline-flex; + } + + .content__section1 { + display: block; + } + + .content__section3 { + display: block; + } + + .content { + flex-direction: row; + } +} + +@media (min-width: 1200px) { + .images { + width: 950px; + } + + .content__section3 { + flex: 1; + display: block; + } +} From 746111e7eeb578f6b78cde082c66009f14e425fd Mon Sep 17 00:00:00 2001 From: Julius Date: Thu, 20 Sep 2018 16:39:17 +0100 Subject: [PATCH 2/6] Site ready for deployment. --- index.html | 2 +- index.js | 6 ++++++ index.php | 1 + myCSS.css | 16 +++++++--------- package-lock.json | 6 ++++++ 5 files changed, 21 insertions(+), 10 deletions(-) create mode 100644 index.php create mode 100644 package-lock.json diff --git a/index.html b/index.html index db796b1..266dd4f 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@

Top Articles Today

- Back to top of page + Back to top of page
diff --git a/index.js b/index.js index 99026d6..74b37e5 100644 --- a/index.js +++ b/index.js @@ -34,5 +34,11 @@ function displayNews(data) { }) .join(""); + const upToTop = document.querySelector("#uptotop"); + + upToTop.addEventListener("click", function(event) { + window.scrollTo(0, 0); + }); + displayArticles.innerHTML = html; } diff --git a/index.php b/index.php new file mode 100644 index 0000000..b0e04b7 --- /dev/null +++ b/index.php @@ -0,0 +1 @@ + diff --git a/myCSS.css b/myCSS.css index 5c6ed6f..3bd8129 100644 --- a/myCSS.css +++ b/myCSS.css @@ -10,7 +10,6 @@ body { .container { display: flex; flex-direction: column; - height: 100vh; } .header { @@ -32,7 +31,6 @@ body { .content { display: flex; flex-direction: column; - height: 89vh; justify-content: space-evenly; text-align: center; } @@ -45,7 +43,6 @@ body { .content__section2 { flex: 10; - overflow: auto; } .content__section3 { @@ -78,19 +75,20 @@ body { } .footer { - display: flex; - flex-direction: row; - justify-content: space-evenly; + position: fixed; + display: block; + bottom: 0; + width: 100%; height: 3vh; text-align: center; -} - -.footer_section1 { background-color: black; color: white; flex: 1; } +.footer_section1 { +} + @media (min-width: 768px) { .images { width: 650px; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..d807436 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "lockfileVersion": 1, + "engines": { + "node": "10.7.0" + } +} From 4a4b5f9b47f1171649f600bb9574091c9712e3fe Mon Sep 17 00:00:00 2001 From: Julius <35594681+JuliusVai@users.noreply.github.com> Date: Thu, 4 Oct 2018 17:01:54 +0100 Subject: [PATCH 3/6] Update README.md --- README.md | 33 ++------------------------------- 1 file changed, 2 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index f2e0c4a..bc4e7e4 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,5 @@ # Responsive News Reader -Let's create a responsive news reader website. To get the latest news the app will display we are going to use [News API](https://newsapi.org/). As with the Weather and Unsplash APIs, you will need to register with the service to obtain an API key. +News Reader - responsive website that displays most popular news articles for a present time. Built with Javascript, CSS flex and external API. -## Objectives - -- [ ] Create a responsive layout that works well and looks good at mobile, tablet and desktop screen sizes. Please create the mobile version first, then tablet and then desktop. - -- [ ] Fetch news articles from News API and display them including title, image, description, publication, date and link to article. - -- [ ] Display images for tablet and desktop screens only - -- [ ] Implement a feature of your choice - -## Stretch goals - -- [ ] Implement pagination which allows you to get the next 20 results and display them - -- [ ] Add search functionality which allows the user to retrieve news about a particular topic - -## Instructions - -- Fork and clone this repo -- Commit your changes frequently with short and descriptive commit messages -- Create a pull request when complete -- We want to see great looking webpages -- Your code should have consistent indentation and sensible naming -- Use lots of concise functions with a clear purpose -- Add code comments where it is not immediately obvious what your code does -- Your code should not throw errors and handle edge cases gracefully. For example not break if server fails to return expected results - -## README.md - -When finished, include a README.md in your repo. This should explain what the project is, how to run it and how to use it. Someone who is not familiar with the project should be able to look at it and understand what it is and what to do with it. +Demo app // todays-top-news.herokuapp.com From 73971ead6bda82f80dd02eed7070f5c554031aea Mon Sep 17 00:00:00 2001 From: Julius <35594681+JuliusVai@users.noreply.github.com> Date: Thu, 4 Oct 2018 17:02:11 +0100 Subject: [PATCH 4/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bc4e7e4..fcc0dd0 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,4 @@ News Reader - responsive website that displays most popular news articles for a present time. Built with Javascript, CSS flex and external API. -Demo app // todays-top-news.herokuapp.com +Demo app // http://todays-top-news.herokuapp.com From 961b31eb058eb6cde0a225949ad1cd36b7efbb0e Mon Sep 17 00:00:00 2001 From: Julius <35594681+JuliusVai@users.noreply.github.com> Date: Fri, 5 Oct 2018 13:20:59 +0100 Subject: [PATCH 5/6] Update README.md --- README.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index fcc0dd0..eaeccaf 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,13 @@ -# Responsive News Reader +## Responsive News Reader -News Reader - responsive website that displays most popular news articles for a present time. Built with Javascript, CSS flex and external API. +### Technologies used: + +- Javascript +- CSS flex +- External API + +News Reader - responsive website that displays 20 most popular news articles for a present time. + +screenshot1 Demo app // http://todays-top-news.herokuapp.com From 5a4929202db647105f7a9a9ad3781ca86bbc300c Mon Sep 17 00:00:00 2001 From: Julius <35594681+JuliusVai@users.noreply.github.com> Date: Fri, 5 Oct 2018 13:34:22 +0100 Subject: [PATCH 6/6] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 1e5f889..4fbcf3d 100644 --- a/README.md +++ b/README.md @@ -8,4 +8,6 @@ News Reader - responsive website that displays 20 most popular news articles for a present time. +Demo app // http://todays-top-news.herokuapp.com + screenshot1