hackyourfuturecanada · esyasar · Oct 29, 2019 · Oct 29, 2019 · Oct 29, 2019 · Oct 29, 2019
diff --git a/created.txt b/created.txt
@@ -0,0 +1 @@
+hello world
diff --git a/index.html b/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Hello!</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
+  </head>  
+  <body>
+         <form>
+        <div class="formBox">
+            <label for="title"> Username </label>
+            <input type="text" id="userInput" placeholder="type your username" required>
+        </div>
+
+        <div class="formBox">
+            <button id="btn"> Create User</button>
+        </div>
+        <div id="msg">
+            <pre></pre>
+        </div>
+    </form>
+
+    <h1> NEWS LIST</h1>
+    <div class="newsArticle">
+      <h2>
+        1.Article 
+      </h2>
+      <p class="art">
+    </p>
+      </div>
+      <button onclick="addBookmark()" class="bookmark">
+      bookmark
+      </button>
+
+    <div class="newsArticle">
+      <h2>
+        2.Article 
+      </h2>
+      <p class="art">
+    </p>
+      </div>
+      <button onclick="addBookmark()" class="bookmark">
+        bookmark
+      </button>
+
+    <div class="newsArticle">
+      <h2>
+        3.Article 
+      </h2>
+      <p class="art">
+      </p>
+    </div>
+      <button onclick="addBookmark()" class="bookmark">
+        bookmark
+      </button>
+
+    <div class="newsArticle">
+      <h2>
+        4.Article 
+      </h2>
+      <p class="art">
+      </p>
+    </div>
+      <button onclick="addBookmark()" class="bookmark">
+        bookmark
+      </button>
+
+    <div class="newsArticle">
+      <h2>
+        5.Article 
+      </h2>
+      <p class="art">
+       </p>
+    </div> 
+      <button onclick="addBookmark()" class="bookmark">
+        bookmark
+      </button>
+
+      <h2>
+        6.Article 
+      </h2>
+  </body>
+</html>
diff --git a/sample.txt b/sample.txt
@@ -0,0 +1 @@
+hello world
diff --git a/script.js b/script.js
@@ -0,0 +1,63 @@
+let data;
+function getData(url, method) {
+  return new Promise(function(resolve, reject) {
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+    if (xhr.readyState !== 4) return;
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve(JSON.parse(xhr.response));
+        let data = JSON.parse(this.response)    
+        } else {
+        reject({
+          status: xhr.status,
+          statusText: xhr.statusText
+        });
+      }
+    }
+
+    xhr.open(method, url);
+    xhr.send();      
+  });
+}
+
+const url = "https://newsapi.org/v2/everything?q=bitcoin&from=2019-10-13&sortBy=publishedAt&apiKey=0c5aa5107409412a82f137ff8148d6eb"
+
+getData(url, 'GET').then(function(value) {
+  console.log('True API', value);
+  data = value;
+  for(let i=0; i<5; i++){
+     document.getElementsByClassName("art")[i].innerHTML += data.articles[i].author; 
+     document.getElementsByClassName("art")[i].innerHTML += data.articles[i].title;
+     document.getElementsByClassName("art")[i].innerHTML += data.articles[i].description;
+  }
+
+}).catch(function(error) {
+  console.log('ERROR IS', error);
+})
+
+let favNews = [];
+        const addUsername = (ev)=>{
+            ev.preventDefault();  //to stop the form submitting
+            let user = {
+                username: document.getElementById('userInput').value,
+            }
+            //document.write("Hello" + user + "!" + "Welcome to News List.")
+            favNews.push(user);
+            document.forms[0].reset(); // to clear the form for the next entries
+
+            console.warn('added' , {favNews} );
+            let pre = document.querySelector('#msg pre');
+            pre.textContent = '\n' + JSON.stringify(favNews, '\t', 2);
+            //saving to localStorage
+            localStorage.setItem('UserLogin', JSON.stringify(favNews) );
+        }
+        document.addEventListener('DOMContentLoaded', ()=>{
+            document.getElementById('btn').addEventListener('click', addUsername);
+        });
+
+function addBookmark(){
+  var element = document.getElementsByClassName("newsArticle");
+  element.classList.add("addedBookmark");
+}
+
+addBookmark();
diff --git a/style.css b/style.css
@@ -0,0 +1,24 @@
+/* CSS files add styling rules to your content */
+
+body {
+    font-family: helvetica, arial, sans-serif;
+    margin: 2em;
+  }
+
+  h1 {
+    font-style: italic;
+    color: #373fff;
+  }
+
+  .bookmark{
+    float: right;
+  }
+
+  .addedBookmark {
+    width: 100%;
+    padding: 25px;
+    background-color: coral;
+    color: white;
+    font-size: 20px;
+  }
+