From c38ffe8db2967e28704c083116856bf553be3e3e Mon Sep 17 00:00:00 2001
From: Chris P <frankenwin@chris-mbp.mynet>
Date: Sun, 16 Sep 2018 10:57:53 +0100
Subject: [PATCH 1/7] First commit. Initial news functionality in js

---
 index.html | 43 ++++++++++++++++++++++++++++++
 news.js    | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css  | 18 +++++++++++++
 3 files changed, 139 insertions(+)
 create mode 100644 index.html
 create mode 100644 news.js
 create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..35382a5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<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">
+    <link rel="stylesheet" href="style.css">
+    <title>End of Days</title>
+</head>
+<body>
+    <header><h1>End Of Days</h1>
+        <form>
+<input class="searchB" type="search" placeholder="Are you dead yet?">
+<button>Search</button>
+            </form>
+        </header>
+
+
+
+<ul id="headline">
+      
+</ul>
+
+<div class="buttons">
+<button value="all-button" class="all-button">All News</button>
+<button value="plague" class="plague-button">The Plague</button>
+<button value="blood">Blood</button>
+<button value="locusts">Locusts</button>
+<button value="trump">Pig</button>
+<button value="nuclear">Nuclear</button>
+</div>
+
+
+<ul id="newz">
+    
+</ul>
+
+<button class="pag-button"></button>
+
+    
+    <script src="news.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/news.js b/news.js
new file mode 100644
index 0000000..418f7bc
--- /dev/null
+++ b/news.js
@@ -0,0 +1,78 @@
+function displayErrorToUser(message){
+    return console.log(message)
+}
+      
+const parentNode = document.getElementById("newz"); // find the <ul in the html file
+
+// Main News div insertion
+
+function displayDataOnPage(topNews){
+  //  console.log(topNews);
+
+    topNews.articles.forEach(content => {
+        const spanNode = document.createElement("li"); // make fresh <li>
+        spanNode.innerHTML =                            // news contents
+        `<h2>${content.title}</h2>
+        <p>${content.description}</p>
+        <img src="${content.urlToImage}" class="image" alt="news image" height="42" width="42">`;
+        parentNode.appendChild(spanNode);           // pushing to the <ul>
+    });
+}
+
+// Buttons event listener/value to fetch
+
+const buttonSelector = document.querySelector('.buttons');
+buttonSelector.addEventListener("click", function(event){
+    event.preventDefault();
+    let url;
+    if (event.target.value === 'all-button') {
+        url = 'https://newsapi.org/v2/top-headlines?country=gb&apiKey=534d9b30f7bd4185b60cba8d406e11ec'
+    }
+    else {
+        url = `https://newsapi.org/v2/everything?q=${event.target.value}&apiKey=534d9b30f7bd4185b60cba8d406e11ec`
+    }
+             
+    getData(url);
+});
+
+//search event listener
+
+const searchFunc = document.querySelector('.searchB');
+const inputInfo = document.querySelector('.searchB') //INPUT? NECESSARY????
+
+
+searchFunc.addEventListener("click", function(event){ //COMBINE SEARCH AND INPUT??
+    event.preventDefault();
+    //WHAT IS VALUE??? GOOGLE IT
+    let url = `https://newsapi.org/v2/everything?q=${event.target.value}&apiKey=534d9b30f7bd4185b60cba8d406e11ec`
+    getData(url);
+})
+
+
+//button function
+
+function fetchingButtons(url, selector) { //button fetch addresses
+    const buttonall = document.querySelector(selector);
+
+}
+
+
+//Fetch
+
+function getData(url){
+    // main news body fetch - button changeable
+    fetch(url) // by default fetch makes a GET request
+    .then(function(response) {
+        
+        return response.json();
+    })
+    .then(function(body){
+        parentNode.innerHTML = "";
+        displayDataOnPage(body);
+    })
+    .catch(function(error) {
+        displayErrorToUser(`${error} ahhhh server problem`);
+    });
+}
+
+getData('https://newsapi.org/v2/top-headlines?country=gb&apiKey=534d9b30f7bd4185b60cba8d406e11ec')
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..47ff4c3
--- /dev/null
+++ b/style.css
@@ -0,0 +1,18 @@
+* {
+  box-sizing: border-box;
+ 
+}
+
+body{
+   
+    }
+
+.app {
+  
+  
+}
+
+h2 {
+font-size: 20px;
+
+}
\ No newline at end of file

From ab94ccd0614ffd92608de598799b034708b5d36f Mon Sep 17 00:00:00 2001
From: chrisphillers <chrisphillers@gmail.com>
Date: Sun, 16 Sep 2018 13:02:31 +0100
Subject: [PATCH 2/7] Search function in process

---
 index.html |  4 ++--
 news.js    | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 35382a5..3040001 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,8 @@
 <body>
     <header><h1>End Of Days</h1>
         <form>
-<input class="searchB" type="search" placeholder="Are you dead yet?">
-<button>Search</button>
+<input class="searchClass" type="search" results=5 placeholder="Are you dead yet?">
+<button class="searchB">Search</button>
             </form>
         </header>
 
