diff --git a/news_logo.png b/news_logo.png new file mode 100644 index 0000000..a586a51 Binary files /dev/null and b/news_logo.png differ diff --git a/site.html b/site.html new file mode 100644 index 0000000..2394962 --- /dev/null +++ b/site.html @@ -0,0 +1,47 @@ + + + + + + + The News! + + + + +
+
+ News Logo +
+
+ + + + + + +
+
+
+
+ + +
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ + + diff --git a/sitejava.js b/sitejava.js new file mode 100644 index 0000000..7082a75 --- /dev/null +++ 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 new file mode 100644 index 0000000..55ac72b --- /dev/null +++ b/style.css @@ -0,0 +1,133 @@ +.pagehead { + display: flex; + justify-content: space-between; +} + +.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; + justify-content: center; + 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; +} + +/* Add a background color on hover */ +.btn-group button:hover { + background-color: #3e8e41; +} + +.articleBox { + display: flex; + align-items: center; + justify-content: center; + border-style: solid; + border-width: 1px; + margin-bottom: 5px; + padding-top: 15px; +} + +.articleTitle { + height: auto; +} + +.articleImage { + display: none; + max-height: 175px; +} + +.articleBoxContent { + display: flex; + flex-direction: column; + flex: 1; +} + +.articleMeta { + display: flex; + justify-content: space-between; +} + +@media (min-width: 768px) { + .articleBox { + border: none; + } + + body { + display: flex; + flex-direction: column; + } + + .mainPageContent { + display: flex; + } + + .newsFeed { + flex: 3; + } + + .leftColumn { + flex: 1; + } + + .rightColumn { + flex: 1 + } + + .imgDiv { + flex: 1; + display: flex; + justify-content: center; + } + + .articleImage { + display: block; + } +}