jessiwowww

second project
jessiwowww · Jan 31, 2024 · 2beaf53 · 2beaf53
1 parent e35e627
commit 2beaf53
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 156 deletions.
diff --git a/Magnify-1.6s-216px.svg b/Magnify-1.6s-216px.svg
diff --git a/favicon-32x32.png b/favicon-32x32.png
diff --git a/index.html b/index.html
@@ -1,22 +1,22 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <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="stylesheet" href="style.css">
-</head>
-<body>
-    <!-- Title -->
-    <h1>Unsplash API - Infinite Scroll</h1>
-    <!-- Loader -->
-    <div class="loader" id="loader">
-        <img src="loader.svg" alt="Loading">
-    </div>
-    <!-- Image Container -->
-    <div class="image-container" id="image-container"></div>
-    <!-- Script -->
-    <script src="script.js"></script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- Title -->
+    <h1>Unsplash API - Infinite Scroll</h1>
+    <!-- Loader -->
+    <div class="loader" id="loader">
+        <img src="Magnify-1.6s-216px.svg" alt="Loading">
+    </div>
+    <!-- Img Container -->
+    <div class="image-container" id="image-container">
+    <!-- Script -->
+    <script src="script.js"></script>
+</body>
 </html>
diff --git 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 <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,
-    });
-    // 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
-  }
-}
-
-// 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 <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);
+    });
+}
+
+// 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
@@ -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;
+    }
+}