diff --git a/news.js b/news.js
index 418f7bc..6887746 100644
--- a/news.js
+++ b/news.js
@@ -22,7 +22,7 @@ function displayDataOnPage(topNews){
 // Buttons event listener/value to fetch
 
 const buttonSelector = document.querySelector('.buttons');
-buttonSelector.addEventListener("click", function(event){
+buttonSelector.addEventListener("submit", function(event){
     event.preventDefault();
     let url;
     if (event.target.value === 'all-button') {
@@ -36,15 +36,22 @@ buttonSelector.addEventListener("click", function(event){
 });
 
 //search event listener
+let searchFunc = document.querySelector('.searchB');
+let inputInfo = document.querySelector('.searchClass');
+//let inputInfo = document.querySelector('mySearch'); //INPUT? NECESSARY????
+//console.log(searchFunc.value);
+console.log(searchFunc.value);
+console.log(searchFunc);
 
-const searchFunc = document.querySelector('.searchB');
-const inputInfo = document.querySelector('.searchB') //INPUT? NECESSARY????
+console.log(inputInfo.value);
+console.log(inputInfo);
 
-
-searchFunc.addEventListener("click", function(event){ //COMBINE SEARCH AND INPUT??
+searchFunc.addEventListener("submit", function(event){ //COMBINE SEARCH AND INPUT??
     event.preventDefault();
     //WHAT IS VALUE??? GOOGLE IT
+    event.target.value === inputInfo
     let url = `https://newsapi.org/v2/everything?q=${event.target.value}&apiKey=534d9b30f7bd4185b60cba8d406e11ec`
+    
     getData(url);
 })
 

From 53a883d2ccfd82e722995a464846ae943d88179a Mon Sep 17 00:00:00 2001
From: chrisphillers <chrisphillers@gmail.com>
Date: Sun, 16 Sep 2018 15:13:00 +0100
Subject: [PATCH 3/7] Added headline box, beginings of layout, infographic box

---
 index.html | 14 ++++++---
 news.js    | 89 +++++++++++++++++++++++++++++++++--------------------
 style.css  | 90 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 151 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index 3040001..cbd87ea 100644
--- a/index.html
+++ b/index.html
@@ -6,20 +6,24 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="style.css">
     <title>End of Days</title>
+    <link href="https://fonts.googleapis.com/css?family=Encode+Sans:300,400,700" rel="stylesheet">
 </head>
 <body>
     <header><h1>End Of Days</h1>
         <form>
-<input class="searchClass" type="search" results=5 placeholder="Are you dead yet?">
+<input class="searchClass" type="search" results=5 placeholder="Search me">
 <button class="searchB">Search</button>
             </form>
         </header>
 
 
-
-<ul id="headline">
-      
-</ul>
+<div class="hero">
+    <ul id="headline">  
+    </ul>
+    <div class="infoG">
+        <div class="graphic"><p>hi</p></div>
+    </div>
+</div>
 
 <div class="buttons">
 <button value="all-button" class="all-button">All News</button>
diff --git a/news.js b/news.js
index 6887746..0fa811b 100644
--- a/news.js
+++ b/news.js
@@ -3,13 +3,10 @@ function displayErrorToUser(message){
 }
       
 const parentNode = document.getElementById("newz"); // find the <ul in the html file
-
-// Main News div insertion
-
-function displayDataOnPage(topNews){
+ // Main News div insertion
+ function displayDataOnPage(topNews){
   //  console.log(topNews);
-
-    topNews.articles.forEach(content => {
+     topNews.articles.forEach(content => {
         const spanNode = document.createElement("li"); // make fresh <li>
         spanNode.innerHTML =                            // news contents
         `<h2>${content.title}</h2>
@@ -18,11 +15,9 @@ function displayDataOnPage(topNews){
         parentNode.appendChild(spanNode);           // pushing to the <ul>
     });
 }
-
-// Buttons event listener/value to fetch
-
-const buttonSelector = document.querySelector('.buttons');
-buttonSelector.addEventListener("submit", function(event){
+ // Buttons event listener/value to fetch
+ const buttonSelector = document.querySelector('.buttons');
+buttonSelector.addEventListener("click", function(event){
     event.preventDefault();
     let url;
     if (event.target.value === 'all-button') {
@@ -35,38 +30,27 @@ buttonSelector.addEventListener("submit", function(event){
     getData(url);
 });
 
-//search event listener
-let searchFunc = document.querySelector('.searchB');
-let inputInfo = document.querySelector('.searchClass');
-//let inputInfo = document.querySelector('mySearch'); //INPUT? NECESSARY????
-//console.log(searchFunc.value);
-console.log(searchFunc.value);
-console.log(searchFunc);
-
-console.log(inputInfo.value);
-console.log(inputInfo);
-
-searchFunc.addEventListener("submit", function(event){ //COMBINE SEARCH AND INPUT??
+ //search event listener
+ const searchFunc = document.querySelector('.searchClass');
+const inputInfo = document.querySelector('.searchClass') //INPUT? NECESSARY????
+ searchFunc.addEventListener("click", function(event){ //COMBINE SEARCH AND INPUT??
     event.preventDefault();
     //WHAT IS VALUE??? GOOGLE IT
-    event.target.value === inputInfo
     let url = `https://newsapi.org/v2/everything?q=${event.target.value}&apiKey=534d9b30f7bd4185b60cba8d406e11ec`
-    
     getData(url);
 })
 
 
-//button function
-
-function fetchingButtons(url, selector) { //button fetch addresses
-    const buttonall = document.querySelector(selector);
 
-}
 
 
-//Fetch
+ //button function
+ function fetchingButtons(url, selector) { //button fetch addresses
+    const buttonall = document.querySelector(selector);
+ }
 
-function getData(url){
+ //Fetch
+ function getData(url){
     // main news body fetch - button changeable
     fetch(url) // by default fetch makes a GET request
     .then(function(response) {
@@ -81,5 +65,44 @@ function getData(url){
         displayErrorToUser(`${error} ahhhh server problem`);
     });
 }
+ getData('https://newsapi.org/v2/top-headlines?country=gb&apiKey=534d9b30f7bd4185b60cba8d406e11ec') 
+
+
+
+ //HEADLINE FETCH/DISPLAY
+
+const parentNode2 = document.getElementById("headline"); // find the <ul in the html file
+
+// Main News div insertion
+
+function displayDataOnHead(topNews){
+  //  console.log(topNews);
+
+    topNews.articles.forEach(content => {
+        const spanNode2 = document.createElement("li"); // make fresh <li>
+        spanNode2.innerHTML =                            // news contents
+        `<h2>${content.title}</h2>
+        <p>${content.description}</p>
+        <img src="${content.urlToImage}" class="image" alt="news image" height="42" width="42">`;
+        parentNode2.appendChild(spanNode2);           // pushing to the <ul>
+    });
+}
+
+function getDataH(urlH){
+    // main news body fetch - button changeable
+    fetch(urlH) // by default fetch makes a GET request
+    .then(function(response) {
+        
+        return response.json();
+    })
+    .then(function(body){
+      //  parentNode.innerHTML = "";
+        displayDataOnHead(body);
+    })
+    .catch(function(error) {
+        displayErrorToUser2(`${error} ahhhh server problem`);
+    });
+}
+
+getDataH('https://newsapi.org/v2/everything?q=bitcoin&pageSize=1&from=2018-08-16&sortBy=publishedAt&apiKey=534d9b30f7bd4185b60cba8d406e11ec')
 
-getData('https://newsapi.org/v2/top-headlines?country=gb&apiKey=534d9b30f7bd4185b60cba8d406e11ec')
\ No newline at end of file
diff --git a/style.css b/style.css
index 47ff4c3..2c483f6 100644
--- a/style.css
+++ b/style.css
@@ -5,14 +5,96 @@
 
 body{
    
+  display: flex;
+  flex-direction: column;
+  font-family: 'Encode Sans', sans-serif;
+  margin: 0;
+  background: white;
+  color:black;
+  max-width: 2000px;
+
     }
 
-.app {
+
+
+
+h2 {
+  font-size: 20px;
+  
+  }
+
+.graphic {
+  display:none;
+  border-left:black;
+  border-left-width: 3px;
+}
+
+
+
+
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+
+}
+
+/* Large devices (desktops, 960px and up) */
+@media (min-width: 960px) {
+
+  header {
+    display:flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex: 1;
+    background-color: red;
+  
+  
+  }
   
+  header h1 {
+    background-color: blue;
+  }
   
+  .searchClass {
+    background-color: yellow;
+  }
+
+
 }
 
-h2 {
-font-size: 20px;
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+
+
+
+.hero {
+  display:flex;
+  flex-direction: row;
+  
+}
+
+.headline {
+  display:flex;
+  flex: 1;
+  flex-basis: 50%;
+}
+
+.infoG{
+  display:flex;
+  flex: 1;
+  flex-basis: 50%;
+}
+
+
+  .graphic {
+    display:flex;
+    flex: 1;
+    border-left:black;
+    border-left-width: 3px;
+  }
+  
+
+
+
+}
 
-}
\ No newline at end of file

From 3268df01df64f2d17a6674a0233ab2b20404bace Mon Sep 17 00:00:00 2001
From: chrisphillers <chrisphillers@gmail.com>
Date: Sun, 16 Sep 2018 21:41:04 +0100
Subject: [PATCH 4/7] layout, styling and responsive elements

---
 index.html |  21 ++--
 news.js    |  14 +--
 style.css  | 316 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 321 insertions(+), 30 deletions(-)

diff --git a/index.html b/index.html
index cbd87ea..4222295 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,8 @@
     <link href="https://fonts.googleapis.com/css?family=Encode+Sans:300,400,700" rel="stylesheet">
 </head>
 <body>
-    <header><h1>End Of Days</h1>
+    <header class="heading">
+        <h1>End Of Days</h1>
         <form>
 <input class="searchClass" type="search" results=5 placeholder="Search me">
 <button class="searchB">Search</button>
@@ -21,17 +22,21 @@
     <ul id="headline">  
     </ul>
     <div class="infoG">
-        <div class="graphic"><p>hi</p></div>
+            <ul id="graphic">  
+            <li id="one"></li>
+            <li id="two"></li> 
+            <li id="three"></li>     
+            </ul>
     </div>
 </div>
 
 <div class="buttons">
 <button value="all-button" class="all-button">All News</button>
-<button value="plague" class="plague-button">The Plague</button>
-<button value="blood">Blood</button>
-<button value="locusts">Locusts</button>
-<button value="trump">Pig</button>
-<button value="nuclear">Nuclear</button>
+<button value="plague" class="all-button">The Plague</button>
+<button value="blood" class="all-button">Blood</button>
+<button value="locusts" class="all-button">Locusts</button>
+<button value="trump" class="all-button">Pig</button>
+<button value="nuclear" class="all-button">Nuclear</button>
 </div>
 
 
@@ -39,7 +44,7 @@
     
 </ul>
 
-<button class="pag-button"></button>
+<!-- <button class="pag-button"></button> -->
 
     
     <script src="news.js"></script>
diff --git a/news.js b/news.js
index 0fa811b..f35e063 100644
--- a/news.js
+++ b/news.js
@@ -9,9 +9,9 @@ const parentNode = document.getElementById("newz"); // find the <ul in the html
      topNews.articles.forEach(content => {
         const spanNode = document.createElement("li"); // make fresh <li>
         spanNode.innerHTML =                            // news contents
-        `<h2>${content.title}</h2>
-        <p>${content.description}</p>
-        <img src="${content.urlToImage}" class="image" alt="news image" height="42" width="42">`;
+        `<img src="${content.urlToImage}" alt="news image">
+        <h2>${content.title}</h2>
+        <p>${content.description}</p>`;
         parentNode.appendChild(spanNode);           // pushing to the <ul>
     });
 }
@@ -42,8 +42,6 @@ const inputInfo = document.querySelector('.searchClass') //INPUT? NECESSARY????
 
 
 
-
-
  //button function
  function fetchingButtons(url, selector) { //button fetch addresses
     const buttonall = document.querySelector(selector);
@@ -81,9 +79,9 @@ function displayDataOnHead(topNews){
     topNews.articles.forEach(content => {
         const spanNode2 = document.createElement("li"); // make fresh <li>
         spanNode2.innerHTML =                            // news contents
-        `<h2>${content.title}</h2>
-        <p>${content.description}</p>
-        <img src="${content.urlToImage}" class="image" alt="news image" height="42" width="42">`;
+        `<img src="${content.urlToImage}" alt="news image">
+        <h2>${content.title}</h2>`;
+    
         parentNode2.appendChild(spanNode2);           // pushing to the <ul>
     });
 }
diff --git a/style.css b/style.css
index 2c483f6..23723b1 100644
--- a/style.css
+++ b/style.css
@@ -1,47 +1,249 @@
 * {
   box-sizing: border-box;
- 
+  
 }
 
 body{
    
   display: flex;
+  /* justify-content: flex-start; */
   flex-direction: column;
+  justify-content: center;
   font-family: 'Encode Sans', sans-serif;
-  margin: 0;
   background: white;
   color:black;
-  max-width: 2000px;
+  max-width: 1500px;
+  margin: 0;
+  
 
     }
 
+ul{ 
+  list-style-type: none;
+  
+ }
+
+
+
+h1 {
+  font-size: 30px;
+  display: flex;
+  justify-content: center;
+  
+}
+
+.heading {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+
+}
+
+.searchClass{
 
+  display: flex;
+  flex:1;
+  justify-content: center;
+}
+
+.infoG{
+    display:none;
+}
+
+ 
+
+  #headline {
+    display:flex;
+    flex: 1;
+    position: relative; 
+    margin-right: 7vw;
+    
+    
+    
+  }
 
+  #headline h2 {
+  position: absolute; 
+   bottom: 0;  
+   /* width: 93.5%; */
+   background: rgb(0, 0, 0); /* fallback color */
+   background: rgba(0, 0, 0, 0.7);
+   padding: 2vw;
+   color: white; 
+   max-width: 1000px;
+  }
 
-h2 {
-  font-size: 20px;
+  #headline img{
+  width:100%;
+  max-width: 1000px;
+  max-height: 500px;
+  /* object-fit: cover; */
+  /* position: relative; */
   
   }
 
+
+  .buttons{
+    display:flex;
+    flex: 1;
+    justify-content: space-around;
+    margin-left: 20px;
+    margin-right: 20px;
+
+  }
+
+
+  .all-button{
+    display: inline-block;
+      border: none;
+      padding: 1rem 2rem;
+      margin: 0;
+      text-decoration: none;
+      background: #0069ed;
+      color: #ffffff;
+      font-family: sans-serif;
+      font-size: 1rem;
+      cursor: pointer;
+      text-align: center;
+      transition: background 250ms ease-in-out, 
+                  transform 150ms ease;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+  }
+  
+  .all-button:hover {
+    background: #2079b0;
+    background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
+    background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);
+    background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
+    background-image: -o-linear-gradient(top, #2079b0, #eb94d0);
+    background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
+    text-decoration: none;
+  }
+  
+
 .graphic {
   display:none;
   border-left:black;
   border-left-width: 3px;
 }
 
+.hero {
+  display:flex;
+  flex: 1;
+  
+  
+}
+
+#newz {
+  display:flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 7vw;
 
+}
+
+#newz h2 {
+background-color: antiquewhite;
+top: 0;
+position: float;  
+}
+
+
+
+#newz img {
+
+  width:100%;
+  object-fit: cover;
+  height: 50vw;
+  background-image: url("https://chrisphillers.000webhostapp.com/placeholder1.jpg")
+  /* -webkit-box-shadow: -34px 53px 196px -30px rgba(0,0,0,0.49);
+  -moz-box-shadow: -34px 53px 196px -30px rgba(0,0,0,0.49);
+  box-shadow: -34px 53px 196px -30px rgba(0,0,0,0.49); */
+}
 
 
 
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
 
+  .hero {
+
+    
+  }
+
+  #headline {
+    display:flex;
+    flex: 1;
+    
+   
+  }
+
+  #headline img{
+    width:90vw;
+    object-fit: cover;
+    position: relative;
+    
+    }
+
+  /* #newz {
+  width: 400px;
+    
+  }
+
+  #newz ul {
+    display:flex;
+  flex: 1;
+  flex-wrap: wrap;
+  }
+
+  #newz img{
+
+    height: 250px;
+
+  } */
+
+  #newz {
+    display: flex;
+  flex-flow: row wrap; 
+}
+
+#newz li {
+  flex-grow: 1;
+  width:300px;
+  
+  margin: 0.2vw;
+  padding: 2vw;
+  
+  
+}
+#newz img {
+ 
+  height: 15vw;
+  background-color:lightblue;
+  
+}
+
+
+.buttons{
+  margin-left: 30px;
+  margin-right: 50px;
+  
+   
+
+}
+
+
+
+
+
 }
 
 /* Large devices (desktops, 960px and up) */
 @media (min-width: 960px) {
 
-  header {
+  .heading {
     display:flex;
     flex-direction: row;
     justify-content: space-between;
@@ -67,32 +269,118 @@ h2 {
 
 
 
-.hero {
+  .hero {
   display:flex;
   flex-direction: row;
   
 }
 
-.headline {
+#headline {
+  display:flex;
+  flex: 1;
+  /* flex-basis: 70%; */
+} 
+
+#headline h2 {
   display:flex;
   flex: 1;
-  flex-basis: 50%;
+  width:65vw;
+  /* flex-basis: 70%; */
+} 
+
+
+
+
+
+#headline img{
+  width:65vw;
+  height: 30vw;
+  object-fit: cover;
+  position: relative;
+  
 }
 
-.infoG{
+  .buttons{
+    margin-left: 0px;
+    margin-right: 50px;
+
+  }
+
+
+
+.infoG {
   display:flex;
+  
   flex: 1;
-  flex-basis: 50%;
+  flex-basis: 30%;
+  justify-content: flex-start;
+  flex-direction: column;
+  
+    
 }
 
+#newz {
+
+
+}
 
-  .graphic {
+ .graphic {
     display:flex;
     flex: 1;
-    border-left:black;
-    border-left-width: 3px;
+    justify-content: flex-start;
+    flex-direction: column;
+    
+
+    /* border-left-width: 30px;
+    border-left-color: black;
+    margin: 20px;
+    width: 100% */
+    
+    
+    
   }
+
+
+  .graphic ul {
+    display:flex;
+    flex: 1;
   
+    
+  } 
+
+  #one {
+    display:flex;
+   
+   
+    height: 10px;
+    background-color: red;
+    width: 100px;
+    margin-bottom:10px;
+    
+    
+  }
+  
+  #two{
+    display:flex;
+    
+   
+    height: 10px;
+    background-color: yellow;
+    width: 30px;
+    margin-bottom:10px;
+    
+  }
+
+  #three {
+    display:flex;
+   
+    
+    height: 10px;
+    background-color: red;
+    width: 30px;
+    margin-bottom:10px;
+    
+  }
 
 
 

From e663ba67f37b8d768be3805648cac21e07410e1e Mon Sep 17 00:00:00 2001
From: chrisphillers <chrisphillers@gmail.com>
Date: Sun, 16 Sep 2018 23:30:43 +0100
Subject: [PATCH 5/7] responsive and style improvements

---
 news.js   |  18 ++++--
 style.css | 172 +++++++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 151 insertions(+), 39 deletions(-)

diff --git a/news.js b/news.js
index f35e063..92b8985 100644
--- a/news.js
+++ b/news.js
@@ -9,9 +9,11 @@ const parentNode = document.getElementById("newz"); // find the <ul in the html
      topNews.articles.forEach(content => {
         const spanNode = document.createElement("li"); // make fresh <li>
         spanNode.innerHTML =                            // news contents
-        `<img src="${content.urlToImage}" alt="news image">
+        `<a href="${content.url}">
+        <img src="${content.urlToImage}" alt="news image">
+        <h3>${content.source.name}</h3>
         <h2>${content.title}</h2>
-        <p>${content.description}</p>`;
+        <p>${content.description}</p></a>`;
         parentNode.appendChild(spanNode);           // pushing to the <ul>
     });
 }
@@ -63,7 +65,7 @@ const inputInfo = document.querySelector('.searchClass') //INPUT? NECESSARY????
         displayErrorToUser(`${error} ahhhh server problem`);
     });
 }
