Programming Problem (45 pts)

Flickr, the photo-sharing site, has a JSONp API that lets you search its public photos. Well describe a simplified version of the API, but the real one is not too much more complicated. Sending the following URL to Flickr:

https://api.flickr.com/services/rest/?method=flickr.photos.search

asks for information, in JSON (format=json) about three images (per page=3) of flowers (tags=flowers). Flickr sends back the following script:

jsonFlickrApi({"photoSearch":

{"status":"ok",

"photo": [

{"id":"34211804241","server":"2811","title":"Double Star"},

{"id":"33532240793","server":"4171","title":"summer in saint-jean"},

{"id":"34301555576","server":"2880","title":"2017-04-29_06-57-39"}

]

}})

Notice the name of the callback function is always jsonFlickrApi(), unlike the Yahoo weather API which let us specify whatever callback function name we wanted.

We can construct the URLs of the images themselves from this data. For instance, at the following URL, we find the first flower image:

https://staticflickr.com/2811/34211804241_m.jpg

Notice we ask for a photo from their server number 2811, with the name of the photo given by connecting its id with m.jpg, which means send a medium-sized JPEG image.

Lets use this API to build an app, which lets the user enter a keyword, does the search for three public photos related to the keyword, and then displays them on the Web page. Well ignore the CSS. Here is the file threePix.html:

Get three images from Flickr:

To complete the functionality of the app, write the callback function jsonFlickrApi, and also the button action function used in the HTML on the previous page.

In case you need it, the following example shows how you specify the source of an image in Javascript. We are not suggesting that you should include this bit of code verbatim in your answer.

HTML:

Javascript: flwr = document.getElementById("flower"); flwr.src="flower1.jgg";