Skip to content

Tom Bastian News Site #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tomjbast wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Tom Bastian News Site #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe09d6b
HTML and CSS
tomjbast Sep 14, 2018
f81213e
Final News
tomjbast Sep 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added news_logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 47 additions & 0 deletions site.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>The News!</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="pageheadcontain">
<header class="pagehead">
<img src="news_logo.png" alt="News Logo" style="width:175px;height:175px;"/>
<div class = "righthandheader">
<div class="btn-group">
<button class="normButton">GB</button>
<button class="normButton">US</button>
<button class="normButton">Technology</button>
<button class="normButton">Business</button>
<button class="normButton">Sport</button>
<button class="normButton">Entertainment</button>
</div>
<div class "searchsection">
Copy link
Contributor

@dmitrigrabov dmitrigrabov Sep 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing =

<form class="form">
<div class="text-input">
<textarea class = "textarea" rows="1" cols="10">
Copy link
Contributor

@dmitrigrabov dmitrigrabov Sep 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

text input would work better for single line search input

</textarea>
<input class="submit-button" type="submit" value="Submit">
</div>
</form>
</div>

</header>
</div>
</div>
<div class="mainPageContent">
<div class="leftColumn">
</div>
<div class="newsFeed">
</div>
<div class="rightColumn">
</div>
</div>
<script src="sitejava.js"></script>

</body>
160 changes: 160 additions & 0 deletions sitejava.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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")
Copy link
Contributor

@dmitrigrabov dmitrigrabov Sep 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

name variables and functions using lower case for first letter.

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
Copy link
Contributor

@dmitrigrabov dmitrigrabov Sep 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be easier to grab the text input content, once submit is detected. It will save writing an additional event handler and save using a global variable

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 = `
<div class ="imgDiv">
<img class = "articleImage" src="${arrayValue.urlToImage}">
</div>
<div class="articleBoxContent">
<div class="articleTitle">
<h3>${arrayValue.title}</h3> <!-- just for testing -->
</div>
<div class="articleBrief">
<p>${arrayValue.description}</p>
<!-- just for testing -->
</div><!-- end of articleBrief -->
<div class="articleMeta">
<div class="articlesMetaPostedOn">
<span>Posted on</span>
<span class="articleMetaPostedOnDate">
${arrayValue.publishedAt} <!-- just for testing -->
</span>
</div>
<div class="articleBy">
<span>by</span>
<span>
${arrayValue.author} <!-- just for testing -->
</span>
</div>
<div class="articleLink">
<a href="${arrayValue.url}">View &rarr;</a> <!-- just for testing -->
</div>
</div><!-- end of articleMeta -->
</div><!-- end of articleContent -->
<!-- end of articleBlock -->
`
articleParentNode.append(element)
})
}








/*function createCharacter(character){
Copy link
Contributor

@dmitrigrabov dmitrigrabov Sep 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Commented out code can be removed

const element = document.createElement('div');
element.innerHTML = `
<span>${character.name}</span>
<img src="${character.img}" />
`
return element;
}
*/
133 changes: 133 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}