Skip to content

Commit 69afc87

Browse files
amidvidyamidvidy
committed
Change to use Flickr API
1 parent da89aa5 commit 69afc87

6 files changed

Lines changed: 122 additions & 109 deletions

File tree

‎README.md‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,82 @@
1-
#Project 5 - Instagram Searcher
1+
#Project 5 - Flickr Searcher
22
![Imgur](http://i.imgur.com/P71EYPE.png)
33

44

5-
##Do Now
5+
##Do Now
66
Begin this session by completing the [Do Now](doNow.md) activity.
77

88
##Scope
9-
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.
9+
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.
1010

1111
##Project Criteria
12-
Your Manager has laid out the following requirements for the project:
12+
Your Manager has laid out the following requirements for the project:
1313

1414
* The webapp will display 9 thumbnails of photos related to anything the user types in
1515
* The user must be able to click the search button to display related thumbnails
1616
* On any subsequent search, the system shall clear the prior results and show images reflecting results from the new search query.
1717
* If the user clicks a "reset" button, the system shall clear the results of all thumbnails and clear the search bar of any text
18-
* On mouseover, the instagram username shall display over the thumbnail image
18+
* On mouseover, the flickr username shall display over the thumbnail image
1919

2020

2121
##Learning Objectives
2222
By the end of this project the employee will be able to...
2323

24-
* Register their application with Instagram to obtain a client id
25-
* Get information from Instagram using its API
24+
* Register their application with Flickr to obtain a client id
25+
* Get information from Flickr using its API
2626
* Append images to and HTML page
2727
* Empty content from a selected div
2828

2929
##References/Tools
30-
* [Instagram Developers Guide](https://instagram.com/developer/)
30+
* [Flickr Developers Guide](https://www.flickr.com/services/developer/api/)
31+
3132

32-
3333
##Vocabulary
3434

3535
* Append
3636
* Empty
3737
* Index
38-
* Mouseover
38+
* Mouseover
3939
* Endpoint
4040
* Callback
4141

4242
***
4343
##Instructions
4444

4545
You are given Starter Code for this project which you must clone into your own workspace.
46-
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.
46+
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.
4747

4848
####In order to make this webapp functional to the standards set out by your manager, you will need to complete the tasks below:
4949

5050
###1) Clone this repo into your own Cloud9 workspace
5151

5252

5353
###2) Authentication
54-
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/).
54+
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/).
5555

5656
###2) script.js
57-
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.
57+
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.
5858

5959
###3) Reset!
6060
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.
6161

62-
###Bonus)
63-
Your Manager has offered a stipend of $500 for each of the bonus requirements listed below:
62+
###Bonus)
63+
Your Manager has offered a stipend of $500 for each of the bonus requirements listed below:
6464

65-
* On mouseover, the Instagram username shall display over the thumbnail image
65+
* On mouseover, the Flickr username shall display over the thumbnail image
6666
* 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.
6767
***
6868

6969
##Grading Criteria
7070
Your manager will be grading your capability on this project based on [this rubric](/assessment.md).
7171

7272
##How to Submit
73-
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).**
73+
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).**
7474

75-
To push to GitHub run the following commands in your terminal:
76-
`git status`
77-
`git add .`
78-
`git commit -m "example comment"`
75+
To push to GitHub run the following commands in your terminal:
76+
`git status`
77+
`git add .`
78+
`git commit -m "example comment"`
7979
`git push origin master`
8080

8181
##Homework
8282
Instructor will assign homework based on progress in class.
83-
84-
85-

