JacintoDesign · DavinJ-0316 · Jan 8, 2021 · Jan 8, 2021
diff --git a/favicon.png b/favicon.png
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Infinite Scroll</title>
-    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="icon" type="image/png" href="https://www.google.com/s2/favicons?domain=jacinto.design">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -19,4 +19,5 @@ <h1>Unsplash API - Infinite Scroll</h1>
     <!-- Script -->
     <script src="script.js"></script>
 </body>
-</html>
+</html>
+
diff --git a/loader.svg b/loader.svg
diff --git 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 <a> to link to full photo
-    const item = document.createElement('a');
-    setAttributes(item, {
-      href: photo.links.html,
-      target: '_blank',
-    });
-    // Create <img> 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 <a> 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 <img> 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 <img> inside <a>, 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 <img> inside <a>, 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
@@ -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;
+    }
+}