diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..3fb1482 --- /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: 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 new file mode 100644 index 0000000..ed5ab41 --- /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

+
+ + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..6521e61 --- /dev/null +++ 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 += `

+ ${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(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 += `

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

`; + } + + } + } + }); +} + + + +let trackBookMarks=null; +let counter = function (x) { + if (x == undefined) { + i = 0; + } else { i = x; } + + return function () { + i++; + return i; + } +};