Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change to use Flickr API #3

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Change to use Flickr API #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69afc87
Change to use Flickr API
amidvidy Jan 22, 2016
c9e9b64
Update README
noidontdig Jan 28, 2016
4c2ceb3
Changing my javascript
kpeltzer Feb 4, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 20 additions & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,81 @@
#Project 5 - Instagram Searcher
#Project 5 - Flickr Searcher
![Imgur](http://i.imgur.com/P71EYPE.png)


##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

***
##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:

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


###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.
***

##Grading Criteria
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.



8 changes: 2 additions & 6 deletions doNow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

![Imgur](http://i.imgur.com/caISxXV.png)
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.
62 changes: 31 additions & 31 deletions starter_code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!--CSS goes here-->
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/instagram_client.js"></script>
<script src="js/script.js"></script>
<title>Instagram API Searcher</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="container">
<h1>Instagram Search</h1>
<hr/>
<div class="well well-lg">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!--CSS goes here-->
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/flickr_client.js"></script>
<script src="js/script.js"></script>
<title>Flickr API Searcher</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="container">
<h1>Flickr Search</h1>
<hr/>
<div class="well well-lg">

<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-8">
<input id="search-query" class="form-control" placeholder="search for..."/>
</div>
<div class="col-sm-2">
<button type="submit" id="search-btn" class="btn btn-primary btn-block">Search</button>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<hr/>
<div id="search-results">
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-8">
<input id="search-query" class="form-control" placeholder="search for..."/>
</div>
<div class="col-sm-2">
<button type="submit" id="search-btn" class="btn btn-primary btn-block">Search</button>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<hr/>
<div id="search-results">
</div>

</div>
</body>
</div>
</body>


</html>
63 changes: 63 additions & 0 deletions starter_code/js/flickr_client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
}
);
}
48 changes: 0 additions & 48 deletions starter_code/js/instagram_client.js
View file
Open in desktop

This file was deleted.

5 changes: 5 additions & 0 deletions starter_code/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
// YOUR CODE GOES HERE
var clientID = "REPLACE ME WITH CLIENT ID";

$(document).ready(function() {
//All my code modifications
});