Build a Infinite Scroll Image Gallery App Using Unsplash API Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

 

index.html

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width= , initial-scale=1.0" />
    <title>Infinity Scroll</title>
    <link
      rel="icon"
      type="image/png"
      href="https://www.google.com/s2/favicons?domain=jacinto.design"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome?5.12.0-2/css/al.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
  </body>
  <!-- Title -->
    <h1>UNSPLASH API - INFINITE SCROLL</h1>
    <!-- Loader -->
    <div class="loader" id="loader">
      <img src="loader.svg" alt="Loading">
    </div>
    
    <div class="image-container" id="image-container">
    </div>
    <!--- Script --->
    <script src="script.js"></script>
  </body>
</html>

 

 

loader.svg

 

 

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(241, 242, 243); display: block; shape-rendering: auto;" width="144px" height="144px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<rect x="17.5" y="30" width="15" height="40" fill="#85a2b6">
  <animate attributeName="y" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="18;30;30" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.2s"></animate>
  <animate attributeName="height" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="64;40;40" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.2s"></animate>
</rect>
<rect x="42.5" y="30" width="15" height="40" fill="#bbcedd">
  <animate attributeName="y" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="20.999999999999996;30;30" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.1s"></animate>
  <animate attributeName="height" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="58.00000000000001;40;40" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.1s"></animate>
</rect>
<rect x="67.5" y="30" width="15" height="40" fill="#dce4eb">
  <animate attributeName="y" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="20.999999999999996;30;30" keySplines="0 0.5 0.5 1;0 0.5 0.5 1"></animate>
  <animate attributeName="height" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="58.00000000000001;40;40" keySplines="0 0.5 0.5 1;0 0.5 0.5 1"></animate>
</rect>
<!-- [ldio] generated by https://loading.io/ --></svg>

 

See also  Build a PDF Document Viewer Template Layout in HTML5 and CSS3 Full Project For Beginners

 

style.css

 

 

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap");

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  background: whitesmoke;
}

h1 {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 35px;
  letter-spacing: 3px;
}

.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%);
  background: whitesmoke;
}

.image-container {
  margin: 10px 30%;
}

.image-container img {
  width: 100%;
  margin-top: 5px;
}

/* */
@media screen and (max-width: 600px) {
  h1 {
    font-size: 20px;
  }

  .image-container {
    margin: 10px;
  }
}

 

 

script.js

 

 

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 = 5;
const apiKey = 'b1W7HIIRrZOO4tZTNaVVBLRx7L7q810zjqEjxj3OAeY'
const apiUrl = `https://api.unsplash.com/photos/random/?client_id=${apiKey}&count=${count}`

function imageLoaded() {
    imagesLoaded++;
    if (imagesLoaded === totalImages) {
        ready = true;
        loader.hidden = true;
        count = 30;
        piUrl = `https://api.unsplash.com/photos/random/?client_id=${apiKey}&count=${count}`
    }
}

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) => {
        const item = document.createElement('a');
        setAttributes(item, {
            href: photo.links.html,
            target: '_blank',
        });

        const img = document.createElement('img');
        setAttributes(img, {
            src: photo.urls.regular,
            alt: photo.alt_desciption,
            title: photo.alt_desciption,
        })

        img.addEventListener('load', imageLoaded);

        item.appendChild(img);
        imageContainer.appendChild(item);
    });
}

//Get photos from Unsplah API
async function getPhotos() {
    try {
        const response = await fetch(apiUrl);
        photosArray = await response.json();
        displayPhotos();

    } catch (error) {
        // Catch Error hERE
    }
}

window.addEventListener('scroll', () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000 & ready) {
        ready = false;
        getPhotos();
    }
})

getPhotos()

Leave a Reply