Unsplash API - Infinite Scroll
- -
- 
-
-
-
-
-
-
+
+
+
+
+
+
- Unsplash API - Infinite Scroll
+ +
+ 
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
index 4155a51..3626ec4 100644
--- a/script.js
+++ b/script.js
@@ -1,78 +1,108 @@
-const imageContainer = document.getElementById('image-container');
-const loader = document.getElementById('loader');
-
-let ready = false;
-let imagesLoaded = 0;
-let totalImages = 0;
-let photosArray = [];
-
-// 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 Attributes on DOM Elements
-function setAttributes(element, attributes) {
- for (const key in attributes) {
- element.setAttribute(key, attributes[key]);
- }
-}
-
-// 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,
- });
- // 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
- }
-}
-
-// 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();
- }
-});
-
-// On Load
-getPhotos();
+
+
+const imageContainer = document.getElementById('image-container');
+const loader = document.getElementById('loader');
+
+
+let ready = false;
+let imagesLoaded = 0;
+let totalImages = 0;
+let photosArray = [];
+let initialLoad = true;
+
+// Unsplash API
+let count = 5;
+const apiKey = 'dUNvFfQX9xJ0hhUhCkKEb7dLggVeenKqpsnfu6FIqWQ';
+let apiUrl = `https://api.unsplash.com/photos/random/?client_id=${apiKey}&count=${count}`;
+
+function updateAPIURLWithNewCount (picCount) {
+ apiUrl = `https://api.unsplash.com/photos/random?client_id=${apiKey}&count=${picCount}`;
+ }
+
+// Check of all images were loaded
+function imageLoaded() {
+ imagesLoaded++;
+ // console.log(imagesLoaded);
+ if (imagesLoaded === totalImages){
+ ready = true;
+ loader.hidden=true;
+ //console.log('ready =', ready);
+ // initialLoad = false;
+ //count = 30;
+ ApiUrl = `https://api.unsplash.com/photos/random/?client_id=${apiKey}&count=${count}`
+ }
+}
+
+
+// Helper Function to set Attributes on DOM Elements
+function setAttributes(element, attributes) {
+ for (const key in attributes) {
+ element.setAttribute(key, attributes[key]);
+ }
+}
+
+
+/* Create Elements for Link and Photos*/
+function displayPhotos(){
+ imagesLoaded = 0;
+ totalImages = photosArray.length
+ console.log('total images', totalImages);
+
+ // Run function for each object
+ 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);
+ });
+}
+
+// Get photos from Unsplash API
+async function getPhotos() {
+ try {
+ const response = await fetch(apiUrl);
+ photosArray = await response.json();
+ displayPhotos();
+ if (isInitialLoad) {
+ updateAPIURLWithNewCount(30)
+ isInitialLoad = false
+ }
+ } 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();
+ console.log('load more');
+ }
+
+});
+
+// On Load
+getPhotos();
diff --git a/style.css b/style.css
index d36db76..783f7ea 100644
--- a/style.css
+++ b/style.css
@@ -1,57 +1,59 @@
-@import url("https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap");
-
-html {
- box-sizing: border-box;
-}
-
-body {
- 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;
-}
-
-/* Loader */
-.loader {
- 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%);
-}
-
-/* Image Container */
-.image-container {
- margin: 10px 30%;
-}
-
-.image-container img {
- width: 100%;
- margin-top: 5px;
-}
-
-/* Media Query: Large Smartphone Vertical */
-@media screen and (max-width: 600px) {
- h1 {
- font-size: 20px;
- }
-
- .image-container {
- margin: 10px;
- }
-}
+ @import url('https://fonts.googleapis.com/css2?family=Urbanist&display=swap');
+
+
+
+html {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: 'Urbanist', sans-serif;
+ background-color: whitesmoke;
+}
+
+h1 {
+ text-align: center;
+ margin-top: 25px;
+ margin-bottom: 15px;
+ font-size: 40px;
+ letter-spacing: 2px;
+}
+
+/* Loader */
+
+.loader {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: rgba(255, 255, 255, 0.8);
+}
+
+.loader img {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+/* Image Container */
+.image-container {
+ margin: 10px 30%;
+}
+
+.image-container img {
+ width: 100%;
+ margin-top: 5px;
+}
+
+/* Media Query for Large SmartPhone */
+@media screen and (max-width: 600px){
+ h1{
+ font-size: 20px;
+ }
+ .image-container {
+ margin: 10px;
+ }
+}
\ No newline at end of file