hackyourfuturecanada · azizomarck · Oct 27, 2019 · Oct 27, 2019 · Oct 27, 2019 · Oct 27, 2019
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,121 @@
+body {
+  background: #f0f0f0;
+  padding: 0px;
+  margin: 0px;
+}
+
+form {
+  display: flex;
+  width: 40%;
+  margin: auto;
+  flex-direction: column;
+  background: gray;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+  display: none;
+  border-radius: 10px;
+}
+
+form>input {
+  padding: 10px;
+  border: unset;
+  border-bottom: 2px solid burlywood;
+  border-radius: 40px;
+  text-align: center;
+  width: 80%;
+}
+
+form>button {
+  margin: 10px;
+  background: #5f5fe9;
+  border: unset;
+  color: white;
+  padding: 10px;
+  width: 40%;
+}
+
+form>button:hover {
+  background: #c5c5ff;
+}
+
+
+input:focus,
+button:focus {
+  outline: none;
+}
+
+form>h3 {
+  color: #f6e1bb;
+  ;
+}
+
+header {
+  background: #fde09f;
+  padding: 20px;
+  text-align: center;
+  font-size: 2em;
+}
+
+p {
+  display: flex;
+  padding: 10px;
+  width: 80%;
+  height: 113px;
+  margin: auto;
+  background: palegoldenrod;
+  border-radius: 5px;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 20px;
+
+
+}
+
+p>span {
+  color: gray;
+  margin: 1px;
+  width: 50%;
+}
+
+#row-desc {
+  color: white;
+  height: 40px;
+  background: #cdcccc;
+}
+
+#row-desc>span {
+  color: black;
+}
+
+.fa fa-heart {
+  font-size: 36px;
+}
+
+h1 {
+  text-align: center;
+}
+
+.fav {
+  text-align: right;
+  margin-right: 10px;
+}
+
+#log {
+  font-size: 15px;
+}
+
+#log:hover {
+  color: white;
+}
+
+#displayFav {
+  background-color: #a47860;
+  color: white;
+  padding: 9px;
+  font-size: 13px;
+  border: none;
+  border-radius: 10px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<html>
+
+<head>
+  <script src="js/main.js" defer ></script>
+  <link rel="stylesheet" href="css/main.css">
+  <title>News List</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+
+<body>
+  <header><span id="name">Anonymous</span>
+    <!-- Font Awsome Icon -->
+    <i class="fa fa-user-circle" style="font-size:36px"></i>
+    <span id="log">Don't have an account? sign up ! </span>
+  </header>
+
+  <form>
+    <h3>Create an Account</h3>
+    <input type="text" name="userName" placeholder="Enter Your Name">
+    <button id="createAccount">Create a user</button>
+  </form>
+
+  <h1>News</h1>
+  <main id="articles">
+    <p id="row-desc"> <span>Author</span> <span>Title</span> <button id="displayFav">Show Liked Articles</button> </p>
+  </main>
+
+
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,149 @@
+// store all articles 
+let articles = [];
+let user;
+
+
+//make a XMLHttpReqeust and return a promise 
+function makeRequest(method, url) {
+  return new Promise(function (resolve, reject) {
+    var xhr = new XMLHttpRequest();
+    xhr.open(method, url);
+    xhr.onload = function () {
+      if (this.status >= 200 && this.status < 300) {
+        resolve(xhr.response);
+      } else {
+        reject({
+          status: this.status,
+          statusText: xhr.statusText
+        });
+      }
+    };
+
+    xhr.onerror = function () {
+      reject({
+        status: this.status,
+        statusText: xhr.statusText
+      });
+
+    };
+    xhr.send();
+  });
+}
+
+// get articles and display 5 of them
+async function getArticles() {
+  try {
+    let data = await makeRequest("GET", "https://newsapi.org/v2/everything?q=bitcoin&from=2019-10-13&sortBy=publishedAt&apiKey=0c5aa5107409412a82f137ff8148d6eb");
+    data = JSON.parse(data);
+    // display 5 articles in doc 
+    for (let i = 0; i < 5; i++) {
+      document.getElementById("articles").innerHTML += `<p> 
+        <span>${data.articles[i].author} </span>
+        <span>${data.articles[i].title} </span> 
+        <span class="fav"> <i id=${i} class="fa fa-heart" > </i></span> 
+        </p>`;
+
+      //add the articles to the array  
+      articles.push(data.articles[i]);
+    }
+
+
+  } catch (err) {
+    console.log(err.message());
+  }
+
+}
+
+// get articles display them in the page and then modify the document to add 'favourite symbol' and 'show favourite articles' button
+async function addFavButtons() {
+  await getArticles();
+  favIcon();
+  displayFav();
+
+}
+
+addFavButtons();
+
+
+
+//functionalize favourtie icon, when clicked get its ID and push it to user bookmarks
+function favIcon() {
+  for (let i = 1; i < 6; i++) {
+    document.getElementsByClassName("fa")[i].addEventListener("click", function (e) {
+      this.style.color = "black";
+      // parse the ID of the articl
+      indexOfArticles = parseInt(this.id);
+      if(trackBookMarks() > 3){
+        alert("oops, You can not have more than 3 articles bookmarked ")
+      }
+      if (user && user.bookMarks.length < 4) {
+        this.style.color = "red";
+        // if item does not exist push it
+        if (user.bookMarks.indexOf(indexOfArticles) == -1)
+          user.bookMarks.push(indexOfArticles);
+      }
+    });
+  }
+}
+
+
+
+// display the hidden form to sign up on clik
+document.getElementById("log").addEventListener("click", function () {
+  document.querySelector("form").style.display = "flex";
+});
+
+
+// button to create an account 
+document.getElementById("createAccount").addEventListener("click", function (e) {
+  e.preventDefault();
+  user = new User();
+  userName = document.getElementsByName("userName")[0].value;
+    trackBookMarks=counter(0);
+  if (userName.length > 0) {
+    user.name = userName;
+    user.bookMarks = [];
+    document.getElementById("name").innerHTML = userName;
+    document.forms[0].style.display = "none";
+  }
+});
+
+
+
+class User {
+  constructor(name, bookMarks) {
+    this.name = name;
+    this.bookMarks = bookMarks;
+  }
+
+}
+
+// add function to the button when clicked,display favourite articles 
+function displayFav() {
+  document.getElementById("displayFav").addEventListener("click", function () {
+    if (user != null && user.bookMarks.length > 0) {
+      user.bookMarks.sort();
+      document.getElementById("articles").innerHTML = "";
+      for (let i = 0; i < 3; i++) {
+        if (user.bookMarks.indexOf(i) > -1) {
+          document.getElementById("articles").innerHTML += `<p> <span>${articles[i].author}</span>  <span>${articles[i].title} </span> </p>`;
+        }
+
+      }
+    }
+  });
+}
+
+
+
+let trackBookMarks=null;
+let counter = function (x) {
+  if (x == undefined) {
+    i = 0;
+  } else { i = x; }
+
+  return function () {
+    i++;
+    return i;
+  }
+};