From 80f8715e12c8ea72ba4a4bac42e2523ce3a1525e Mon Sep 17 00:00:00 2001 From: azizck Date: Sun, 27 Oct 2019 14:54:24 -0400 Subject: [PATCH 1/5] DONE --- css/main.css | 121 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 32 +++++++++++++ js/main.js | 133 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 286 insertions(+) create mode 100644 css/main.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..2e46948 --- /dev/null +++ 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: 80px; + 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; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..ff9335e --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + News List + + + + + +
Anonymous + + + Don't have an account? sign up ! +
+ +
+

Create an Account

+ + +
+ +

News

+
+

Author Title

+
+ + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..2d55c4b --- /dev/null +++ b/js/main.js @@ -0,0 +1,133 @@ +// store all articles +let articles = []; +let user; + +const gitExtension = vscode.extensions.getExtension('vscode.git').exports; +const git = gitExtension.getAPI(1); + +//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 += `

+ ${data.articles[i].author} + ${data.articles[i].title} + +

`; + + //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 (user) { + 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; + 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 < articles.length ; i++) { + if (user.bookMarks.indexOf(i) > -1) { + document.getElementById("articles").innerHTML += `

${articles[i].author} ${articles[i].title}

`; + } + + } + } + }); +} \ No newline at end of file From ac792100407a8e2a26f0ff8d309d87ef2336876d Mon Sep 17 00:00:00 2001 From: azizomarck <45137980+azizomarck@users.noreply.github.com> Date: Sun, 27 Oct 2019 15:00:13 -0400 Subject: [PATCH 2/5] removed codes for managing extension on VS --- js/main.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/js/main.js b/js/main.js index 2d55c4b..0884390 100644 --- a/js/main.js +++ b/js/main.js @@ -2,8 +2,6 @@ let articles = []; let user; -const gitExtension = vscode.extensions.getExtension('vscode.git').exports; -const git = gitExtension.getAPI(1); //make a XMLHttpReqeust and return a promise function makeRequest(method, url) { @@ -130,4 +128,4 @@ function displayFav() { } } }); -} \ No newline at end of file +} From 385bd71a765e3a6924656f10e1c0acc171856421 Mon Sep 17 00:00:00 2001 From: azizomarck <45137980+azizomarck@users.noreply.github.com> Date: Sun, 27 Oct 2019 15:05:29 -0400 Subject: [PATCH 3/5] Update index.html --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ff9335e..ed5ab41 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + News List @@ -29,4 +29,4 @@

News

- \ No newline at end of file + From 9e8d954c9b1d6d304e196a92f2e6b110bd8be039 Mon Sep 17 00:00:00 2001 From: azizomarck <45137980+azizomarck@users.noreply.github.com> Date: Sun, 27 Oct 2019 15:52:02 -0400 Subject: [PATCH 4/5] added counter --- js/main.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/js/main.js b/js/main.js index 0884390..6521e61 100644 --- a/js/main.js +++ b/js/main.js @@ -73,7 +73,10 @@ function favIcon() { this.style.color = "black"; // parse the ID of the articl indexOfArticles = parseInt(this.id); - if (user) { + 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) @@ -96,6 +99,7 @@ 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 = []; @@ -120,7 +124,7 @@ function displayFav() { if (user != null && user.bookMarks.length > 0) { user.bookMarks.sort(); document.getElementById("articles").innerHTML = ""; - for (let i = 0; i < articles.length ; i++) { + for (let i = 0; i < 3; i++) { if (user.bookMarks.indexOf(i) > -1) { document.getElementById("articles").innerHTML += `

${articles[i].author} ${articles[i].title}

`; } @@ -129,3 +133,17 @@ function displayFav() { } }); } + + + +let trackBookMarks=null; +let counter = function (x) { + if (x == undefined) { + i = 0; + } else { i = x; } + + return function () { + i++; + return i; + } +}; From b96bd664e46d21dab62eb37f94b4a74562053fd0 Mon Sep 17 00:00:00 2001 From: azizomarck <45137980+azizomarck@users.noreply.github.com> Date: Sun, 27 Oct 2019 17:49:57 -0400 Subject: [PATCH 5/5] Update main.css --- css/main.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/main.css b/css/main.css index 2e46948..3fb1482 100644 --- a/css/main.css +++ b/css/main.css @@ -62,7 +62,7 @@ p { display: flex; padding: 10px; width: 80%; - height: 80px; + height: 113px; margin: auto; background: palegoldenrod; border-radius: 5px; @@ -118,4 +118,4 @@ h1 { font-size: 13px; border: none; border-radius: 10px; -} \ No newline at end of file +}