Code Challenge #16: Infinite Scroll Unsplash Gallery

Celý článek

Photos and media in general play a great part of websites and inefficient handling may lead to loss of site performance and ultimately, users. In this week's challenge, we will build a photo gallery which fetches random photos from Unsplash and displays them with an infinite scroll.

Missed out on last week's challenge? You can find it here, also, with the livestream attached.

The Challenge

In this challenge, you'll test your ability to utilize data from APIs as well as implementing an infinite scroll feature on a web page.

For this challenge, you are required to:

1. Fetch random images from Unsplash using the Unsplash API.
2. Display fetched images on the web page.
3. Build an infinite scroll which fetches and displays more photos as you scroll to the end of the page.

Here's what the completed challenge will look like.

You are provided with a sample Codepen to get you started with the challenge. This pen contains basic HTML, CSS, and Bulma classes, used for styling.

Fork this codepen to get started: https://codepen.io/Chuloo/pen/EreYEr

Requirements

The major requirement of this challenge is to build out the continuous image fetch option into the website. Also, you can complete this challenge with any tool technique, pattern or front-end framework.

Goals for this Challenge

On completing the challenge you should be able to:

• Handle HTTP requests from the client to an API server.
• Understand DOM manipulations.
• Learn to use template literals in JavaScript.
• Implement infinite scroll in frontend applications.

Resources & Hints

For this challenge, completing it with a frontend framework is more hassle-free and easier. Also, you require a free Unsplash developer account for unlimited access to Unsplash Images and API. Here are some tips to get you ahead:

• Looking to use React.js? You should check out the react-infinite-scroll-component package on npm.
• Visit the Unsplash documentation to navigate through using the simple API provided.
• Create a new Unsplash app to obtain an API key to be used.
• Flexbox should come in handy for positioning the fetched images.

Fork this Codepen to get started: https://codepen.io/Chuloo/pen/EreYEr

Community

Would you like feedback and reviews on your codepen after completing the challenge? You can:

• Post the link to your completed codepen in the comment section of this post.
• Share on Twitter using the hashtag #ScotchCodeChallenge and tag @Scotch_io if you may, and we'll be sure to see it.
• Want to boost your technical writing skills? Write about your solution on Scotch to share with our huge community!

Solution

The solution to this challenge will be solved live on Twitch by Chris on Wednesday, 20th February, you'll get a reminder if you hit the "Remind Me" button in the event here. Also, we'll send the solution and live stream link directly to your inbox if you subscribe here. Happy keyboard slapping!