- getData('https://newsapi.org/v2/top-headlines?country=gb&apiKey=534d9b30f7bd4185b60cba8d406e11ec') 
+ getData('https://newsapi.org/v2/top-headlines?country=gb&pageSize=100&apiKey=534d9b30f7bd4185b60cba8d406e11ec') 
 
 
 
@@ -79,9 +81,15 @@ function displayDataOnHead(topNews){
     topNews.articles.forEach(content => {
         const spanNode2 = document.createElement("li"); // make fresh <li>
         spanNode2.innerHTML =                            // news contents
-        `<img src="${content.urlToImage}" alt="news image">
-        <h2>${content.title}</h2>`;
+        `<a href="${content.url}">
+        <img src="${content.urlToImage}" alt="news image">
+        <h2>${content.title}</h2></a>`;
     
+
+        
+
+
+
         parentNode2.appendChild(spanNode2);           // pushing to the <ul>
     });
 }
diff --git a/style.css b/style.css
index 23723b1..80ddbae 100644
--- a/style.css
+++ b/style.css
@@ -10,10 +10,10 @@ body{
   flex-direction: column;
   justify-content: center;
   font-family: 'Encode Sans', sans-serif;
-  background: white;
+  background: antiquewhite;
   color:black;
   max-width: 1500px;
-  margin: 0;
+  margin-left: 0;
   
 
     }
