diff --git a/README.md b/README.md index e062a87..811e566 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,11 @@ +You can view this app live here: + https://mysterious-journey-19262.herokuapp.com/ + + + # 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/). You will need to register with the service to obtain an API key. ## Objectives diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/composer.json @@ -0,0 +1 @@ +{} diff --git a/index.html b/index.html new file mode 100644 index 0000000..64a0060 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + + News Reader + + +
+

News Reader

+

Here is your daily news feed

+
+
+
+ + +
+

Top headlines

+ +
+
+
+ + + + + + + + + + + + diff --git a/index.php b/index.php new file mode 100644 index 0000000..99c96b1 --- /dev/null +++ b/index.php @@ -0,0 +1 @@ + diff --git a/newsReader.css b/newsReader.css new file mode 100644 index 0000000..f8bbfee --- /dev/null +++ b/newsReader.css @@ -0,0 +1,89 @@ +* { + box-sizing: inherit; +} + +body { + display: flex; + box-sizing: border-box; + margin: 20px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + flex-direction: column; + justify-content: space-around; + padding: 10%; + padding-top: 5%; +} + + +.header{ + font-size: 2.5vh; +} + + +input[type=text]{ + font-size: 16px; + border-color: #e7e7e7; + border-radius: 22px; + border-style: solid; + padding: 12px; + width: 70%; +} + +input[type=submit]{ + font-size: 16px; + background-color: #e7e7e7; + color: black; + border-radius: 20px; + padding: 12px; + border-color: #e7e7e7; + width: 25%; +} + +h2{ + font-size: 2.5vh; +} +.articleList{ + flex-direction: column; + justify-content: center; + height: 100vh; + display: flex; + flex-flow: row wrap; +} + +ul{ + list-style-type: none; + margin: 0; + padding: 0; + padding-bottom:40px; + +} + +li{ + padding: 0; + padding-bottom: 8px; +} +.title{ + font-size: 2.5vh; +} +.description{ + font-size: 2.3vh; +} + +button{ + background-color: #4CAF50; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 25px; + position: fixed; + bottom: 0px; + right: 0px; +} + +@media(max-width:768px){ + img{ + display: none; + } +} diff --git a/newsReader.js b/newsReader.js new file mode 100644 index 0000000..279a195 --- /dev/null +++ b/newsReader.js @@ -0,0 +1,152 @@ +// const news=document.createElement("p"); +const topHeadlines=document.querySelector(".topHeadlines"); +const articleList=document.querySelector(".articleList"); +const nextPageButton=document.querySelector(".nextPage"); +const searchForm=document.querySelector(".searchForm"); +const keyword=document.querySelector(".keyword"); +const body=document.querySelector("body"); +let p=1; + +const urlBase = 'https://newsapi.org/v2/' +let queries = 'top-headlines?' + +'country=gb&' +let page = `page=${p}&`; +const pageSize = 'pageSize=5&'; +const apiKey = 'apiKey=84e1f3efc2a148dca439f1b5ad3cd201'; +let url = urlBase + queries + pageSize + page + apiKey; +const newsDetail=document.createElement("ul"); +newsDetail.classList.add("onePieceofNews"); +articleList.appendChild(newsDetail); + + +function getNews(piece){ + const newsContent=document.createElement("li") + if(piece.description!==null){ + newsContent.innerHTML=` +

${piece.title}

+ image +

${piece.description}

+

${piece.source.name}

+

${piece.publishedAt}

+ Read more + `; + newsDetail.appendChild(newsContent); + + + } +} + + + +function fetchNews(){ + + return fetch(url) + .then(response => response.json()) + .then(response => { + newsDetail.innerHTML=""; + response.articles.forEach(piece => getNews(piece)) + }) + .catch(error => console.log(error)); + +} + +fetchNews(); + +function fetchNewsNextPage(pageNumber){ + page = `page=${pageNumber}&` + url = urlBase + queries + pageSize + page + apiKey; + return fetch(url) + .then(response => response.json()) + .then(response => { + newsDetail.innerHTML=""; + return response.articles.forEach(piece => getNews(piece)) + }) + .catch(error => console.log(error)); +} + +body.addEventListener("click", event => { + + if(event.target.matches(".nextPage")){ + p++; + fetchNewsNextPage(p) + } +}) +// nextPageButton.onclick=function(event) { +// p++; +// page = `page=${p}&` +// url = urlBase + queries + pageSize + page + apiKey; +// console.log("url: ", url); +// +// req = new Request(url); +// fetch(req) +// .then(response => { +// return response.json() +// }) + // .then(response => { + // console.log(response); + // + // i=1; + // response.articles.forEach(function(item){ + // + // if(item.description!==null){ + // newsDetail=document.getElementById(`${i}`) + // newsDetail.innerHTML=`
  • ${item.title}
    • + // image + //
  • ${item.description}
    • + //
  • ${item.source.name}
    • + //
  • ${item.publishedAt}
    • + // Read more + // `; + // + // + // + // i++; + // document.documentElement.scrollTop = 0; + // } + // return; + // }) + // + // }) + // .catch(error => console.log(error)); + // } + +searchForm.addEventListener('submit', function(event){ + event.preventDefault(); + p=1; + page = `page=${p}&` + queries = `everything?q=${keyword.value}&from=2018-09-16&to=2018-09-16&sortBy=popularity&`; + url = urlBase + queries + pageSize + page + apiKey; + console.log("url: ", url); + + req = new Request(url); + fetch(req) + .then(response => { + // console.log(response.json()); + return response.json() + }) + .then(response => { + console.log(response); + + i=1; + response.articles.forEach(function(item){ + + if(item.description!==null){ + newsDetail=document.getElementById(`${i}`) + newsDetail.innerHTML=`
  • ${item.title}
    • + image +
  • ${item.description}
    • +
  • ${item.source.name}
    • +
  • ${item.publishedAt}
    • + Read more + `; + + i++; + document.documentElement.scrollTop = 0; + } + return; + }) + + }) + .catch(error => console.log(error)); + +})