JavaScript AJAX Basics (retiring) AJAX and APIs Displaying the Photos

TzeYang Chew
TzeYang Chew
12,039 Points

i noticed that there is no photo.html file or the class selected in the given workspace.Can i know why it still works?

i noticed that there is no photo.html file or the class selected in the given workspace.Can i know why it still works?

Steve Gallant
Steve Gallant
14,876 Points

The photo.html file shown in the video was just for demonstration purposes to show what the upcoming js code was going to create.

1 Answer

Steven Parker
Steven Parker
182,491 Points

I'm not sure why you would be expecting to see a file by that name. There's nothing in the code that references it.

All the photos displayed by this project are fetched directly from flickr and then written into the div element in the index.html page.

The selected class is "photos" and that class is present on the div element.

TzeYang Chew
TzeYang Chew
12,039 Points

$(document).ready(function () { $('button').click(function () { $("button").removeClass("selected"); $(this).addClass("selected"); var flickrAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; var animal = $(this).text(); var flickrOptions = { tags: animal, format: "json" }; function displayPhotos(data) { var photoHTML = '<ul>'; $.each( data.items, function (i, photo) { photoHTML += '<li class="grid-25 tablet-grid-50">'; photoHTML += '<a href="' + photo.link + '" class="image">'; photoHTML += '<img src="' + photo.media.m + '"></a></li>'; }); photoHTML += '</ul>'; $('#photos').html(photoHTML); } $.getJSON(flickrAPI, flickrOptions, displayPhotos); }); }); // end ready

Hi why is the ul and li code not inside the index.html file but it still works?

Steven Parker
Steven Parker
182,491 Points

This script code creates a variable named "photoHTML" that contains the code for the ul with several li elements inside it that each contain links and images. Then all that code is added to the index.html page by this line:

    $('#photos').html(photoHTML); 

So those elements don't start out inside the index.html file, but they are added by this code.