constructorlabs · chrisphillers · Sep 16, 2018 · Sep 16, 2018 · Sep 16, 2018 · Sep 16, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,52 @@
+<!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>
+    <link href="https://fonts.googleapis.com/css?family=Encode+Sans:300,400,700" rel="stylesheet">
+</head>
+<body>
+    <header class="heading">
+        <h1>THE END IS NIGH</h1>
+        <form class='form__search'>
+<input class="searchClass" type="search" results=5 placeholder="Search me">
+<button class="searchB">Search</button>
+            </form>
+        </header>
+
+
+<div class="hero">
+    <ul id="headline">  
+    </ul>
+    <div class="infoG">
+            <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="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">Piggy</button>
+<button value="brexit" class="all-button">Brexit</button>
+</div>
+
+
+<ul id="newz">
+
+</ul>
+
+<!-- <button class="pag-button"></button> -->
+
+
+    <script src="news.js"></script>
+</body>
+</html>
diff --git a/news.js b/news.js
@@ -0,0 +1,154 @@
+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, counter){
+  //  console.log(topNews);
+     topNews.articles.forEach(content => {
+        const spanNode = document.createElement("li"); // make fresh <li>
+        spanNode.innerHTML =                            // news contents
+        `<a href="${content.url}">
+        <img src="${content.urlToImage}" alt="news image">
+        <h3>${content.source.name}</h3>
+        <h2>${content.title}</h2>
+        <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){
+    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 - BROKEN
+ 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['0'].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&pageSize=100&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
+        `<a href="${content.url}">
+        <img src="${content.urlToImage}" alt="news image">
+        <h2>${content.title}</h2></a>`;
+
+        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/top-headlines?sources=bbc-news&pagesize=1&apiKey=676d93104a84419493a5f6fa8fbdb6ed')
+
+
+
+
+
+
+
+
+// // Infographic FUNCTION/FETCH
+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')