constructorlabs · KateMhq · Sep 16, 2018 · Sep 16, 2018 · Sep 16, 2018 · Sep 16, 2018
diff --git 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
@@ -0,0 +1 @@
+{}
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="newsReader.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>News Reader</title>
+  </head>
+  <body>
+    <div class="header">
+      <h1>News Reader</h1>
+      <p>Here is your daily news feed</p>
+    </div>
+    <div class="topHeadlines">
+      <form class="searchForm">
+        <input type="text" class="keyword" placeholder="Search a keyword">
+        <input type="submit" value="Go">
+      </form>
+      <h2>Top headlines</h2>
+
+      <div class="articleList">
+      </div>
+    </div>
+    <button type="button" class="nextPage">Next page</button>
+
+
+
+
+
+
+
+
+    <script src="newsReader.js"></script>
+  </body>
+</html>
diff --git a/index.php b/index.php
@@ -0,0 +1 @@
+<?php include_once("index.html"); ?>
diff --git a/newsReader.css 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
@@ -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=`
+    <h3 class="title">${piece.title}</h3>
+    <img src=${piece.urlToImage} width=100% alt="image">
+    <p class="description">${piece.description}</p>
+    <p class="source">${piece.source.name}</p>
+    <p class="date">${piece.publishedAt}</p>
+    <a href=${piece.url}>Read more</a>
+    `;
+    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=`<li class=title >${item.title}</li>
+    //                             <img src=${item.urlToImage} width=100% alt="image">
+    //                             <li class=description>${item.description}</li>
+    //                             <li class=source>${item.source.name}</li>
+    //                             <li class=date>${item.publishedAt}</li>
+    //                             <a href=${item.url}>Read more</a>
+    //                             `;
+    //
+    //
+    //
+    //       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=`<li class=title >${item.title}</li>
+                                 <img src=${item.urlToImage} width=100% alt="image">
+                                 <li class=description>${item.description}</li>
+                                 <li class=source>${item.source.name}</li>
+                                 <li class=date>${item.publishedAt}</li>
+                                 <a href=${item.url}>Read more</a>
+                                 `;
+
+           i++;
+           document.documentElement.scrollTop = 0;
+         }
+           return;
+         })
+
+     })
+     .catch(error => console.log(error));
+
+})