@@ -23,12 +23,34 @@ ul{
   
  }
 
+a{
+  text-decoration: none;
+  color: black;
+}
+
+img:hover {
+  background-color:#000;
+    opacity:0.8;
+}
+
+a:active {
+  color: black;
+}
+
+a:visited {
+  color: black;
+}
+
 
 
 h1 {
-  font-size: 30px;
   display: flex;
-  justify-content: center;
+  flex:1;
+  justify-content: flex-start;
+  font-size: 30px;
+  margin-left: 4.5vw;
+
+  
   
 }
 
@@ -36,16 +58,53 @@ h1 {
   display: flex;
   justify-content: center;
   flex-direction: row;
-
+  align-items: center;
 }
 
 .searchClass{
 
   display: flex;
   flex:1;
-  justify-content: center;
+  justify-content: flex-end;
+  margin-right: 3vw;
 }
 
+
+.searchB{
+  display: flex;
+  flex:1;
+  justify-content: flex-end;
+
+  /* display: inline-block; */
+    border: none;
+   padding-top: 0.5em;
+   padding-bottom: 0.5em;
+    margin: 0;
+    text-decoration: none;
+    background: black;
+    color: #ffffff;
+    font-family: sans-serif;
+    font-size: 1rem;
+    cursor: pointer;
+    text-align: center;
+    transition: background 250ms ease-in-out, 
+                transform 150ms ease;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+.searchB:hover {
+  background: antiquewhite;
+  background-image: antiquewhite;
+  background-image: antiquewhite;
+  background-image: antiquewhite;
+  background-image: antiquewhite;
+  color:black;
+  font:bold;
+  text-decoration: none;
+}
+
+
 .infoG{
     display:none;
 }
@@ -56,7 +115,7 @@ h1 {
     display:flex;
     flex: 1;
     position: relative; 
-    margin-right: 7vw;
+    
     
     
     
@@ -68,17 +127,21 @@ h1 {
    /* width: 93.5%; */
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
-   padding: 2vw;
+   padding-top: 2vw;
+   padding-left: 2vw;
    color: white; 
    max-width: 1000px;
+   margin-right: 7vw;
+   width: 90vw;
+   
   }
 
   #headline img{
-  width:100%;
+  
   max-width: 1000px;
   max-height: 500px;
-  /* object-fit: cover; */
-  /* position: relative; */
+  margin-right: 7vw;
+  width: 90vw;
   
   }
 
@@ -86,9 +149,13 @@ h1 {
   .buttons{
     display:flex;
     flex: 1;
-    justify-content: space-around;
-    margin-left: 20px;
-    margin-right: 20px;
+    justify-content: space-between;
+    /* margin-left: 20px; */
+    /* margin-right: 20px; */
+    font-size: 5px;
+    background: black;
+    width: 100%;
+   
 
   }
 
@@ -96,10 +163,11 @@ h1 {
   .all-button{
     display: inline-block;
       border: none;
-      padding: 1rem 2rem;
+     padding-top: 0.5em;
+     padding-bottom: 0.5em;
       margin: 0;
       text-decoration: none;
-      background: #0069ed;
+      background: black;
       color: #ffffff;
       font-family: sans-serif;
       font-size: 1rem;
@@ -112,12 +180,13 @@ h1 {
   }
   
   .all-button:hover {
-    background: #2079b0;
-    background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
-    background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);
-    background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
-    background-image: -o-linear-gradient(top, #2079b0, #eb94d0);
-    background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
+    background: antiquewhite;
+    background-image: antiquewhite;
+    background-image: antiquewhite;
+    background-image: antiquewhite;
+    background-image: antiquewhite;
+    color:black;
+    font:bold;
     text-decoration: none;
   }
   
@@ -141,16 +210,18 @@ h1 {
   flex-direction: column;
   justify-content: center;
   margin-right: 7vw;
+  
 
 }
 
 #newz h2 {
-background-color: antiquewhite;
-top: 0;
-position: float;  
-}
 
+margin: 0; 
+}
 
+#newz li {
+background-color: antiquewhite;
+}
 
 #newz img {
 
@@ -163,7 +234,12 @@ position: float;
   box-shadow: -34px 53px 196px -30px rgba(0,0,0,0.49); */
 }
 
