Display images from Imgur

  • Owner: Smaug
  • Difficulty:
  • Type: Feature
  • Asigned to: Me
  • Date Created: Mar 18, 2017
  • Priority: Blocker
  • Status: New
  • Resolution: Unresolved

Tags: HTML CSS JavaScript API

Description

Create a web page that shows a grid of photo thumbnails or a photo feed. You can use any public API that returns photos; here are some ideas:

Imgur https://api.imgur.com/endpoints/gallery

Flickr: https://www.flickr.com/services/api/flickr.photosets.getPhotos.html

Google Image Search: https://developers.google.com/custom-search/json-api/v1/overview

There's a sample you can see at: Github, you can see a demo of the existing design here.

It only needs to work in chrome, so feel free to take advantage of modern features.

Attachments

  • This challenge does not have any attachments.

Technical Notes

You can use an endpoint like imgur's to retrieve images.

For example https://api.imgur.com/3/gallery/hot/viral/0.json will give you information about all the pictures in the first page of the frontpage of imgur.

This information will contain data like a title, links to the user who added it, urls for the image, a link to the gallery or comments, etc. It will vary by provider or endpoint.

Add JavasScript code to make a request to that endpoint, then use that information to create elements that display it, using the given template.

  • Should work in any size, responsive
  • You could use any JS framework or library, but vanillaJs is preferred
  • It only needs to work in the latest version of Chrome, no need to check on older browsers. So feel free to use modern APIs.

When you're done, push to your repo and submit your answer.

Publish your site for free on Github pages or Firebase Hosting

When you're done, push to your repo and submit your answer.

Source:

Procedure:

Requirements

To solve this, the following is recommended:

  • Github account, and basic git skills
  • JavaScript proficiency, AJAX, events, DOM manipulation

Look at our help section for more information about this.

Look at our help section for more information about this.

Coding

To create your answer follow this steps:

  • Fork the repo to your account, or download the zip file
  • Solve the ticket
  • Commit your code
  • Push your changes
  • Publish your version in Github Pages
  • Submit your response

Troubleshooting | Help

If you have need clarification with the project, files, or description, open an issue on github.

For questions with the platform, email us at [email protected]

For help with github or coding, consult our Learning and Resources page, where you will find information and links to tutorials and other content.