diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..24989f3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +*.sketch +*.fig +*.xd +.DS_Store + +node_modules diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..9e7e2ac --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "singleQuote": true, + "tabWidth": 4, + "trailingComma": "es5" +} \ No newline at end of file diff --git a/Screenshots/unsplash_app_overlay_loader.jpg b/Screenshots/unsplash_app_overlay_loader.jpg new file mode 100644 index 0000000..16bf395 Binary files /dev/null and b/Screenshots/unsplash_app_overlay_loader.jpg differ diff --git a/assets/design/Bean Eater-1s-200px.svg b/assets/design/Bean Eater-1s-200px.svg new file mode 100644 index 0000000..7564c91 --- /dev/null +++ b/assets/design/Bean Eater-1s-200px.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/design/international.png b/assets/design/international.png new file mode 100644 index 0000000..7a7cd23 Binary files /dev/null and b/assets/design/international.png differ diff --git a/assets/design/photo-1488426862026-3ee34a7d66df.jpg b/assets/design/photo-1488426862026-3ee34a7d66df.jpg new file mode 100644 index 0000000..9daf1fc Binary files /dev/null and b/assets/design/photo-1488426862026-3ee34a7d66df.jpg differ diff --git a/assets/style/_core.scss b/assets/style/_core.scss new file mode 100644 index 0000000..feb8c02 --- /dev/null +++ b/assets/style/_core.scss @@ -0,0 +1,21 @@ +@use '_variables' as *; + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + margin: 0; + font-family: $primaryFont; + background-color: $bodyColor; +} + +main { + background-color: $bodyColor; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} diff --git a/assets/style/_header.scss b/assets/style/_header.scss new file mode 100644 index 0000000..c959964 --- /dev/null +++ b/assets/style/_header.scss @@ -0,0 +1,54 @@ +@use '_variables' as *; + +header { + z-index: 50; + padding-top: 0.25rem; + position: sticky; + top: 0; + background-color: inherit; + margin: 10px 24px 20px 24px; + padding: 20px; + display: flex; + justify-content: flex-start; + min-width: 375px; + width: 100%; + + h1 { + color: $h1Color; + opacity: 0.7; + text-transform: uppercase; + font-size: 26px; + text-align: center; + padding-right: 10px; + + @media only screen and (min-width: 768px) { + font-size: 45px; + } + + @media only screen and (min-width: 1280px) { + font-size: 60px; + } + } + + button { + width: 60px; + text-align: center; + cursor: pointer; + font-family: $primaryFont; + text-transform: uppercase; + background-color: $buttonColor; + color: $h1Color; + border-radius: 10px; + border: none; + + @media only screen and (min-width: 768px) { + width: 70px; + font-size: 20px; + } + + @media only screen and (min-width: 1280px) { + width: 90px; + font-size: 35px; + } + } +} diff --git a/assets/style/_image-container.scss b/assets/style/_image-container.scss new file mode 100644 index 0000000..c2a5ba3 --- /dev/null +++ b/assets/style/_image-container.scss @@ -0,0 +1,158 @@ +@use '_variables' as *; + +.image-container { + padding: 20px; + padding-top: 4px; + min-width: 375px; + margin: 20px 10%; + display: flex; + flex-direction: column; + align-items: center; + color: $buttonColor; + + .all { + padding: 5px; + margin-bottom: 10px; + box-shadow: $shadowColor 0px 3px 8px; + } + + img { + width: 100%; + height: 90%; + margin-top: 5px; + cursor: pointer; + } + + a { + cursor: pointer; + font-size: 10px; + margin-top: 10px; + text-decoration: none; + color: $buttonColor; + + @media only screen and (min-width: 768px) { + font-size: 20px; + margin-bottom: 20px; + } + + @media only screen and (min-width: 1280px) { + font-size: 30px; + margin-bottom: 20px; + } + } + + .userInfo { + width: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + margin-bottom: 3px; + + small { + align-self: flex-end; + font-size: 15px; + color: $usernameColor; + + @media only screen and (min-width: 768px) { + font-size: 30px; + } + + @media only screen and (min-width: 768px) { + font-size: 40px; + } + } + } + + .avatar { + width: 15%; + height: 15%; + border-radius: 50%; + margin-right: 15px; + margin-bottom: 3px; + padding: 5px; + } + + .stats { + font-size: 13px; + display: flex; + justify-content: center; + width: 100%; + padding-right: 15px; + + small { + @media only screen and (min-width: 768px) { + font-size: 20px; + margin-bottom: 10px; + } + + @media only screen and (min-width: 1280px) { + font-size: 25px; + } + } + } + + .likes { + margin-right: 15px; + } + + .social { + font-size: 13px; + align-self: flex-start; + display: flex; + flex-direction: column; + justify-content: baseline; + align-items: flex-start; + + small { + @media only screen and (min-width: 768px) { + font-size: 20px; + padding-bottom: 5px; + } + + @media only screen and (min-width: 1280px) { + font-size: 30px; + } + } + } +} + +.grid { + display: grid; + grid-template-columns: repeat(3, 110px); + justify-content: center; + align-content: center; + align-items: center; + grid-gap: 15px; + width: 100%; + margin: 0; + margin-top: 20px; + + @media only screen and (min-width: 768px) { + grid-template-columns: repeat(4, 170px); + } + + @media only screen and (min-width: 1280px) { + grid-template-columns: repeat(5, 200px); + } + + .all { + padding: 0; + margin: 0; + width: 100%; + height: 100%; + } + + img { + margin: 0; + width: 100%; + height: 100%; + } + + .userInfo, + .likes, + .social, + .stats, + a { + display: none; + } +} diff --git a/assets/style/_lightbox.scss b/assets/style/_lightbox.scss new file mode 100644 index 0000000..a28b386 --- /dev/null +++ b/assets/style/_lightbox.scss @@ -0,0 +1,125 @@ +@use '_variables' as *; + +#lightbox { + position: fixed; + z-index: 1000; + top: 0; + width: 100%; + height: 100%; + background-color: rgba($color: $black, $alpha: 0.8); + display: none; + color: $lightBoxTextColor; + + .all { + max-width: 90%; + max-height: 80%; + + @media only screen and (min-width: 768px) { + max-width: 60%; + max-height: 50%; + } + } + + img { + padding: 2px; + border: 1px solid $lightBoxTextColor; + margin-bottom: 10px; + max-width: 90%; + max-height: 80%; + } + + .userInfo { + width: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + margin-bottom: 7px; + + small { + margin-bottom: 7px; + align-self: flex-end; + + @media only screen and (min-width: 768px) { + font-size: 22px; + } + + @media only screen and (min-width: 1280px) { + font-size: 35px; + } + } + + img { + outline: none; + border: none; + width: 15%; + height: 15%; + border-radius: 50%; + margin-right: 15px; + } + } + + .stats { + font-size: 15px; + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 7px; + + small { + @media only screen and (min-width: 768px) { + font-size: 22px; + } + + @media only screen and (min-width: 1280px) { + font-size: 25px; + } + } + + .likes { + margin-right: 15px; + } + } + + a { + font-size: 13px; + margin-top: 10px; + color: $lightBoxTextColor; + text-decoration: none; + cursor: pointer; + + @media only screen and (min-width: 768px) { + font-size: 22px; + } + + @media only screen and (min-width: 1280px) { + font-size: 30px; + } + } + + .social { + margin-top: 7px; + font-size: 15px; + align-self: flex-start; + display: flex; + flex-direction: column; + justify-content: baseline; + align-items: flex-start; + + small { + @media only screen and (min-width: 768px) { + font-size: 22px; + } + + @media only screen and (min-width: 1280px) { + font-size: 30px; + } + } + } +} + +#lightbox.active { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} diff --git a/assets/style/_loader.scss b/assets/style/_loader.scss new file mode 100644 index 0000000..066b23e --- /dev/null +++ b/assets/style/_loader.scss @@ -0,0 +1,16 @@ +@use '_variables' as *; + +.loader { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + + img { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } +} diff --git a/assets/style/_variables.scss b/assets/style/_variables.scss new file mode 100644 index 0000000..eb4743f --- /dev/null +++ b/assets/style/_variables.scss @@ -0,0 +1,9 @@ +$primaryFont: 'Roboto', sans-serif; + +$bodyColor: #d5d3ea; +$h1Color: #f9b15e; +$buttonColor: #190f03; +$shadowColor: rgba(0, 0, 0, 0.24); +$usernameColor: #755e45; +$lightBoxTextColor: #f9a94d; +$black: #000000; diff --git a/assets/style/style.css b/assets/style/style.css new file mode 100644 index 0000000..7b5a010 --- /dev/null +++ b/assets/style/style.css @@ -0,0 +1,361 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + margin: 0; + font-family: "Roboto", sans-serif; + background-color: #d5d3ea; +} + +main { + background-color: #d5d3ea; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +header { + z-index: 50; + padding-top: 0.25rem; + position: sticky; + top: 0; + background-color: inherit; + margin: 10px 24px 20px 24px; + padding: 20px; + display: flex; + justify-content: flex-start; + min-width: 375px; + width: 100%; +} +header h1 { + color: #f9b15e; + opacity: 0.7; + text-transform: uppercase; + font-size: 26px; + text-align: center; + padding-right: 10px; +} +@media only screen and (min-width: 768px) { + header h1 { + font-size: 45px; + } +} +@media only screen and (min-width: 1280px) { + header h1 { + font-size: 60px; + } +} +header button { + width: 60px; + text-align: center; + cursor: pointer; + font-family: "Roboto", sans-serif; + text-transform: uppercase; + background-color: #190f03; + color: #f9b15e; + border-radius: 10px; + border: none; +} +@media only screen and (min-width: 768px) { + header button { + width: 70px; + font-size: 20px; + } +} +@media only screen and (min-width: 1280px) { + header button { + width: 90px; + font-size: 35px; + } +} + +.loader { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; +} +.loader img { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.image-container { + padding: 20px; + padding-top: 0.25rem; + min-width: 375px; + margin: 20px 10%; + display: flex; + flex-direction: column; + align-items: center; + color: #190f03; +} +.image-container .all { + padding: 5px; + margin-bottom: 10px; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; +} +.image-container img { + width: 100%; + height: 90%; + margin-top: 5px; + cursor: pointer; +} +.image-container a { + cursor: pointer; + font-size: 10px; + margin-top: 10px; + text-decoration: none; + color: #190f03; +} +@media only screen and (min-width: 768px) { + .image-container a { + font-size: 20px; + margin-bottom: 20px; + } +} +@media only screen and (min-width: 1280px) { + .image-container a { + font-size: 30px; + margin-bottom: 20px; + } +} +.image-container .userInfo { + width: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + margin-bottom: 3px; +} +.image-container .userInfo small { + align-self: flex-end; + font-size: 15px; + color: #755e45; +} +@media only screen and (min-width: 768px) { + .image-container .userInfo small { + font-size: 30px; + } +} +@media only screen and (min-width: 768px) { + .image-container .userInfo small { + font-size: 40px; + } +} +.image-container .avatar { + width: 15%; + height: 15%; + border-radius: 50%; + margin-right: 15px; + margin-bottom: 3px; + padding: 5px; +} +.image-container .stats { + font-size: 13px; + display: flex; + justify-content: center; + width: 100%; + padding-right: 15px; +} +@media only screen and (min-width: 768px) { + .image-container .stats small { + font-size: 20px; + margin-bottom: 10px; + } +} +@media only screen and (min-width: 1280px) { + .image-container .stats small { + font-size: 25px; + } +} +.image-container .likes { + margin-right: 15px; +} +.image-container .social { + font-size: 13px; + align-self: flex-start; + display: flex; + flex-direction: column; + justify-content: baseline; + align-items: flex-start; +} +@media only screen and (min-width: 768px) { + .image-container .social small { + font-size: 20px; + padding-bottom: 5px; + } +} +@media only screen and (min-width: 1280px) { + .image-container .social small { + font-size: 30px; + } +} + +.grid { + display: grid; + grid-template-columns: repeat(3, 110px); + justify-content: center; + align-content: center; + align-items: center; + grid-gap: 15px; + width: 100%; + margin: 0; + margin-top: 20px; +} +@media only screen and (min-width: 768px) { + .grid { + grid-template-columns: repeat(4, 170px); + } +} +@media only screen and (min-width: 1280px) { + .grid { + grid-template-columns: repeat(5, 200px); + } +} +.grid .all { + padding: 0; + margin: 0; + width: 100%; + height: 100%; +} +.grid img { + margin: 0; + width: 100%; + height: 100%; +} +.grid .userInfo, +.grid .likes, +.grid .social, +.grid .stats, +.grid a { + display: none; +} + +#lightbox { + position: fixed; + z-index: 1000; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + display: none; + color: #f9a94d; +} +#lightbox .all { + max-width: 90%; + max-height: 80%; +} +@media only screen and (min-width: 768px) { + #lightbox .all { + max-width: 60%; + max-height: 50%; + } +} +#lightbox img { + padding: 2px; + border: 1px solid #f9a94d; + margin-bottom: 10px; + max-width: 90%; + max-height: 80%; +} +#lightbox .userInfo { + width: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + margin-bottom: 7px; +} +#lightbox .userInfo small { + margin-bottom: 7px; + align-self: flex-end; +} +@media only screen and (min-width: 768px) { + #lightbox .userInfo small { + font-size: 22px; + } +} +@media only screen and (min-width: 1280px) { + #lightbox .userInfo small { + font-size: 35px; + } +} +#lightbox .userInfo img { + outline: none; + border: none; + width: 15%; + height: 15%; + border-radius: 50%; + margin-right: 15px; +} +#lightbox .stats { + font-size: 15px; + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 7px; +} +@media only screen and (min-width: 768px) { + #lightbox .stats small { + font-size: 22px; + } +} +@media only screen and (min-width: 1280px) { + #lightbox .stats small { + font-size: 25px; + } +} +#lightbox .stats .likes { + margin-right: 15px; +} +#lightbox a { + font-size: 13px; + margin-top: 10px; + color: #f9a94d; + text-decoration: none; + cursor: pointer; +} +@media only screen and (min-width: 768px) { + #lightbox a { + font-size: 22px; + } +} +@media only screen and (min-width: 1280px) { + #lightbox a { + font-size: 30px; + } +} +#lightbox .social { + margin-top: 7px; + font-size: 15px; + align-self: flex-start; + display: flex; + flex-direction: column; + justify-content: baseline; + align-items: flex-start; +} +@media only screen and (min-width: 768px) { + #lightbox .social small { + font-size: 22px; + } +} +@media only screen and (min-width: 1280px) { + #lightbox .social small { + font-size: 30px; + } +} + +#lightbox.active { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/assets/style/style.css.map b/assets/style/style.css.map new file mode 100644 index 0000000..b1f435d --- /dev/null +++ b/assets/style/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["_core.scss","_variables.scss","_header.scss","_loader.scss","_image-container.scss","_lightbox.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;;;AAGJ;EACI;EACA,aCVU;EDWV,kBCTQ;;;ADYZ;EACI,kBCbQ;EDcR;EACA;EACA;EACA;;;AEjBJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,ODbE;ECcF;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;;;AAGJ;EAZJ;IAaQ;;;AAIR;EACI;EACA;EACA;EACA,aDpCM;ECqCN;EACA,kBDlCM;ECmCN,ODpCE;ECqCF;EACA;;AAEA;EAXJ;IAYQ;IACA;;;AAGJ;EAhBJ;IAiBQ;IACA;;;;AChDZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;;ACXR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OHNU;;AGQV;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA,OH1BM;;AG4BN;EAPJ;IAQQ;IACA;;;AAGJ;EAZJ;IAaQ;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA,OH/CI;;AGiDJ;EALJ;IAMQ;;;AAGJ;EATJ;IAUQ;;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGI;EADJ;IAEQ;IACA;;;AAGJ;EANJ;IAOQ;;;AAKZ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGI;EADJ;IAEQ;IACA;;;AAGJ;EANJ;IAOQ;;;;AAMhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAXJ;IAYQ;;;AAGJ;EAfJ;IAgBQ;;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;EAKI;;;ACzJR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OJHgB;;AIKhB;EACI;EACA;;AAEA;EAJJ;IAKQ;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EAJJ;IAKQ;;;AAGJ;EARJ;IASQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGI;EADJ;IAEQ;;;AAGJ;EALJ;IAMQ;;;AAIR;EACI;;AAIR;EACI;EACA;EACA,OJ9EY;EI+EZ;EACA;;AAEA;EAPJ;IAQQ;;;AAGJ;EAXJ;IAYQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EADJ;IAEQ;;;AAGJ;EALJ;IAMQ;;;;AAMhB;EACI;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file diff --git a/assets/style/style.scss b/assets/style/style.scss new file mode 100644 index 0000000..719a2a5 --- /dev/null +++ b/assets/style/style.scss @@ -0,0 +1,5 @@ +@import '_core'; +@import '_header'; +@import '_loader'; +@import '_image-container'; +@import '_lightbox'; diff --git a/index.html b/index.html new file mode 100644 index 0000000..a1bfe13 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + Unsplash App + + +
+ +
+ loader +
+
+
+ +
+ + diff --git a/index.js b/index.js new file mode 100644 index 0000000..20c42b7 --- /dev/null +++ b/index.js @@ -0,0 +1,190 @@ +const imageContainer = document.getElementById('image-container'); +const button = document.getElementById('button'); +const loader = document.getElementById('loader'); + +const apiKey = 'Y9QXVgfTOVX0MDoTWFKtvtYXQwZaOceLP755xM_d0SM'; + +const lightbox = document.createElement('div'); +lightbox.id = 'lightbox'; +document.body.appendChild(lightbox); + +function changeView() { + if (imageContainer.classList.contains('grid')) { + imageContainer.classList.remove('grid'); + button.innerText = 'grid'; + } else { + imageContainer.classList.add('grid'); + button.innerText = 'list'; + } +} + +let ready = false; +let imagesLoaded = 0; +let totalImages = 0; + +let count = 15; + +apiUrl = `https://api.unsplash.com/photos/random/?client_id=${apiKey}&count=${count}`; + +function updatedCount(newCount) { + newCount = 20; + apiUrl = `https://api.unsplash.com/photos/random/?client_id=${apiKey}&count=${newCount}`; +} + +function imageLoaded() { + imagesLoaded++; + if (imagesLoaded === totalImages) { + ready = true; + loader.hidden = true; + updatedCount(); + } +} + +function setAttributes(element, attributes) { + for (const key in attributes) { + element.setAttribute(key, attributes[key]); + } +} + +function displayPhotosWithInfo() { + //update info for social part, set opacity if unavaiable + function updateSocialData(api_data, targetElement, title) { + if (api_data == '' || api_data === null) { + targetElement.style.opacity = 0.5; + return title + 'Not available'; + } else { + targetElement.style.opacity = 1; + return title + `${api_data}`; + } + } + + imagesLoaded = 0; + totalImages = photosArray.length; + photosArray.forEach((photo) => { + //create image + const img = document.createElement('img'); + setAttributes(img, { + src: photo.urls.regular, + alt: photo.alt_description + photo.current_user_collections.title, + title: photo.alt_description, + }); + //create container for all info + const all = document.createElement('div'); + all.classList.add('all'); + + //container for avatar and username + const userInfo = document.createElement('div'); + userInfo.classList.add('userInfo'); + + //likes and downloads + const stats = document.createElement('div'); + stats.classList.add('stats'); + + //url, twitter, instagram + const social = document.createElement('div'); + social.classList.add('social'); + + //photo link + const photoLink = document.createElement('a'); + photoLink.href = photo.links.html; + photoLink.innerText = 'Link: ' + photo.links.html; + + //likes + const likes = document.createElement('small'); + likes.classList.add('likes'); + likes.innerText = 'Likes: ' + photo.likes; + + //downloads + const downloads = document.createElement('small'); + downloads.innerText = 'Downloads: ' + photo.likes; + + //avatar image + const avatar = document.createElement('img'); + avatar.classList.add('avatar'); + setAttributes(avatar, { src: photo.user.profile_image.large }); + + //username + const username = document.createElement('small'); + username.innerText = photo.user.username; + + //portfolio URL + const portfolioURL = document.createElement('small'); + portfolioURL.innerHTML = updateSocialData( + photo.user.portfolio_url, + portfolioURL, + 'URL: ' + ); + + const twitter = document.createElement('small'); + twitter.innerText = updateSocialData( + photo.user.social.twitter_username, + twitter, + 'Twitter: ' + ); + + const instagram = document.createElement('small'); + instagram.innerText = updateSocialData( + photo.user.social.instagram_username, + instagram, + 'Instagram: ' + ); + + img.addEventListener('click', (e) => { + lightbox.classList.add('active'); + const image = document.createElement('img'); + image.src = img.src; + image.classList.add('lightBoxImage'); + + while (lightbox.firstChild) { + lightbox.removeChild(lightbox.firstChild); + } + lightbox.appendChild(all); + }); + + lightbox.addEventListener('click', (e) => { + lightbox.classList.remove('active'); + }); + + //check when finish loading + img.addEventListener('load', imageLoaded); + + userInfo.appendChild(avatar); + userInfo.appendChild(username); + stats.appendChild(likes); + stats.appendChild(downloads); + social.appendChild(portfolioURL); + social.appendChild(twitter); + social.appendChild(instagram); + all.appendChild(userInfo); + all.appendChild(img); + all.appendChild(stats); + all.appendChild(photoLink); + all.appendChild(social); + imageContainer.appendChild(all); + }); +} + +async function getPhotos() { + try { + const response = await fetch(apiUrl); + photosArray = await response.json(); + + displayPhotosWithInfo(); + } catch (error) { + console.log(error); + } +} + +window.addEventListener('scroll', () => { + if ( + window.innerHeight + window.scrollY >= + document.body.offsetHeight - 2000 && + ready + ) { + ready = false; + loader.hidden = false; + getPhotos(); + } +}); + +getPhotos(); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..2ee8cd8 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,130 @@ +{ + "name": "unsplash-infinite-loader", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "unsplash-infinite-loader", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "@fortawesome/fontawesome-free": "^5.15.4", + "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-regular-svg-icons": "^5.15.4", + "@fortawesome/free-solid-svg-icons": "^5.15.4" + }, + "devDependencies": { + "prettier": "^2.4.1" + } + }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "0.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz", + "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", + "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "1.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz", + "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz", + "integrity": "sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz", + "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/prettier": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz", + "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + } + } + }, + "dependencies": { + "@fortawesome/fontawesome-common-types": { + "version": "0.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz", + "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==" + }, + "@fortawesome/fontawesome-free": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", + "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz", + "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz", + "integrity": "sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz", + "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + } + }, + "prettier": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz", + "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==", + "dev": true + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..c52bb8c --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "unsplash-infinite-loader", + "version": "1.0.0", + "description": "**To do this challenge, you need a good understanding of HTML, CSS, and JavaScript.**", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "format": "prettier --write \"**/*.{js,scss}\"" + }, + "author": "Vladimir Stojanovic", + "license": "ISC", + "devDependencies": { + "prettier": "^2.4.1" + }, + "dependencies": { + "@fortawesome/fontawesome-free": "^5.15.4", + "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-regular-svg-icons": "^5.15.4", + "@fortawesome/free-solid-svg-icons": "^5.15.4" + } +} \ No newline at end of file