constructorlabs · LemonyDesign · Sep 14, 2018 · Sep 15, 2018 · Sep 15, 2018 · Sep 15, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/bbc.png b/images/bbc.png
diff --git a/images/ft.png b/images/ft.png
diff --git a/images/mail.png b/images/mail.png
diff --git a/images/metro.png b/images/metro.png
diff --git a/images/mirror.png b/images/mirror.png
diff --git a/images/telegraph.png b/images/telegraph.png
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!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">
+    <title>News Sorter</title>
+    <link rel="stylesheet" href="styles/normalize.css">
+    <link rel="stylesheet" href="styles/styles.css">
+
+</head>
+<body>
+    <h1 class="main-title">Eye on the Tabloids</h1>
+
+    <div class="container">
+        <main>
+            <nav class="news--filter">
+                <label><input type="checkbox" name="mail" value="daily-mail"> Daily Mail</label>
+                <label><input type="checkbox" name="mirror" value="mirror"> Mirror</label>
+                <label><input type="checkbox" name="metro" value="metro"> Metro</label>
+            </nav>     
+            <section class="news--area">
+                <div class="news--area--feed"></div>
+            </section> 
+        </main>
+    </div>  
+    <footer class="site--footer"><p>News Feed from <a href="https://newsapi.org/">newsapi.org</a></p></footer>
+<script src="scripts/javascript.js"></script>
+</body>
+</html>
diff --git a/scripts/javascript-workings.js b/scripts/javascript-workings.js
@@ -0,0 +1,75 @@
+const parentNode = document.querySelector(".news--area--feed");
+
+// compile this Url = "https://newsapi.org/v2/top-headlines?sources=bbc-news,daily-mail,mirror,&apiKey=93238bcda39e4404852697d364b77971";
+const baseUrl = "https://newsapi.org/v2/top-headlines?apiKey=93238bcda39e4404852697d364b77971";
+
+
+const publicationList = {
+    "bbc-news": true,
+    "daily-mail": true,
+    "mirror": true
+}
+
+// create an array from object using key values
+let publicationArray = Object.keys(publicationList);
+
+
+//console.log(defaultArray);
+const sourceList = `&sources=${defaultArray}`;
+const fullURL = `${baseUrl}${sourceList}`;
+
+function displayDataOnPage(newsStories) {
+  const newsArray = newsStories.articles;
+  console.log(newsStories.articles);
+
+  // add news blocks (as articles)
+    newsArray.forEach(function(newsitem) {
+
+        const node = document.createElement("article");
+        node.innerHTML = `${newsitem.source.name} (source logo)
+        <b>${newsitem.title}:</b> ${newsitem.description}`;
+        parentNode.appendChild(node);
+
+    })  
+
+
+
+  // filter  
+    let checkboxArray = document.querySelectorAll(".news--filter input");
+    console.log(checkboxArray)
+
+    checkboxArray.forEach(function(input) {
+        input.addEventListener("change", event => {
+            console.log(event.target.value);
+
+            if (publicationList[event.target.value]) {
+                publicationList[event.target.value] = false
+                filteredArray.push(event.target.value);
+            }
+
+            console.log(filteredArray)
+
+        })
+    })
+
+
+}
+
+function displayErrorToUser() {}
+
+fetch(fullURL) // by default fetch makes a GET request
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(body) {
+    //console.log(body);
+    displayDataOnPage(body);
+  })
+  .catch(function(error) {
+    displayErrorToUser("Server failed to return data");
+
+    // need filter to NOT SHOW any news story with empty values
+    // if any value is empty do no show
+  });
+
+
diff --git a/scripts/javascript-workings2.js b/scripts/javascript-workings2.js
@@ -0,0 +1,128 @@
+const baseUrl = "https://newsapi.org/v2/top-headlines?apiKey=93238bcda39e4404852697d364b77971";
+const parentNode = document.querySelector(".news--area--feed");
+
+let checkboxArray = document.querySelectorAll(".news--filter input");
+let userOpted = false;
+/* 
+--------------
+FETCH FUNCTION
+--------------
+*/
+const goFetch = function(fullURL) {
+
+  fetch(fullURL) // by default fetch makes a GET request
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(body) {
+      displayDataOnPage(body);
+    })
+    .catch(function(error) {
+      displayErrorToUser("Server failed to return data");
+      // need filter to NOT SHOW any news story with empty values. if any value is empty do no show
+    });
+}
+
+/*
+--------------------
+DISPLAY DATA ON PAGE
+--------------------
+*/
+
+function displayDataOnPage(newsStories) {
+
+  const newsArray = newsStories.articles;
+  // console.log(newsStories.articles);
+  // add news blocks (as articles)
+    newsArray.forEach(function(newsitem) {
+
+        const node = document.createElement("article");
+        node.innerHTML = `<figure class="news--article-image"><img src="${newsitem.urlToImage}"></figure>
+        <section class="news--article-content">
+        <header class="${newsitem.source.name}"><h2>${newsitem.title}</h2></header>
+        <h3>${newsitem.description}</h3>
+        <p>${newsitem.content}</p>
+        <p><a href="${newsitem.url}" title="Visit news article: ${newsitem.title}">Read full article</a>
+        </section>`;
+        parentNode.appendChild(node);
+
+    })  
+}
+
+/*
+------------------
+GENERATE FETCH URL
+------------------
+*/
+
+// news sources object
+let publicationList = {
+  "daily-mail": false,
+  "mirror": false,
+  "metro": false,
+  "the-telegraph": false,
+  "financial-times": false,
+  "bbc-news": false,
+}
+
+const generateFetchURL = function (publicationList) {
+  // baseUrl and default
+  const defaultArray = ["bbc-news","daily-mail","mirror"];
+
+  // create an array from object using key values
+  let publicationArray = Object.keys(publicationList);
+  let filteredArray = publicationArray.filter(function(pub) {
+    return publicationList[pub] === true;
+  });
+
+  // compile fetch url
+  let defaultArrayUrl = `&sources=${defaultArray}`;
+  let filteredPublicationUrl = `&sources=${filteredArray}`;
+  let fullURL = "";
+
+  if (userOpted === true) {
+    // RETURN VALUES - fullURL
+    fullURL = `${baseUrl}${filteredPublicationUrl}`;
+  } else {
+    fullURL = `${baseUrl}${defaultArrayUrl}`;
+  }
+  goFetch(fullURL)
+}
+
+/*
+----------------------
+CREATE CHECKBOX FILTER
+----------------------
+*/
+const createCheckboxFilter = function() {
+  // Reset UserOpted to false
+  userOpted = false;
+  checkboxArray.forEach(function(input) {
+    input.addEventListener("change", function(event) {
+      // new assigned value to match object key
+      // assign object value if checked is true
+      if (event.target.checked === true) {
+        publicationList[event.target.value] = true;
+        userOpted = true;
+      }
+      else {
+        publicationList[event.target.value] = false;
+      }
+      console.log(publicationList)
+      generateFetchURL(publicationList);
+    })
+  })
+}
+/* this function to run generateFetchURL() */
+createCheckboxFilter();
+
+/*
+---------------------
+ERROR HANDLER - TO DO
+---------------------
+*/
+function displayErrorToUser() {}
+
+
+// Initial call to fetch data
+generateFetchURL(baseUrl);
diff --git a/scripts/javascript-workings3.js b/scripts/javascript-workings3.js
@@ -0,0 +1,123 @@
+const baseUrl = "https://newsapi.org/v2/top-headlines?apiKey=93238bcda39e4404852697d364b77971";
+const parentNode = document.querySelector(".news--area--feed");
+
+let checkboxArray = document.querySelector(".news--filter");
+let userOpted = false;
+/* 
+--------------
+FETCH FUNCTION
+--------------
+*/
+const goFetch = function(fullURL) {
+
+  fetch(fullURL) // by default fetch makes a GET request
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(body) {
+      displayDataOnPage(body);
+    })
+    .catch(function(error) {
+      displayErrorToUser("Server failed to return data");
+      // need filter to NOT SHOW any news story with empty values. if any value is empty do no show
+    });
+}
+
+/*
+--------------------
+DISPLAY DATA ON PAGE
+--------------------
+*/
+
+function displayDataOnPage(newsStories) {
+
+  const newsArray = newsStories.articles;
+  // console.log(newsStories.articles);
+  // add news blocks (as articles)
+    newsArray.forEach(function(newsitem) {
+
+        const node = document.createElement("article");
+        node.innerHTML = `<figure class="news--article-image"><img src="${newsitem.urlToImage}"></figure>
+        <section class="news--article-content">
+        <header class="${newsitem.source.name}"><h2>${newsitem.title}</h2></header>
+        <h3>${newsitem.description}</h3>
+        <p>${newsitem.content}</p>
+        <p><a href="${newsitem.url}" title="Visit news article: ${newsitem.title}">Read full article</a>
+        </section>`;
+        parentNode.appendChild(node);
+
+    })  
+}
+
+/*
+------------------
+GENERATE FETCH URL
+------------------
+*/
+
+// news sources object
+let publicationList = {
+  "daily-mail": false,
+  "mirror": false,
+  "metro": false,
+  "the-telegraph": false,
+  "financial-times": false,
+  "bbc-news": false,
+}
+
+const generateFetchURL = function (publicationList) {
+  // baseUrl and default
+  const defaultArray = ["bbc-news","daily-mail","mirror"];
+
+  // create an array from object using key values
+  let publicationArray = Object.keys(publicationList);
+  let filteredArray = publicationArray.filter(function(pub) {
+    return publicationList[pub] === true;
+  });
+
+  // compile fetch url
+  let defaultArrayUrl = `&sources=${defaultArray}`;
+  let filteredPublicationUrl = `&sources=${filteredArray}`;
+  let fullURL = "";
+
+  if (userOpted === true) {
+    // RETURN VALUES - fullURL
+    fullURL = `${baseUrl}${filteredPublicationUrl}`;
+  } else {
+    fullURL = `${baseUrl}${defaultArrayUrl}`;
+  }
+  goFetch(fullURL)
+}
+
+/*
+----------------------
+CREATE CHECKBOX FILTER
+----------------------
+*/
+
+// Attach change event on checkboxes.
+checkboxArray.addEventListener("change", function(event) {
+
+  // new assigned value to match object key
+  // assign object value if checked is true
+  if (event.target.checked === true) {
+    publicationList[event.target.value] = true;
+  } else {
+    publicationList[event.target.value] = false;
+  }
+
+  // Verify if any of the options are being selected.
+  userOpted = Object.values(publicationList).reduce(function (val1, val2) { return val1 || val2 })
+  generateFetchURL(publicationList)
+})
+
+/*
+---------------------
+ERROR HANDLER - TO DO
+---------------------
+*/
+function displayErrorToUser() {}
+
+
+// Initial call to fetch data
+generateFetchURL(baseUrl);