From fe09d6b33a35b0c624000701515425305e8e181c Mon Sep 17 00:00:00 2001 From: Tom Date: Fri, 14 Sep 2018 11:07:23 +0100 Subject: [PATCH 1/2] HTML and CSS --- news_logo.png | Bin 0 -> 5317 bytes site.html | 129 ++++++++++++++++++++++++++++++++++++++++++++++++++ sitejava.js | 0 style.css | 58 +++++++++++++++++++++++ 4 files changed, 187 insertions(+) create mode 100644 news_logo.png create mode 100644 site.html create mode 100644 sitejava.js create mode 100644 style.css diff --git a/news_logo.png b/news_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..a586a51ae8f0c2155b35043bdc0f18f386316606 GIT binary patch literal 5317 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 X$ea*R)fXe$00000NkvXXu0mjflbdnK literal 0 HcmV?d00001 diff --git a/site.html b/site.html new file mode 100644 index 0000000..5a7c22c --- /dev/null +++ b/site.html @@ -0,0 +1,129 @@ + + + + + + + The News! + + + +
+
+ News Logo +
    +
  • About Us
    • +
+
+
+ + +
+ + +
+
+

[test] Title of the Discussion

+
+ +
+

Here we are talking about something. and this is the short brief about it.

+ +
+ +
+ +
+ Posted on + + 4/4/1984 + +
+ +
+ by + + Firstname Surname + +
+ +
+ View → +
+ +
+
+
+
+ + +
+
+

[test] Title of the Discussion

+
+ +
+

Here we are talking about something. and this is the short brief about it.

+ +
+ +
+ +
+ Posted on + + 4/4/1984 + +
+ +
+ by + + Firstname Surname + +
+ +
+ View → +
+ +
+
+
+
+ + +
+
+

[test] Title of the Discussion

+
+ +
+

Here we are talking about something. and this is the short brief about it.

+ +
+ +
+ +
+ Posted on + + 4/4/1984 + +
+ +
+ by + + Firstname Surname + +
+ +
+ View → +
+ +
+
+
+ diff --git a/sitejava.js b/sitejava.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..27b5c0b --- /dev/null +++ b/style.css @@ -0,0 +1,58 @@ +.pagehead { + display: flex; + justify-content: space-between; +} + +.navigation { + display: flex; + list-style-type: none; + padding-left: 0; + justify-content: center; + margin-top: 0; + font-size: 20px; + align-items: center; +} + +.navigation li { + padding: 0 10px; +} + +.articleBox { + display: flex; + align-items: center; + justify-content: center; + border-style: solid; + border-width: 1px; + margin-bottom: 5px; + padding-top: 15px; +} + +.articleImage { + display: none; +} + +.articleBoxContent { + display: flex; + flex-direction: column; +} + +.articleMeta { + display: flex; + justify-content: space-between; +} + +@media (min-width: 768px) { +.articleBox { + border: none; + } + +.articleImage { + display: block; + } + +.articleBoxContent { +padding-left: 20px; +} + + +} From f81213ea23b97fcfba191e150c51e38522a552f1 Mon Sep 17 00:00:00 2001 From: Tom Date: Mon, 17 Sep 2018 15:00:46 +0100 Subject: [PATCH 2/2] Final News --- site.html | 146 +++++++++++------------------------------------ sitejava.js | 160 ++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 95 +++++++++++++++++++++++++++---- 3 files changed, 277 insertions(+), 124 deletions(-) diff --git a/site.html b/site.html index 5a7c22c..2394962 100644 --- a/site.html +++ b/site.html @@ -8,122 +8,40 @@ -
-
- News Logo -
    -
  • About Us
    • -
-
-
- -
- - -
-
-

[test] Title of the Discussion

-
- -
-

Here we are talking about something. and this is the short brief about it.

- -
- -
- -
- Posted on - - 4/4/1984 - -
- -
- by - - Firstname Surname - -
- -
- View → -
- -
-
-
-
- - -
-
-

[test] Title of the Discussion

+
+
+ News Logo +
+
+ + + + + + +
+
+
+
+ + +
+
-
-

Here we are talking about something. and this is the short brief about it.

- -
- -
- -
- Posted on - - 4/4/1984 - -
- -
- by - - Firstname Surname - -
- -
- View → -
- -
-
-
-
- - -
-
-

[test] Title of the Discussion

-
- -
-

Here we are talking about something. and this is the short brief about it.

