Joe's New Challenge

.gitignore

@@ -0,0 +1 @@
+nodu_modules

README.md

@@ -1,3 +1,9 @@
+# SETUP
+- clone repo
+- npm install
+- npm install -g esbuild
+- npm run build
+
 # News challenge
 
 * Feel free to use Google, your notes, books, etc. but work on your own.

bundle.js

@@ -0,0 +1,138 @@
+(() => {
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __commonJS = (cb, mod) => function __require() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+
+  // src/ArticlesModel.js
+  var require_ArticlesModel = __commonJS({
+    "src/ArticlesModel.js"(exports, module) {
+      var ArticlesModel2 = class {
+        constructor() {
+          this.articles = [];
+        }
+        getArticles() {
+          return this.articles;
+        }
+        addArticle(article) {
+          article.forEach((a) => {
+            this.articles.push(a);
+          });
+        }
+        reset() {
+          this.articles = [];
+        }
+      };
+      module.exports = ArticlesModel2;
+    }
+  });
+
+  // src/ArticlesView.js
+  var require_ArticlesView = __commonJS({
+    "src/ArticlesView.js"(exports, module) {
+      var ArticlesView2 = class {
+        constructor(model2, api) {
+          this.model = model2;
+          this.api = api;
+          this.articlesFromModel = this.model.getArticles();
+          this.newsFeed = document.querySelector("#news-feed");
+          this.clearFeedBtn = document.querySelector("#clear-feed-button");
+          this.refreshBtn = document.querySelector("#refresh-button");
+          this.searchInput = document.querySelector("#search-input");
+          this.allHeadlines = [document.querySelectorAll("h1")];
+          this.clearFeedBtn.addEventListener("click", () => {
+            this.clearFeed();
+          });
+          this.searchInput.addEventListener("input", (e) => {
+            const searchInput = e.target.value.toLowerCase();
+            const filteredArticles = this.articlesFromModel.filter((article) => {
+              return article.webTitle.toLowerCase().includes(searchInput);
+            });
+            this.clearFeed();
+            this.displayArticles(filteredArticles);
+          });
+        }
+        displayArticlesFromApi() {
+          this.api.loadArticles(
+            (repoData) => {
+              this.model.addArticle(repoData.response.results);
+              this.displayArticles(this.articlesFromModel);
+            },
+            () => {
+              this.displayError();
+            }
+          );
+        }
+        displayArticles(articles) {
+          articles.forEach((article) => {
+            this.addImage(article);
+            this.addHeadline(article);
+          });
+        }
+        addHeadline(article) {
+          const h1 = document.createElement("h1");
+          h1.className = "news-title";
+          h1.innerText = article.webTitle;
+          h1.onclick = () => {
+            window.location.href = article.webUrl;
+          };
+          this.newsFeed.append(h1);
+        }
+        addImage(article) {
+          const img = document.createElement("img");
+          img.className = "news-image";
+          img.setAttribute("id", article.id);
+          img.src = article.fields.thumbnail;
+          img.onclick = () => {
+            window.location.href = article.webUrl;
+          };
+          this.newsFeed.append(img);
+        }
+        displayError() {
+          let errorMessage = document.createElement("div");
+          errorMessage.className = "error";
+          errorMessage.textContent = "Oops, something went wrong!";
+          this.newFeed.append(errorMessage);
+        }
+        clearFeed() {
+          const images = document.querySelectorAll("img.news-image");
+          images.forEach((element) => {
+            element.remove();
+          });
+          const headlines = document.querySelectorAll("h1.news-title");
+          headlines.forEach((element) => {
+            element.remove();
+          });
+        }
+      };
+      module.exports = ArticlesView2;
+    }
+  });
+
+  // src/GuardianApi.js
+  var require_GuardianApi = __commonJS({
+    "src/GuardianApi.js"(exports, module) {
+      var GuardianApi2 = class {
+        constructor() {
+          this.apiURL = `https://content.guardianapis.com/search?api-key=55e5d388-8b9e-477c-b420-c20a69c2be80&show-fields=thumbnail`;
+        }
+        loadArticles(callback) {
+          fetch(this.apiURL).then((response) => response.json()).then((data) => {
+            callback(data);
+          });
+        }
+      };
+      module.exports = GuardianApi2;
+    }
+  });
+
+  // index.js
+  console.log("the app is running");
+  var ArticlesModel = require_ArticlesModel();
+  var ArticlesView = require_ArticlesView();
+  var GuardianApi = require_GuardianApi();
+  var client = new GuardianApi();
+  var model = new ArticlesModel();
+  var view = new ArticlesView(model, client);
+  view.displayArticlesFromApi();
+})();

index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+   <head>
+    <link rel="stylesheet" href="style.css">
+      <title> Your Daily News Feed</title>
+   </head>
+   <body>
+      <h1>News Feed</h1>
+
+        <input type="search" id="search-input" placeholder="e.g. Football...">
+
+      <br><br>
+      <button onClick="window.location.reload();">Refresh Page</button> <button id="clear-feed-button">Clear Feed</button>
+
+      <br> <br>
+
+      <div id="news-feed">
+
+      </div>
+   </body>
+   <script src="bundle.js"></script>
+
+</html>
+<!-- 
+<ul id="myUL">
+  <li><a href="#">Adele</a></li>
+  <li><a href="#">Agnes</a></li>
+
+  <li><a href="#">Billy</a></li>
+  <li><a href="#">Bob</a></li>
+
+  <li><a href="#">Calvin</a></li>
+  <li><a href="#">Christina</a></li>
+  <li><a href="#">Cindy</a></li>
+</ul>
+
+<script>
+function myFunction() {
+    var input, filter, ul, li, a, i, txtValue;
+    input = document.getElementById("myInput");
+    filter = input.value.toUpperCase();
+    ul = document.getElementById("myUL");
+    li = ul.getElementsByTagName("li");
+    for (i = 0; i < li.length; i++) {
+        a = li[i].getElementsByTagName("a")[0];
+        txtValue = a.textContent || a.innerText;
+        if (txtValue.toUpperCase().indexOf(filter) > -1) {
+            li[i].style.display = "";
+        } else {
+            li[i].style.display = "none";
+        }
+    }
+} -->

index.js

@@ -0,0 +1,11 @@
+console.log("the app is running");
+const ArticlesModel = require("./src/ArticlesModel.js");
+const ArticlesView = require("./src/ArticlesView.js");
+const GuardianApi = require("./src/GuardianApi.js");
+
+const client = new GuardianApi();
+const model = new ArticlesModel();
+const view = new ArticlesView(model, client);
+
+view.displayArticlesFromApi();
+// client.searchArticles();