Flickr Image Search Web App

Student project utilized Javascript, Flickr API, and Bootstrap to create Flickr search grid

Javascript, External API, Bootstrap

Overview

This class project was part of the Web Development Certificate program at Seattle University. Original assignment details below:

Assignment

An assignment to create an asynchronous search using Javascript and the Flickr API.

This assignment asks you to accept a query from the user and use that query to search Flickr in order to show a grid of images that were returned. You are provided with an index.html file that provides a minimal interface for your work. The page also pulls in jQuery and Bootstrap for you, so those are at your disposal.

Utilizing principles of progressive enhancement, you must activate the form so you may capture the input from the user and send it along to Flickr by making a call to the Flickr API. Upon successful response from the Flickr API, you will then display a grid of the images that have been found. Using the effect or tool of your choice, you will then provide some way for users to view larger versions of the images.

Base Requirements:

To successfully complete this assignment, you must fulfill the following requirements:

  • Create an event handler that will accept user input through the provided form and turn that input into a request to the Flickr API.
  • Display the images returned from the Flickr API as a grid on the page (or in a suitably appealing arrangement that matches your creative ambition).
  • Display the following info around the images your script finds:
    • title
    • date_taken
    • description
    • author
    • link back to the Flickr page for this image
  • When users re-do the search, the previous images should be removed, and the new images should fill the same space.
  • Project TypeStudent Project
  • RoleFront End Web Development
  • ToolsCode Editor, GitHub
  • DeliverablesWorking App
Try App
Interested in more details?

Learn more about this project

Try App