rperry99 / infinite-scroll

This is a project from the Zero to Mastery 20 Javascript projects course. This in the Infinite Scroll project.

Home Page:https://russ-infinite-scroll.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Infinite Scrolling Website

This project was for me to learn how to create a website that will continously load photos as you scroll.

This project is from Zero to Mastery: Jacascript Web Projects: 20 Projects to Build Your Portfolio. This is project 2 / 20.

Thoughts

This is a pretty useful skill to learn I think. A lot of websites today use infinite scrolling, or lazy loading, to constantly show new items / elements to a user. This eliminates the need for pagination and can make browsing easier.

Live Version

You can view a live version here. If you would like to run this locally, you will need an API key, which you can get for free from the steps below.

You can view the full list of project from this course here.

Steps to get this project up and running locally for you:

  1. Go to Unsplash's Developer Page
  2. Click on "Setting Up an Application" Unsplash Docs
  3. Click on the "Join" link under "Creating a Developer Account". Get Access
  4. Either create an unsplash account (it's free) or sign in to an existing account.
  5. Once your account is created, you will be taken to your applications page. Click "New Application" New App
  6. You will need to agree to the API Use and Guidelines.
  7. Enter in a name and description for the application and click "Create Application. App Info
  8. Once you enter your info, you will be taken to your app's page. Scroll down until you see "Keys" and your key will be here. Copy the "Access Key". Keys
  9. Go to the project folder and open the "app.js" file.
  10. Replace the value of the "apiKey" variable with your api key wraped in quotes and save. The Code to change
  11. Now you can run the project and see it work!

About

This is a project from the Zero to Mastery 20 Javascript projects course. This in the Infinite Scroll project.

https://russ-infinite-scroll.netlify.app/


Languages

Language:JavaScript 62.5%Language:CSS 21.6%Language:HTML 15.9%