- -
- -
- -
- Posted on - - 4/4/1984 - -
- -
- by - - Firstname Surname - -
- -
- View → -
+ +
+
+
+
+
+
+
+
+
+
+ -
-
-
diff --git a/sitejava.js b/sitejava.js index e69de29..7082a75 100644 --- a/sitejava.js +++ b/sitejava.js @@ -0,0 +1,160 @@ +let fetchPromise = fetch('https://newsapi.org/v2/top-headlines?country=gb&apiKey=56887af3601845008f0dc6fa7f8b8810') //fetchs default page -news in UK + + +const Buttons = document.querySelectorAll(".normButton") +const categoryButtons = document.querySelectorAll(".categoryButton") +const paginationButton = document.querySelector(".pagButton") +const form = document.querySelector("form") +const textArea = document.querySelector(".textarea") + + +let textInBox = "" // variable to hold the value input to the text area +textArea.addEventListener("input", function(event) { + textInBox = event.target.value + console.log(textInBox) // sets varibale to equal the contents of text box +}) + +form.addEventListener("submit", function(event) { + event.preventDefault(); + console.log(textInBox) + const articleParentNode = document.querySelector(".newsfeed") + const childNewsArticle = document.querySelectorAll(".articleBox") + childNewsArticle.forEach(function(arrayValue) { + articleParentNode.removeChild(arrayValue) //removes our current news feed we loaded from deault page + }) + + fetchPromise = fetch(`https://newsapi.org/v2/everything?q=${textInBox}&page=1&apiKey=56887af3601845008f0dc6fa7f8b8810`) + + fetchPromise.then(function(response) { + return response.json() + }).then(function(body) { + console.log(body.articles) + createArticleBlock(body.articles) //calls our article create function with new fetch API + }) + +}) + + + +Buttons.forEach(function(arrayValue) { // this loop goes over the buttons + arrayValue.addEventListener("click", function(event) { // adds a listener + const articleParentNode = document.querySelector(".newsfeed") + const childNewsArticle = document.querySelectorAll(".articleBox") + console.log(childNewsArticle) + childNewsArticle.forEach(function(arrayValue) { + articleParentNode.removeChild(arrayValue) //removes our current news feed we loaded from deault page + }) + + if (event.target.textContent === "GB" || event.target.textContent === "US") { + fetchPromise = fetch(`https://newsapi.org/v2/top-headlines?country=${event.target.textContent}&apiKey=56887af3601845008f0dc6fa7f8b8810`) + } else if (event.target.textContent === "Sport") { + fetchPromise = fetch(`https://newsapi.org/v2/top-headlines?country=gb&category=${event.target.textContent.toLowerCase()}&apiKey=56887af3601845008f0dc6fa7f8b8810`) + } else { + fetchPromise = fetch(`https://newsapi.org/v2/top-headlines?country=us&category=${event.target.textContent.toLowerCase()}&apiKey=56887af3601845008f0dc6fa7f8b8810`) + } + + fetchPromise.then(function(response) { + return response.json() + }).then(function(body) { + console.log(body.articles) + createArticleBlock(body.articles) //calls our article create function with new fetch API + }) + }) +}) + +let pageCount = 1 +let isLoading = false + +window.addEventListener('scroll', function(e) { // this fires a console.log at bottom of page + if (window.scrollY + window.innerHeight >= document.body.scrollHeight) { + if (isLoading) { + console.log("Is loading") + } + + pageCount++ + + isLoading = true + + const fetchPromise = fetch(`https://newsapi.org/v2/everything?q=${textInBox}&page=${pageCount}&apiKey=56887af3601845008f0dc6fa7f8b8810`) + + fetchPromise.then(function(response) { + return response.json() + }).then(function(body) { + console.log(body.articles) + + createArticleBlock(body.articles) + + isLoading = false + }) + } + + console.log('Not bottom') + console.log(window.scrollY + window.innerHeight, document.body.scrollHeight) +}) + +fetchPromise.then(function(response) { + return response.json() +}).then(function(body) { + createArticleBlock(body.articles) +}) + + + +function createArticleBlock(newsStory) { + const articleParentNode = document.querySelector(".newsfeed") + + newsStory.forEach(function(arrayValue) { + const element = document.createElement('div') + element.className = "articleBox" + element.innerHTML = ` +
+ +
+
+
+

${arrayValue.title}

+
+
+

${arrayValue.description}

+ +
+
+
+ Posted on + + ${arrayValue.publishedAt} + +
+
+ by + + ${arrayValue.author} + +
+
+ View → +
+
+
+ + ` + articleParentNode.append(element) + }) +} + + + + + + + + +/*function createCharacter(character){ + const element = document.createElement('div'); + element.innerHTML = ` + ${character.name} + + ` + return element; +} +*/ diff --git a/style.css b/style.css index 27b5c0b..55ac72b 100644 --- a/style.css +++ b/style.css @@ -3,7 +3,25 @@ justify-content: space-between; } -.navigation { +.searchsection { + display: flex; + align-items: center; +} + +.form { + display: flex; + align-items: center; + padding-top: 20px; +} + +.righthandheader { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.btn-group { display: flex; list-style-type: none; padding-left: 0; @@ -11,10 +29,40 @@ margin-top: 0; font-size: 20px; align-items: center; + display: flex; + flex-wrap: wrap; +} + +.btn-group button { + background-color: #4CAF50; + /* Green background */ + border: 1px solid green; + /* Green border */ + color: white; + /* White text */ + padding: 10px 24px; + /* Some padding */ + cursor: pointer; + /* Pointer/hand icon */ + float: left; + /* Float the buttons side by side */ +} + +.btn-group button:not(:last-child) { + border-right: none; + /* Prevent double borders */ +} + +/* Clear floats (clearfix hack) */ +.btn-group:after { + content: ""; + clear: both; + display: table; } -.navigation li { - padding: 0 10px; +/* Add a background color on hover */ +.btn-group button:hover { + background-color: #3e8e41; } .articleBox { @@ -27,13 +75,19 @@ padding-top: 15px; } +.articleTitle { + height: auto; +} + .articleImage { display: none; + max-height: 175px; } .articleBoxContent { display: flex; flex-direction: column; + flex: 1; } .articleMeta { @@ -42,17 +96,38 @@ } @media (min-width: 768px) { -.articleBox { - border: none; + .articleBox { + border: none; } -.articleImage { - display: block; + body { + display: flex; + flex-direction: column; } -.articleBoxContent { -padding-left: 20px; -} + .mainPageContent { + display: flex; + } + .newsFeed { + flex: 3; + } + .leftColumn { + flex: 1; + } + + .rightColumn { + flex: 1 + } + + .imgDiv { + flex: 1; + display: flex; + justify-content: center; + } + + .articleImage { + display: block; + } }