-
+#newz h3 {
+font-size: 15px;
+margin:0;
+padding-bottom: 10px;
+padding-top:5px; 
+}
 
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
@@ -187,6 +263,11 @@ position: float;
     
     }
 
+    #headline h2{
+      width:90vw;
+
+    }
+
   /* #newz {
   width: 400px;
     
@@ -213,8 +294,9 @@ position: float;
   flex-grow: 1;
   width:300px;
   
-  margin: 0.2vw;
-  padding: 2vw;
+  /* margin: 0.2vw; */
+  padding-right: 1vw;
+  padding-left:1vw;
   
   
 }
@@ -227,10 +309,9 @@ position: float;
 
 
 .buttons{
-  margin-left: 30px;
-  margin-right: 50px;
+  justify-content: space-around;
+  margin:0;
   
-   
 
 }
 
@@ -243,7 +324,31 @@ position: float;
 /* Large devices (desktops, 960px and up) */
 @media (min-width: 960px) {
 
+
+  
   .heading {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    align-items: center;
+  }
+  
+  .searchClass{
+  
+    display: flex;
+    flex:1;
+    justify-content: flex-end;
+    margin-right: 3vw;
+  }
+  
+  
+  .searchB{
+    display: flex;
+    flex:1;
+    justify-content: flex-end;
+
+
+  /* .heading {
     display:flex;
     flex-direction: row;
     justify-content: space-between;
@@ -259,7 +364,7 @@ position: float;
   
   .searchClass {
     background-color: yellow;
-  }
+  } */
 
 
 }
@@ -268,7 +373,6 @@ position: float;
 @media (min-width: 1200px) {
 
 
-
   .hero {
   display:flex;
   flex-direction: row;

From 09ac27a15ab8202f965646556fb33cf17929b532 Mon Sep 17 00:00:00 2001
From: chrisphillers <chrisphillers@gmail.com>
Date: Mon, 17 Sep 2018 00:28:17 +0100
Subject: [PATCH 6/7] style and infographic function building

---
 index.html |  2 +-
 news.js    | 57 ++++++++++++++++++++++++++++++++++++++++++++----------
 style.css  | 48 ++++++++++++++++++++++++++++++++-------------
 3 files changed, 83 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index 4222295..2534716 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
 </head>
 <body>
     <header class="heading">
-        <h1>End Of Days</h1>
+        <h1>THE END IS NIGH</h1>
         <form>
 <input class="searchClass" type="search" results=5 placeholder="Search me">
 <button class="searchB">Search</button>
diff --git a/news.js b/news.js
index 92b8985..49fc78b 100644
--- a/news.js
+++ b/news.js
@@ -3,8 +3,9 @@ function displayErrorToUser(message){
 }
       
 const parentNode = document.getElementById("newz"); // find the <ul in the html file
+
  // Main News div insertion
- function displayDataOnPage(topNews){
+ function displayDataOnPage(topNews, counter){
   //  console.log(topNews);
      topNews.articles.forEach(content => {
         const spanNode = document.createElement("li"); // make fresh <li>
@@ -16,7 +17,7 @@ const parentNode = document.getElementById("newz"); // find the <ul in the html
         <p>${content.description}</p></a>`;
         parentNode.appendChild(spanNode);           // pushing to the <ul>
     });
-}
+    }   
  // Buttons event listener/value to fetch
  const buttonSelector = document.querySelector('.buttons');
 buttonSelector.addEventListener("click", function(event){
@@ -32,7 +33,7 @@ buttonSelector.addEventListener("click", function(event){
     getData(url);
 });
 
- //search event listener
+ //search event listener - BROKEN
  const searchFunc = document.querySelector('.searchClass');
 const inputInfo = document.querySelector('.searchClass') //INPUT? NECESSARY????
  searchFunc.addEventListener("click", function(event){ //COMBINE SEARCH AND INPUT??
@@ -42,8 +43,6 @@ const inputInfo = document.querySelector('.searchClass') //INPUT? NECESSARY????
     getData(url);
 })
 
-
-
  //button function
  function fetchingButtons(url, selector) { //button fetch addresses
     const buttonall = document.querySelector(selector);
@@ -85,11 +84,6 @@ function displayDataOnHead(topNews){
         <img src="${content.urlToImage}" alt="news image">
         <h2>${content.title}</h2></a>`;
     
-
-        
-
-
-
         parentNode2.appendChild(spanNode2);           // pushing to the <ul>
     });
 }
@@ -112,3 +106,46 @@ function getDataH(urlH){
 
 getDataH('https://newsapi.org/v2/everything?q=bitcoin&pageSize=1&from=2018-08-16&sortBy=publishedAt&apiKey=534d9b30f7bd4185b60cba8d406e11ec')
 
+
+
+
+
+
+
+
+// // Infographic
+const parentNode3 = document.getElementById("#graphic"); // find the <ul in the html file
+
+function displayDataOnInfo(newsSource){
+newsSource.articles.forEach(content => {
+    const spanNode3 = document.createElement("li");
+    spanNode3.attribute 
+    
+
+
+    parentNode3.appendChild(spanNode3);      
+
+});
+}
+
+
+
+
+
+function getDataI(urlI){
+    // main news body fetch - button changeable
+    fetch(urlI) // by default fetch makes a GET request
+    .then(function(response) {
+        
+        return response.json();
+    })
+    .then(function(body){
+      //  parentNode.innerHTML = "";
+        displayDataOnInfo(body);
+    })
+    .catch(function(error) {
+        displayErrorToUser3(`${error} ahhhh server problem`);
+    });
+}
+
+getDataI('https://newsapi.org/v2/everything?q=bitcoin&pageSize=1&from=2018-08-16&sortBy=publishedAt&apiKey=534d9b30f7bd4185b60cba8d406e11ec')
\ No newline at end of file
diff --git a/style.css b/style.css
index 80ddbae..3f00a61 100644
--- a/style.css
+++ b/style.css
@@ -47,7 +47,7 @@ h1 {
   display: flex;
   flex:1;
   justify-content: flex-start;
-  font-size: 30px;
+  font-size: 40px;
   margin-left: 4.5vw;
 
   
@@ -59,6 +59,7 @@ h1 {
   justify-content: center;
   flex-direction: row;
   align-items: center;
+  
 }
 
 .searchClass{
@@ -104,6 +105,20 @@ h1 {
   text-decoration: none;
 }
 
+.searchClass input#search{
+  width: 300px;
+  height: 50px;
+  background: #2b303b;
+  border: none;
+  font-size: 10pt;
+  float: left;
+  color: #63717f;
+  padding-left: 45px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+
 
 .infoG{
     display:none;
@@ -115,9 +130,7 @@ h1 {
     display:flex;
     flex: 1;
     position: relative; 
-    
-    
-    
+    margin-left: 1vw;
     
   }
 
@@ -134,14 +147,17 @@ h1 {
    margin-right: 7vw;
    width: 90vw;
    
+   
   }
 
   #headline img{
   
-  max-width: 1000px;
+  max-width: 1200px;
   max-height: 500px;
   margin-right: 7vw;
   width: 90vw;
+  background-image: url("https://chrisphillers.000webhostapp.com/placeholder1.jpg");
+
   
   }
 
@@ -324,13 +340,14 @@ padding-top:5px;
 /* Large devices (desktops, 960px and up) */
 @media (min-width: 960px) {
 
-
+ 
   
   .heading {
     display: flex;
+    flex:1;
     justify-content: center;
     flex-direction: row;
-    align-items: center;
+    align-items: baseline;
   }
   
   .searchClass{
@@ -338,6 +355,7 @@ padding-top:5px;
     display: flex;
     flex:1;
     justify-content: flex-end;
+    flex-direction: row;
     margin-right: 3vw;
   }
   
@@ -346,6 +364,7 @@ padding-top:5px;
     display: flex;
     flex:1;
     justify-content: flex-end;
+    flex-direction: row;
 
 
   /* .heading {
@@ -382,7 +401,7 @@ padding-top:5px;
 #headline {
   display:flex;
   flex: 1;
-  /* flex-basis: 70%; */
+  flex-basis: 70%;  
 } 
 
 #headline h2 {
@@ -419,6 +438,7 @@ padding-top:5px;
   flex-basis: 30%;
   justify-content: flex-start;
   flex-direction: column;
+  justify-content: space-around;
   
     
 }
@@ -431,8 +451,9 @@ padding-top:5px;
  .graphic {
     display:flex;
     flex: 1;
-    justify-content: flex-start;
+    
     flex-direction: column;
+    justify-content: space-around;
     
 
     /* border-left-width: 30px;
@@ -448,13 +469,14 @@ padding-top:5px;
   .graphic ul {
     display:flex;
     flex: 1;
-  
+    justify-content: space-around;
+    
     
   } 
 
   #one {
     display:flex;
-   
+    flex-grow: 1;
    
     height: 10px;
     background-color: red;
@@ -466,7 +488,7 @@ padding-top:5px;
   
   #two{
     display:flex;
-    
+    flex-grow: 1;
    
     height: 10px;
     background-color: yellow;
@@ -477,7 +499,7 @@ padding-top:5px;
 
   #three {
     display:flex;
-   
+    flex-grow: 1;
     
     height: 10px;
     background-color: red;

From 68b104071a36ce826010803f46ffc42fbbc63147 Mon Sep 17 00:00:00 2001
From: Chris P <frankenwin@Chris-MacBook-Pro.local>
Date: Mon, 17 Sep 2018 15:01:05 +0100
Subject: [PATCH 7/7] Styling and search function fixed

---
 index.html | 10 +++++-----
 news.js    | 17 ++++++++++-------
 style.css  | 21 ++++++++++++++++++++-
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 2534716..663a8ba 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
 <body>
     <header class="heading">
         <h1>THE END IS NIGH</h1>
-        <form>
+        <form class='form__search'>
 <input class="searchClass" type="search" results=5 placeholder="Search me">
 <button class="searchB">Search</button>
             </form>
@@ -32,11 +32,11 @@ <h1>THE END IS NIGH</h1>
 
 <div class="buttons">
 <button value="all-button" class="all-button">All News</button>
-<button value="plague" class="all-button">The Plague</button>
-<button value="blood" class="all-button">Blood</button>
+<button value="plague" class="all-button">Plague</button>
+<button value="bitcoin" class="all-button">Bitcoin</button>
 <button value="locusts" class="all-button">Locusts</button>
-<button value="trump" class="all-button">Pig</button>
-<button value="nuclear" class="all-button">Nuclear</button>
+<button value="trump" class="all-button">Piggy</button>
+<button value="brexit" class="all-button">Brexit</button>
 </div>
 
 
diff --git a/news.js b/news.js
index 49fc78b..cc56215 100644
--- a/news.js
+++ b/news.js
@@ -34,14 +34,17 @@ buttonSelector.addEventListener("click", function(event){
 });
 
  //search event listener - BROKEN
- const searchFunc = document.querySelector('.searchClass');
-const inputInfo = document.querySelector('.searchClass') //INPUT? NECESSARY????
- searchFunc.addEventListener("click", function(event){ //COMBINE SEARCH AND INPUT??
+ const searchFunc = document.querySelector('.form__search');
+ searchFunc.addEventListener("submit", function(event){ //COMBINE SEARCH AND INPUT??
     event.preventDefault();
+    console.log(event.target['0'].value); // get the first item in teh form element.
     //WHAT IS VALUE??? GOOGLE IT
-    let url = `https://newsapi.org/v2/everything?q=${event.target.value}&apiKey=534d9b30f7bd4185b60cba8d406e11ec`
+    let url = `https://newsapi.org/v2/everything?q=${event.target['0'].value}&apiKey=534d9b30f7bd4185b60cba8d406e11ec`
     getData(url);
-})
+});
+
+
+
 
  //button function
  function fetchingButtons(url, selector) { //button fetch addresses
@@ -104,7 +107,7 @@ function getDataH(urlH){
     });
 }
 
-getDataH('https://newsapi.org/v2/everything?q=bitcoin&pageSize=1&from=2018-08-16&sortBy=publishedAt&apiKey=534d9b30f7bd4185b60cba8d406e11ec')
+getDataH('https://newsapi.org/v2/top-headlines?sources=bbc-news&pagesize=1&apiKey=676d93104a84419493a5f6fa8fbdb6ed')
 
 
 
@@ -113,7 +116,7 @@ getDataH('https://newsapi.org/v2/everything?q=bitcoin&pageSize=1&from=2018-08-16
 
 
 
-// // Infographic
+// // Infographic FUNCTION/FETCH
 const parentNode3 = document.getElementById("#graphic"); // find the <ul in the html file
 
 function displayDataOnInfo(newsSource){
diff --git a/style.css b/style.css
index 3f00a61..ca6b97e 100644
--- a/style.css
+++ b/style.css
@@ -20,6 +20,8 @@ body{
 
 ul{ 
   list-style-type: none;
+  padding-left:4vw;
+  
   
  }
 
@@ -49,6 +51,7 @@ h1 {
   justify-content: flex-start;
   font-size: 40px;
   margin-left: 4.5vw;
+  color:antiquewhite;
 
   
   
@@ -59,6 +62,7 @@ h1 {
   justify-content: center;
   flex-direction: row;
   align-items: center;
+  background-color:black;
   
 }
 
@@ -142,6 +146,7 @@ h1 {
    background: rgba(0, 0, 0, 0.7);
    padding-top: 2vw;
    padding-left: 2vw;
+   padding-bottom:2vw;
    color: white; 
    max-width: 1000px;
    margin-right: 7vw;
@@ -318,7 +323,8 @@ padding-top:5px;
 }
 #newz img {
  
-  height: 15vw;
+  height: 200px;
+  width: 300px;
   background-color:lightblue;
   
 }
@@ -366,6 +372,19 @@ padding-top:5px;
     justify-content: flex-end;
     flex-direction: row;
 
+  }
+    #newz img {
+ 
+      height: 200px;
+      width: 300px;
+      
+      
+    }
+
+    #newz li {
+      
+      width:300px;
+    }
 
   /* .heading {
     display:flex;
