Hyper Island DDS task: Create an Instagram viewer

instagramviewer.md

Your task is to create an instagram viewer.

Protips:

• Documentation on getting JSON using jquery (http://api.jquery.com/jQuery.getJSON/)
• You should have a plugin installed in your browser to make browsing json prettier. For example, https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en

Part 1:

We are going to create an app that displays the most recent popular images.

1. Create an instagram account
2. Go to http://instagram.com/developer/endpoints/media/, and test out some of the endpoints in your browser. I recommend the '/popular' endpoint.
3. Create an html page
4. Include jquery in your page
5. Create a javascript file (ex: main.js), and link it to your html page. If you need help, refer back to how you did it on Monday.
6. Add some jquery that will fetch the most popular images from the instagram API. (note: Since this is a cross-domain request, you will need to use JSONP).
7. Display the images you fetched from the server on your page.

Final result:

Part 2:

We want to make it so you can search images by tag.

1. Find the instagram API endpoint that lets you get recent pictures by tag.
2. Add an textbox where you can type in the tag you want, and a button called "Search"
3. Make it so when you click the search button, it displays the images for that tag.

Final result:

Bonus:

1. Display the username/user picture/like count for every image. Example:

2. Make it so when you press 'enter', the search happens.