Good news, this job is definitely doable.

The designers html and CSS look great.

And Flicker's public photo feed will give us

all the information we need to build this project.

It's time to start programming.

Feel free to launch the workspace on this page, to follow along.

The first thing we need to do is clean up this html.

I'm going to delete the UL tag in here.

It's just full of temporary html that the designer gave us.

We'll use AJAX to put new information in there.

We know we're going to use jQuery, so we need to link to the jQuery library.

I'm gonna use jQuery's own content delivery network,

so I'll add a script tag to link there.

It's a good idea to put the programming

for this project into a separate java script file.

That way we could reuse it on other pages easily.

I'll create a new file and call it flickr.js

and link to it in the head of this webpage.

[BLANK_AUDIO]

As I mentioned in the last stage, when you put your jQuery code near the top of

your html, in this case it'll load through the flickr.fs file at the top of our page.

You need to use a special function called $(document).ready, to make

sure your JavaScript code doesn't run before the html is fully loaded.

[BLANK_AUDIO]

We haven't yet added any of the programming

that's going to help us load Flickr photos.

We'll do that now.

Let's look at the mock up again.

So when one of the buttons is clicked, the photos load, okay?

The designer also told us that when

a visitor clicks a button, it changes appearance.

We can do that by adding a class to the Click Button tag.

jQuery makes this easy.

First, let's add what's called an event handler, so

that when a button is clicked, our program runs.

This code is jQuery's way of selecting all of the buttons on this page.

We only have the three buttons in our html.

The ones labeled cat, dog, and moose.

jQuery's now selected the buttons on the page, and

you can run additional commands or functions on each element.

In this case, let's add the click method.

jQuery click method is another helper function.

It adds a click event handler to each of the buttons.

In other words, that bit of code lets us add a

function that runs each time one of the buttons is clicked.

Next we'll add an anonymous function.

[BLANK_AUDIO]

All of the programming that we put inside here,

will run whenever one of the buttons is clicked.

This is a callback function for the click event.

The first thing, is we want to highlight a click button.

We can do this by using jQuery to add a new class on the clicked button.

The $this, is a way to indicate

the element that's responding to the click event.

In other words, $this refers to the button the user

clicks, and only that button, not any of the other ones.

Let's see how this works.

Cool, but what happens when I click another button?

It highlights 2, but the other doesn't change back.

Okay, let's fix that.

What we could do is we could remove the class

selected from all of the buttons, when one button is clicked.

The code here needs to go before the other code, otherwise the user would

click a button, it would be highlighted,

then immediately after the class would be removed.

Let's see how this works.

[BLANK_AUDIO]

Great, each button highlights when clicked.

All right, it's time to move on to the

next step, actually programming the AJAX request and callback.