‎doNow.md‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
#[Do Now] Project 5 - Instagram Searcher
2-
Navigate to the [Instagram Developers Guide](https://instagram.com/developer/) to register a new client.
2+
Navigate to the [Flickr Developers Guide](https://www.flickr.com/services/apps/create/) to register a new client.
33

4-
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.
5-
6-
When prompted for a Website URL and Redirect URL you can provide the link to your GitHub profile.
7-
8-
![Imgur](http://i.imgur.com/caISxXV.png)
4+
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.

‎starter_code/index.html‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
5-
<!--CSS goes here-->
6-
<script src="//code.jquery.com/jquery.min.js"></script>
7-
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
8-
<script src="js/instagram_client.js"></script>
9-
<script src="js/script.js"></script>
10-
<title>Instagram API Searcher</title>
11-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
12-
</head>
13-
<body>
14-
<div class="container">
15-
<h1>Instagram Search</h1>
16-
<hr/>
17-
<div class="well well-lg">
3+
<head>
4+
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
5+
<!--CSS goes here-->
6+
<script src="//code.jquery.com/jquery.min.js"></script>
7+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
8+
<script src="js/flickr_client.js"></script>
9+
<script src="js/script.js"></script>
10+
<title>Flickr API Searcher</title>
11+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
12+
</head>
13+
<body>
14+
<div class="container">
15+
<h1>Flickr Search</h1>
16+
<hr/>
17+
<div class="well well-lg">
1818

19-
<div class="row">
20-
<div class="col-sm-1"></div>
21-
<div class="col-sm-8">
22-
<input id="search-query" class="form-control" placeholder="search for..."/>
23-
</div>
24-
<div class="col-sm-2">
25-
<button type="submit" id="search-btn" class="btn btn-primary btn-block">Search</button>
26-
</div>
27-
<div class="col-sm-1"></div>
28-
</div>
29-
</div>
30-
<hr/>
31-
<div id="search-results">
32-
</div>
19+
<div class="row">
20+
<div class="col-sm-1"></div>
21+
<div class="col-sm-8">
22+
<input id="search-query" class="form-control" placeholder="search for..."/>
23+
</div>
24+
<div class="col-sm-2">
25+
<button type="submit" id="search-btn" class="btn btn-primary btn-block">Search</button>
26+
</div>
27+
<div class="col-sm-1"></div>
28+
</div>
29+
</div>
30+
<hr/>
31+
<div id="search-results">
32+
</div>
3333

34-
</div>
35-
</body>
34+
</div>
35+
</body>
3636

3737

3838
</html>

‎starter_code/js/flickr_client.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
// WRITE YOUR CODE IN script.js, NOT HERE
2+
3+
// This function searches for photos on flickr for photos
4+
// that match the search query.
5+
//
6+
// The first argument should be the search query entered by
7+
// the user. The second argument should be the number of results
8+
// you want from the API (start with 1 to make it easier).
9+
//
10+
// The third argument should be a function to run when results
11+
// are returned from the Flickr API. These are known as
12+
// "callbacks". The function should expect to receive an array
13+
// of results as the first argument, so something like:
14+
//
15+
// function(results) {
16+
// // do something
17+
// }
18+
function searchFlickr(clientID, query, count, callback) {
19+
// see https://www.flickr.com/services/api/
20+
var method = "flickr.photos.search";
21+
22+
callFlickrAPI(clientID, method, {
23+
'text': query, // searches title, description & tags
24+
'per_page': count,
25+
'page': 1,
26+
'content_type': 1,
27+
'sort': 'relevance'
28+
}, function(response) {
29+
var photos = response.photos;
30+
console.log(photos);
31+
callback(photos);
32+
});
33+
}
34+
35+
// This function is used by the searchFlickr() function
36+
// to actually call the API. It's broken out here to make
37+
// that function easier to read, but also in case we
38+
// want to eventually call other endpoints.
39+
function callFlickrAPI(clientID, method, params, callback) {
40+
var endpoint = 'https://api.flickr.com/services/rest/?method=' + method + "&";
41+
params = $.extend({
42+
'api_key': clientID,
43+
'format': 'json',
44+
'nojsoncallback': 1,
45+
'extras': 'url_m,url_s'
46+
}, params);
47+
48+
var requestURL = endpoint + $.param(params);
49+
50+
console.log("callFlickrAPI: " + requestURL);
51+
52+
$.ajax(requestURL)
53+
.done(
54+
// this block gets called if the API call works or fails!
55+
function(response) {
56+
if (response.stat !== "ok") {
57+
alert(response.message);
58+
} else {
59+
callback(response);
60+
}
61+
}
62+
);
63+
}

‎starter_code/js/instagram_client.js‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎starter_code/js/script.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
11
// YOUR CODE GOES HERE
2+
var clientID = "REPLACE ME WITH CLIENT ID";
3+
4+
$(document).ready(function() {
5+
// your code here
6+
});

0 commit comments

Comments
 (0)