From 54dde0ce71b5b54f3a2aa32f3d672d64110b8aaa Mon Sep 17 00:00:00 2001 From: Jinhao Jiang <58126838+DavinJ-0316@users.noreply.github.com> Date: Fri, 8 Jan 2021 21:17:13 +1100 Subject: [PATCH 1/2] This is my submission --- index.html | 5 ++- loader.svg | 20 ++++----- script.js | 118 +++++++++++++++++++++++++++++------------------------ style.css | 68 +++++++++++++++--------------- 4 files changed, 111 insertions(+), 100 deletions(-) diff --git a/index.html b/index.html index e96b970..1d4926a 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Infinite Scroll - + @@ -19,4 +19,5 @@

Unsplash API - Infinite Scroll

- \ No newline at end of file + + diff --git a/loader.svg b/loader.svg index badc06a..109b1f2 100644 --- a/loader.svg +++ b/loader.svg @@ -1,22 +1,20 @@ - + - + - + - + - + - + - + - + - - - + \ No newline at end of file diff --git a/script.js b/script.js index 4155a51..ec7bd70 100644 --- a/script.js +++ b/script.js @@ -5,73 +5,83 @@ let ready = false; let imagesLoaded = 0; let totalImages = 0; let photosArray = []; +//let initialLoad = true; -// Unsplash API -const count = 30; -// Normally, don't store API Keys like this, but an exception made here because it is free, and the data is publicly available! -const apiKey = 'jFgS8tteGD425f4oZfygQVaVnD6gt6GucN2yyz3xFek'; -const apiUrl = `https://api.unsplash.com/photos/random?client_id=${apiKey}&count=${count}`; - -// Check if all images were loaded -function imageLoaded() { - imagesLoaded++; - if (imagesLoaded === totalImages) { - ready = true; - loader.hidden = true; - } +//*Helper Function to Set Attribute on DOM Elements +function setAttributes(element, attributes) { + for(const key in attributes){ + element.setAttribute(key, attributes[key]); + } } -// Helper Function to Set Attributes on DOM Elements -function setAttributes(element, attributes) { - for (const key in attributes) { - element.setAttribute(key, attributes[key]); - } +//Unsplash API +let count = 5; +const apiKey = '7s7yRyYtx_FCjhjaALy32kKNNEG-NR04BNJC0OWhFnI'; +let apiUrl = `https://api.unsplash.com/photos/random/?client_id=${apiKey}&count=${count}`; + +// Check if all images were loaded +function imageLoaded(){ + imagesLoaded++; + if (imagesLoaded == totalImages) { + ready = true; + loader.hidden = true; + //initialLoad = false; + count = 30; + apiUrl = `https://api.unsplash.com/photos/random/?client_id=${apiKey}&count=${count}`; + } } // Create Elements For Links & Photos, Add to DOM function displayPhotos() { - imagesLoaded = 0; - totalImages = photosArray.length; - // Run function for each object in photosArray - photosArray.forEach((photo) => { - // Create to link to full photo - const item = document.createElement('a'); - setAttributes(item, { - href: photo.links.html, - target: '_blank', - }); - // Create for photo - const img = document.createElement('img'); - setAttributes(img, { - src: photo.urls.regular, - alt: photo.alt_description, - title: photo.alt_description, + imagesLoaded = 0; + totalImages = photosArray.length; + // run function for each object in photosArray + photosArray.forEach((photo)=>{ + //Create to link to Unsplash + const item = document.createElement('a'); + // item.setAttribute('href', photo.links.html); + // item.setAttribute('target', '_blank'); + setAttributes(item, { + href: photo.links.html, + target: '_blank', + }); + //Create for photo + const img = document.createElement('img'); + // img.setAttribute('src',photo.urls.regular); + // img.setAttribute('alt',photo.alt_description); + // img.setAttribute('title',photo.alt_description); + setAttributes(img, { + src: photo.urls.regular, + alt: photo.alt_description, + title: photo.alt_description, + }); + + // Event Listener, check when each is finished loading + img.addEventListener('load', imageLoaded); + //*Put inside , then put both inside imageContainer Element + item.appendChild(img); + imageContainer.appendChild(item); }); - // Event Listener, check when each is finished loading - img.addEventListener('load', imageLoaded); - // Put inside , then put both inside imageContainer Element - item.appendChild(img); - imageContainer.appendChild(item); - }); } -// Get photos from Unsplash API -async function getPhotos() { - try { - const response = await fetch(apiUrl); - photosArray = await response.json(); - displayPhotos(); - } catch (error) { - // Catch Error Here - } +//get photos from Unsplash API +async function getPhotos(){ + try{ + const response = await fetch(apiUrl); + photosArray = await response.json(); + displayPhotos(); + }catch(error) { + //Catch Error Here + + } } // Check to see if scrolling near bottom of page, Load More Photos -window.addEventListener('scroll', () => { - if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000 && ready) { - ready = false; - getPhotos(); - } +window.addEventListener('scroll', ()=>{ + if(window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000 && ready) { + ready = false; + getPhotos(); + } }); // On Load diff --git a/style.css b/style.css index d36db76..3298d55 100644 --- a/style.css +++ b/style.css @@ -1,57 +1,59 @@ -@import url("https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); -html { - box-sizing: border-box; +html{ + box-sizing:border-box; } body { - margin: 0; - font-family: Bebas Neue, sans-serif; - background: whitesmoke; + margin: 0; + font-family: Bebas Neue, sans-serif; + background: whitesmoke; } h1 { - text-align: center; - margin-top: 25px; - margin-bottom: 15px; - font-size: 40px; - letter-spacing: 5px; + text-align: center; + margin-top: 25px; + margin-bottom: 15px; + font-size: 40px; + letter-spacing: 5px; } /* Loader */ + .loader { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: rgba(255, 255, 255, 0.8); + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.8); } .loader img { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } + /* Image Container */ .image-container { - margin: 10px 30%; + margin: 10px 30%; } .image-container img { - width: 100%; - margin-top: 5px; + width: 100%; + margin-top: 5px; } -/* Media Query: Large Smartphone Vertical */ +/* Media Query: Large Smartphone */ @media screen and (max-width: 600px) { - h1 { - font-size: 20px; - } - - .image-container { - margin: 10px; - } -} + h1{ + font-size: 20px; + } + + .image-container { + margin: 10px; + } +} \ No newline at end of file From 6c13b50ebd741c0a01cfaf43b76327fe02ac3b0a Mon Sep 17 00:00:00 2001 From: Jinhao Jiang <58126838+DavinJ-0316@users.noreply.github.com> Date: Fri, 8 Jan 2021 21:17:43 +1100 Subject: [PATCH 2/2] Delete favicon.png --- favicon.png | Bin 2000 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 favicon.png diff --git a/favicon.png b/favicon.png deleted file mode 100644 index 67dab120ecb9513cfa868ea0316b6070e1463c4b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2000 zcmZ{ldpHw(8^?b;8Rigc&T1k&%NPkEn<8e+xk#8f-HzxoRwE|~34k3=I>4eHCLlSSZh zvW>NeS7%P%*>qn|4DZi~n~b?)fyKah82+)nAZR@6NI)d+kQvJ>lecLgu zY-@W*twEc=Z*21^p!-01K+;VkUmllPdr!f-hz9q0WSg&Cc&wP(@-1%1O8ig1e`EWL zpA}nl_N@$%`^O@ZC;cLB*7M~<(mqxvkVsy)%c4-1mO?{UutU-@Q|`o~Ys4ESv8OF` zK|MF5)U&u+3Rzb%Jk9kJGKE8q=N&1eM-lSeWo`p|03s3Zpa)8U8X^JKhLjwZGrYsf z_hMm4dlrIAtADgOk|Z{{j942gFwe>S3reT6dRft660UFHZ^~iGQ(+k}BC?;Fn;Q!) zc$y-m#0saOUx^*}O!U6UsIc<=Jdiqbq_nm}1=%e96_Nsz%0(&5ZJQrQR>S6yCqWjb zD1_a~J!v>}V^)=vejF``1eLfq@7Xdm#RWU89w*a~=_fXUO2ULz2)m%sa_V(?tN=O6 z+(8+RQKnd{O`LsAiB`BG%O65SP@%Y&zTd8JO@upWayf%AHBbUiymIakzesCaP5ASV z66tw@g`N+g+XvRT#av%*DtRLw_N)6jdT3(gt>gw=9H-YTuBK%^xCMUHN1O$g>=8tL zR7tpfr!Tm26m!b@eTW*hTdMC|mpw9@LgzWT! ztKu%@jY)EavewHXSmO2EmgJp_O$sHk{%I1U9%-ZYH1?g?*CwjvPl;DPSM7HDHukF9fZA-?&upRMHI6>AmHzy<7w$}Klh}I=~ z?(PEtTCRsVwgCh@>_zij)sxRM+lSWYTOEmrSX5oud`Zb3_mzamum@k7%h>N!WCQIe zkM;^LIb`ztDboMScAVd!sxjNjpC~?<$~t(rJyTED+R#Y1ok1|Bm^Ep?sEH;o&bdvh zR+t#w7w7ztzc{=3PisxSb4amj^)g9W<0vO}tF~HgR<`8Ru)5;ciM?y|N};h$W*O6> zfHe;a5#hZxIj=5F_rglXj4u!FIKSp> zZXn6)u|783gVzC#POCe>eOov4=0c$@(@|R4UrIXVFQ)ar5kIJNSNgAV^`3w5S@GRR zzlRIZQ^h_%^B_j3N*PFvAyWhQ4n`v`pi1ZI$(Sz%<8Ayj=BrAI_LVlg##^&7*=_6E<+E!i2+TSzC|+@QdWk-j+894A#643mPRd z`z9=WkWm5rQvB*wiQ<=F0lGj~FeOd*@(y|9Tb~R#>m)Ds?GQ?1(>Vw)s>ja9U>VbR znG0L;>*TAT!iitatzed78&azol99>Dh;ZK?tt8jkiy0}4dM}!xeVR>gPeYG7PSsdY zN3u`dN}-S!FYVKkS>5AWMTAS;b63y_Idpy0o69qsxUbuyp23kOf1&6Fnd7}>&M3bL z_MALkP;kz(!CbqQ^EuJr+4)?(|NPRuQ|zt{z01G;Q~8>|zSIn1R|ABh!x$}I zKJ8HVcB#eh)C}r*JfYaRQ7Yz-`%?HOH!tCUg1d}%V82~=dyqT?Etc)jH7xI<9n=we zM4Q$TYJyozhl6IH$<)K~^dPh4?g!}zMmb@rXIcMxSH6I(g;+RHR zC5~8@oqVn2^;7hEcE{Oz#RUb#1)B$+3KkhKA{Y_y1XH}>ehPR>KR{G;P*@1_{{tG{%svrtG||H=&Mn|HHs(}xNLXYrHjWt+j17y43k2Xy(e#p( zc