From 6f359eded6dc1ee57d2475a5914f6140becc4f1c Mon Sep 17 00:00:00 2001 From: Macbook Date: Thu, 24 Oct 2019 01:07:42 -0400 Subject: [PATCH] newsList function - no style :( --- .DS_Store | Bin 0 -> 6148 bytes css/.DS_Store | Bin 0 -> 6148 bytes css/style.css | 3 + index.htm | 26 ++++++++ js/.DS_Store | Bin 0 -> 6148 bytes js/script.js | 169 ++++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 198 insertions(+) create mode 100644 .DS_Store create mode 100644 css/.DS_Store create mode 100644 css/style.css create mode 100644 index.htm create mode 100644 js/.DS_Store create mode 100644 js/script.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..749790283b2a05c973d6b87fe0216e5a8a2e6724 GIT binary patch literal 6148 zcmeH~&u`N(6vv<2!cq{T2PAgP1qq}wb%m`5gcM45*Z~Pq1P4G{vQ#uEji)AEfl`#e z0tx;j{sR6H?(lu~12q(mLooSC_SZk&v*k}@J0>F4pT*lmEh6%eSQ{6R{l>VT)0)+! zg*z3Gp^u_eN2u{|&KvoF;kE z>3mVOdgI*r4X@esnwPv6!?B(Zi?EpG{c!rs)RK4CbW)JxNCMgVvS%IxE5? z8% zANITPu;cFVF|*UhC@KY{fE17dQa}p)QUR~MwDo18Mkyc#q`;Q~{(We4$6h!k#;1cr zv;f2v!(p69FF|Y`Aojv3krA3Dm6%kk7Q>Rxc&of#I3*?>7B};py4k8jvACV_7U{5_ zs8I??fw= + + + NewsList + + + + + + + +
+
    + +
+ +
+ + + \ No newline at end of file diff --git a/js/.DS_Store b/js/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..84fa1766cb3ee1ac4580b25cebabaf4b87b1b5ed GIT binary patch literal 6148 zcmeHKyG{c!5S)b+K{QuV`U{Zw11kyzH9vq78c?Jl0{vBd7k>t`4Un^?H8=3;>pNN4)tkH{W-k*-1r=Naq<(c)=weak$ydvX2LxdxitHc*etb z{(igJ?Kj*VJ|=ej7)7Ok6p#W^Knh5KUn=0Wm$p1l)F=g{fE4&rz`qZT?$`^*#Q1b@ zh!%jjU^tBP=p~5F1H@i9CNe^^q!N>A)nZuE8E=)>3&+Hy!{TP1Q#V_6C>FOf-Xa~= z6E#W!DKJ&wG?#~UUe8~u*%Iq!5g&V#}s m$}us@F&AErFCr=Pn$Nl43&+HuGahuJeg<3@nH2bI1wH{$Wg`Os literal 0 HcmV?d00001 diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..8794c99 --- /dev/null +++ b/js/script.js @@ -0,0 +1,169 @@ +let currentUser +let oldUsers = [] + + +function User(username){ + let favs = []; + let count = 0; + + function addFav(x){ + + if(favs.includes(x)) + { + alert("already added") + return false; + } + if(counter()){ + favs.push(x) + return true + }else{ + return false + } + + } + + function getFav(){ + return favs + } + + function counter(){ + return (count < 3) ? count+=1 : alert("Sorry, you have reached your capacity"); + } + + return { name : username, addFav, getFav} +} + + + + + +let userArea = () => { + let element = document.getElementById('userArea') + if(currentUser){ + element.innerHTML = "Hello " + currentUser.name + " | Log out"; + }else{ + element.innerHTML = ` +
+ Create User
+ + +
+ `; + } +} + + + +const switchUser = (logout = false) => { + if(logout){ + currentUser = "" + userArea() + clearFav() + return + } + + let userName = document.querySelector('#username').value; + + if(!userName){ + alert("User name can't be empty") + return false + } + + if(oldUsers[userName]){ + currentUser = oldUsers[userName] + userArea() + checkFav() + }else{ + currentUser = new User(userName) + oldUsers[userName] = currentUser + userArea() + } +} + +const getNews = () => { + let key = "0c5aa5107409412a82f137ff8148d6eb" + let api = "https://newsapi.org/v2/everything?q=toronto&sortBy=publishedAt&apiKey=" + key; + + fetch(api, { + method: 'GET', + headers: { + 'Content-Type': 'text/plain', + 'X-Api-Key': key, + } + }) + .then(function(response) { + //if the response status not ok then show me the response + if (response.status !== 200) { + console.log('Looks like there was a problem. Status Code: ' + + response.status); + return; + } + + //i did not understand why we did use .then here so please i need some explination + response.json().then(function(data) { + let articles = data.articles + + for (let i = 0; i < 5; i++) { + let item = articles[i] + //console.log(item) + let el = document.createElement('li') + el.innerHTML = ` +

${item.title}

+

+ ${item.description} + +

+ `; + document.getElementById('newsList').appendChild(el) + } + + + let items = document.querySelectorAll('li button'); + + for (let i = 0; i < items.length; i++) { + items[i].addEventListener('click', function(e){ + if(!currentUser){ + alert("Create a user first") + return false + } + + + let x = e.target.parentNode.parentNode.children[0].innerHTML + if (currentUser.addFav(x)){ + e.target.parentNode.parentNode.classList = "fav" + } + }); + } + + }); + + }) + .catch(function(err) { + console.log('Error :', err); + }); + +} + +const clearFav = () => { + let lis = document.querySelectorAll('li'); + lis.forEach(function(list){ + list.classList = ""; + }) +} + +const checkFav = () => { + let fav = currentUser.getFav() + let lis = document.querySelectorAll('li'); + lis.forEach(function(list){ + + if(fav.includes(list.children[0].innerHTML)){ + list.classList = "fav"; + } + }) +} + + +getNews() +userArea() + +