It's time to take a look at the solution for exercise 12. Hopefully you were successful, but if not, we're going to walk through it together. So let me jump to sublime. This is the app.js file in the state, it was set up for you at the start of this exercise. So the first thing I want to do is I want to take care of the event that's going to call this initialize function. So I'm going to put that below the function that's been created.

Do window dot add eventlistener. And then the event I'm going to look for is load and I will call it simple as that. Now just for your information, there is also an event DOM content content loaded, that sometimes gets used for the same purpose. The main difference between those two is load wait until Not only is the HTML page loaded, but all of the assets are loaded as well. So for example, like images, and CSS files, and whatnot, DOM content loaded just waits till the HTML pages is ready to parse. So you're aware because you may see that event used.

Now we've got this initialize function being called. Let's go ahead and set up the rest. So first off, before I set up the handlers, I'm going to create two functions. One is going to handle going to the next page and then one is going to handle going to the previous page. So I'm just going to call these go next. And then I would like to include an If statement.

So, generally, the way we're going to go to the next page is we'll use the page counter variable, we will increment it. And then we'll use it to pull the page out of the pages array, and then set the location to the new page using the Assign method that I introduced to you when I introduced this exercise, so that's the process we're going to use. And so an easy way to do that would be simply increment page counter, and then set the new page using the location object dot assign method. However, what if the page counter goes too high? Do you want to catch that so that it prevents from causing an error? I do and so I'm going to put an if statement here to try to avoid that happening.

So I want to check this. Make sure That page counter is less than pages dot length minus one. If it's less than pages dot length minus one, then that means there is still a page I can go to, because this is paid, this would be equal to pages dot length minus one. So if our page counter is less than that, I can increment it and go to the next page. So now I would increment page counter. Whoops, forgot my semicolon, semicolon.

Now, I want to load the new page, I'm going to use the when variable dot location, that's the location object and then the assigned method. And I'm going to pass to the Assign method, the page from the pages array that is now equal to page counter. Oops. And close that with a semicolon. All right, that will take us to the next page. Let's go ahead and put a semicolon at the end of that expression.

Now let's create go previous. And I'll call this function go previous. Now the reason I'm creating a function, instead of just putting the code as a part of the listener, is because I want two different listeners to execute the same code. I want the listener that's for the key. Press analyst, enter this for the mouse click. I want both.

And so in order not to duplicate that same code, I'm creating it here. And then I will use it as a part of the listeners that I'll create next. Now once again, we want to check page counter. So we don't go to a number below zero, because that would give us an error because nothing would exist there. So I'm going to enter an if statement if page counter. And we'll simply check to see if it's greater than zero.

If it's greater than zero, we can decrement it and still get a page from the pages array. So let's decrement our page counter variable and then let's use the Assign method to load that page. The page counter variable points to in the pages array. All right, that looks pretty good. We've got our go next and our ago previous functions set up. Now we can go ahead and add our event listeners.

So let's first add the event listener for the key press. So when dot add event listener going to add it to the window object, I could add it to the document as well. I'm going to use key down as the event. There are three events associated with keys, key down key, press and key up, and I'll be using key down. Now we need to enter the function that's going to be executed. Well, you may be thinking, just enter going after go previous, but I can't quite do that yet.

I need to first check what key is pressed and then I know whether to call go next or go previous. So I will enter an anonymous function. Inside of parentheses, I'm going to put an E variable to capture the event object. press return, let's define it. So first and if statement. Let's check to see what the key code is.

Now I happen to already look this up. So I know that key code for the left arrow key is 37. I'm going to put a comment there for future reference. So that somebody's looking at this code later on when they'll that's the left arrow, arrow key. Then if the left arrow key is pressed, I want to call go previous. And you know, I'm going to go ahead and pass the event object.

Like I said, I'm not going to use it. But just in case in the future, I need to plus i will be calling these functions using the mouse click and In that case, instead of creating an anonymous function, I'm going to call them directly. And so I'm going to set these up to capture the event object anyway. So in that case, I'd want to pass this event object to the appropriate function as well. So that takes care of the left arrow key. Go previous.

Now, continue with our if statement. elsif. key code is equal to 39. And 39 is the right arrow key. So once again, I'm going to put a comment for that too. And then of course, we will call go next.

Put a semicolon at the end of that. event listener definition. All right, we have the one for the keystroke. Now, we need to add In event listener to that left and right arrow, well, so far I don't have anything in here to refer to the left and right arrow. So let's take a look at one of these pages. Notice that the ID for the left arrow simply left their ID is right arrow for that right arrow image.

So let's create a couple more variables just to pull those in. I'm just gonna call it left arrow, call the same thing is equal to document dot query. I'm going to use query selector I could use get element by ID. I just tend to favor query selector. So that will get us to the left arrow. Now let's grab the right arrow.

We enter the hash symbol, remember to indicate that it is an ID that we're after. We only have to do that with query selector, if we would have used get element by ID, we could have just entered left arrow or right arrow without the hash. Alright, now we have those two DOM nodes, and we can add an event listener to them. So down here below our key event listener. I'll do left arrow first, left arrow dot add event listener. And this is the click event.

Now the function we want to execute if it's the left arrow is go previous. So in this case, I don't need to do loops an anonymous function. I simply enter that the function that I've already defined up here that takes care of left arrow Let's do right arrow, add event listener, the event is click and go next. All right, those are our two handlers for the left arrow and the right arrow. We've got our handler for the, the keys. Everything's looking pretty good.

Let's go ahead and save this and try it out. So I'm going to start with page one. Let me just grab the file path to that. So I can open that to begin with. Now let's first see if we can go to the next page with the right URL. So I clicked there.

Sure enough agos, I can go back. Yes. Let's try the keys. Now. That's working great. Going back, working great.

How about if I press the key to go to the last page can I then go back using the arrow Sure enough, so those are working together as well. Which is nice and something that we needed to test. So it looks like things are working. Hopefully you were able to accomplish the same task, you may have done things a little bit differently. And that's one of the things that I really love about JavaScript is there are multiple ways to do things. If you did do it in a different way.

Hopefully you learn something from the way I did it as well. All right, let's move on to the next topic.