diff --git a/README.md b/README.md
index b5513fc..f803f09 100644
--- a/README.md
+++ b/README.md
@@ -1,41 +1,40 @@
-#Project 5 - Instagram Searcher
+#Project 5 - Flickr Searcher
-##Do Now
+##Do Now
Begin this session by completing the [Do Now](doNow.md) activity.
##Scope
-You have just been hired by Social Media, But Better! LLC. For your first project you will be creating a webapp that uses the Instagram API to display photos tagged with anything the user types in. Your manager would like to test your skills. She has given you starter code with plenty of comments for completion. You have been given one week to make a fully functioning webapp.
+You have just been hired by Social Media, But Better! LLC. For your first project you will be creating a webapp that uses the Flickr API to display photos tagged with anything the user types in. Your manager would like to test your skills. She has given you starter code with plenty of comments for completion. You have been given one week to make a fully functioning webapp.
##Project Criteria
-Your Manager has laid out the following requirements for the project:
+Your Manager has laid out the following requirements for the project:
* The webapp will display 9 thumbnails of photos related to anything the user types in
* The user must be able to click the search button to display related thumbnails
* On any subsequent search, the system shall clear the prior results and show images reflecting results from the new search query.
* If the user clicks a "reset" button, the system shall clear the results of all thumbnails and clear the search bar of any text
-* On mouseover, the instagram username shall display over the thumbnail image
##Learning Objectives
By the end of this project the employee will be able to...
-* Register their application with Instagram to obtain a client id
-* Get information from Instagram using its API
+* Register their application with Flickr to obtain a client id
+* Get information from Flickr using its API
* Append images to and HTML page
* Empty content from a selected div
##References/Tools
-* [Instagram Developers Guide](https://instagram.com/developer/)
+* [Flickr Developers Guide](https://www.flickr.com/services/developer/api/)
+
-
##Vocabulary
* Append
* Empty
* Index
-* Mouseover
+* Mouseover
* Endpoint
* Callback
@@ -43,7 +42,7 @@ By the end of this project the employee will be able to...
##Instructions
You are given Starter Code for this project which you must clone into your own workspace.
-You will notice there are two js files. `instragram_client.js` is the work provided to you and `script.js` is the work you must complete. In order to understand what components you must build in script.js you must carefully read and understand the contents of instagram_client.js.
+You will notice there are two js files. `flickr_client.js` is the work provided to you and `script.js` is the work you must complete. In order to understand what components you must build in script.js you must carefully read and understand the contents of flickr_client.js.
####In order to make this webapp functional to the standards set out by your manager, you will need to complete the tasks below:
@@ -51,18 +50,18 @@ You will notice there are two js files. `instragram_client.js` is the work provi
###2) Authentication
-Authenticate your webapp by placing the client id you acquired in the [Do Now](doNow.md) into your code. Guidance on the process can be found in the [Instagram Developers Guide](https://instagram.com/developer/).
+Authenticate your webapp by placing the client id you acquired in the [Do Now](doNow.md) into your code. Guidance on the process can be found in the [Flickr Developers Guide](https://www.flickr.com/services/developer/api/).
###2) script.js
-In this file you will need to ready your document in order make the API call based on user input. 10 images will appear as thumbnails as a result of evaluating the results of the user input.
+In this file you will need to ready your document in order make the API call based on user input. 10 images will appear as thumbnails as a result of evaluating the results of the user input.
###3) Reset!
Add a button named "reset" to your webapp. This button shall clear all thumbnail images and the search bar of any text from the previous search.
-###Bonus)
-Your Manager has offered a stipend of $500 for each of the bonus requirements listed below:
+###Bonus)
+Your Manager has offered a stipend of $500 for each of the bonus requirements listed below:
-* On mouseover, the Instagram username shall display over the thumbnail image
+* On mouseover, the Flickr username shall display over the thumbnail image
* If the user clicks on a thumbnail, an overlay shall show with a larger version of the image, as well as the caption and the number of “likes” (if any) the image has received.
***
@@ -70,16 +69,13 @@ Your Manager has offered a stipend of $500 for each of the bonus requirements li
Your manager will be grading your capability on this project based on [this rubric](/assessment.md).
##How to Submit
-The final code for this project must be pushed back up to your repo on GitHub. **Then share the link to your repo at the project submission link found in the header of the Daily Session Document (bit.ly/ScriptEd).**
+The final code for this project must be pushed back up to your repo on GitHub. **Then share the link to your repo at the project submission link found in the header of the Daily Session Document (bit.ly/ScriptEd).**
-To push to GitHub run the following commands in your terminal:
-`git status`
-`git add .`
-`git commit -m "example comment"`
+To push to GitHub run the following commands in your terminal:
+`git status`
+`git add .`
+`git commit -m "example comment"`
`git push origin master`
##Homework
Instructor will assign homework based on progress in class.
-
-
-
diff --git a/doNow.md b/doNow.md
index 7ac683f..7ed7527 100644
--- a/doNow.md
+++ b/doNow.md
@@ -1,8 +1,4 @@
#[Do Now] Project 5 - Instagram Searcher
-Navigate to the [Instagram Developers Guide](https://instagram.com/developer/) to register a new client.
+Navigate to the [Flickr Developers Guide](https://www.flickr.com/services/apps/create/) to register a new client.
-In order to register your app you will need to sign in to your instagram account. If you do not have an Instagram account please create one first.
-
-When prompted for a Website URL and Redirect URL you can provide the link to your GitHub profile.
-
-
+In order to register your app you will need to sign in to your Yahoo! account (they own flickr). If you do not have a Yahoo account please create one first.
diff --git a/starter_code/index.html b/starter_code/index.html
index 3051767..c25b2c4 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -1,38 +1,38 @@
-
-
-
-
-
-
-
- Instagram API Searcher
-
-
-
-
-
Instagram Search
-
-
+
+
+
+
+
+
+
+ Flickr API Searcher
+
+
+
+
+
Flickr Search
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
diff --git a/starter_code/js/flickr_client.js b/starter_code/js/flickr_client.js
new file mode 100644
index 0000000..9f1029a
--- /dev/null
+++ b/starter_code/js/flickr_client.js
@@ -0,0 +1,63 @@
+// WRITE YOUR CODE IN script.js, NOT HERE
+
+// This function searches for photos on flickr for photos
+// that match the search query.
+//
+// The first argument should be the search query entered by
+// the user. The second argument should be the number of results
+// you want from the API (start with 1 to make it easier).
+//
+// The third argument should be a function to run when results
+// are returned from the Flickr API. These are known as
+// "callbacks". The function should expect to receive an array
+// of results as the first argument, so something like:
+//
+// function(results) {
+// // do something
+// }
+function searchFlickr(clientID, query, count, callback) {
+ // see https://www.flickr.com/services/api/
+ var method = "flickr.photos.search";
+
+ callFlickrAPI(clientID, method, {
+ 'text': query, // searches title, description & tags
+ 'per_page': count,
+ 'page': 1,
+ 'content_type': 1,
+ 'sort': 'relevance'
+ }, function(response) {
+ var photos = response.photos;
+ console.log(photos);
+ callback(photos);
+ });
+}
+
+// This function is used by the searchFlickr() function
+// to actually call the API. It's broken out here to make
+// that function easier to read, but also in case we
+// want to eventually call other endpoints.
+function callFlickrAPI(clientID, method, params, callback) {
+ var endpoint = 'https://api.flickr.com/services/rest/?method=' + method + "&";
+ params = $.extend({
+ 'api_key': clientID,
+ 'format': 'json',
+ 'nojsoncallback': 1,
+ 'extras': 'url_m,url_s'
+ }, params);
+
+ var requestURL = endpoint + $.param(params);
+
+ console.log("callFlickrAPI: " + requestURL);
+
+ $.ajax(requestURL)
+ .done(
+ // this block gets called if the API call works or fails!
+ function(response) {
+ if (response.stat !== "ok") {
+ alert(response.message);
+ } else {
+ callback(response);
+ }
+ }
+ );
+}
diff --git a/starter_code/js/instagram_client.js b/starter_code/js/instagram_client.js
deleted file mode 100644
index 9096746..0000000
--- a/starter_code/js/instagram_client.js
+++ /dev/null
@@ -1,48 +0,0 @@
-// WRITE YOUR CODE IN script.js, NOT HERE
-
-// This function searches for photos on instagram with tags
-// that match the search query.
-//
-// The first argument should be the search query entered by
-// the user. The second argument should be the number of results
-// you want from the API (start with 1 to make it easier).
-//
-// The third argument should be a function to run when results
-// are returned from the Instagram API. These are known as
-// "callbacks". The function should expect to receive an array
-// of results as the first argument, so something like:
-//
-// function(results) {
-// // do something
-// }
-function searchInstagram(clientID, query, count, callback) {
- // first we make the search query into a tag
- var tag = query.toLowerCase()
- .replace('#', '') // we don't want to send #
- .replace(' ', ''); // no spaces in tags
-
- // see https://instagram.com/developer/endpoints/tags/
- var endpoint = '/tags/' + tag + '/media/recent';
-
- callInstagramAPI(clientID, endpoint, {'count':count}, callback);
-}
-
-// This function is used by the searchInstagram() function
-// to actually call the API. It's broken out here to make
-// that function easier to read, but also in case we
-// want to eventually call other endpoints.
-function callInstagramAPI(clientID, endpoint, params, callback) {
- endpoint = 'https://api.instagram.com/v1' + endpoint;
- params = $.extend({'client_id':clientID}, params);
- $.ajax(endpoint, {'data':params, 'dataType':'jsonp'})
- .done(
- // this block gets called if the API call works or fails!
- function(response) {
- if (response.meta.error_message) {
- alert(response.meta.error_message);
- } else if (response.data) {
- callback(response.data);
- }
- }
- );
-}
diff --git a/starter_code/js/script.js b/starter_code/js/script.js
index cd23806..5edded1 100644
--- a/starter_code/js/script.js
+++ b/starter_code/js/script.js
@@ -1 +1,6 @@
// YOUR CODE GOES HERE
+var clientID = "REPLACE ME WITH CLIENT ID";
+
+$(document).ready(function() {
+ //All my code modifications
+});