We have come to exercise 12. In this exercise, we're going to use what you've learned about events. To create a very simple HTML course, we're going to have three pages. And we want the user to be able to navigate between those pages. So let me show you what we have set up. Okay, here in sublime, I'm showing three HTML pages.

They just have some basic information about some of the things we've learned concerning the DOM. Page, one HTML page to HTML and page three HTML. They're all connected to a CSS file that controls some of their display attributes. They're also connected to App dot j s. So that's already happened. You won't need to do that part. All right now in app dot j s. I've also already set some things up In order to make this happen, there's a few new pieces of information that you need to know.

And so I've already put those in here. Now first off, I've set up a function, I've called it in it. Now one of the first things you'll need to do is when the window loads, you'll need to call this initialize function. Now inside of the function, I've set up some variables already one is the pages variable. This is simply an array that contains the pages that I want to use as a part of this very simple course. page one dot html page two dot html on page three dot html.

Then I've created variable set it to window, that's just so I can use it throughout. Now in the next part, the next variable, there is a new piece of information which we have not talked about before. And that is the location object, location object. is part of the window. So you can see we access location object using syntax. Now location object has a few things that are a part of it.

One is an href attribute, the href attribute returns the URL of the page that is currently displaying. So let me jump back to our HTML page. And I'm going to move the page down a bit so we can see the top of the browser window. This is the href. This is what the href attribute would return from the location object as all that information there. Right, jumping back to sublime, so we get that information then notice what we do.

I do a split on the slash. So if we come back here, we see slashes throughout There's another one here. Whoops, and another one there throughout the URL. So we're splitting on the slash. Now remember, the split command causes a string to be converted to an array. And where it divides that string up into parts of the array is the character that we pass in.

So it's creating an array, dividing it using this slash character. So what we end up with is we end up with an array with several parts, this would be the first, second, third, those would be basically empty because there's not anything between those slashes there and so on. And so the very last item in the array is intro dot html for this particular example. So now you know that we're creating array out of that, look what we do to find the current page, we simply take that array and then we get the last item In the array by taking the length and subtracting one, that is our current page. So if we're on page one, that's what it's going to retrieve, page two, that's where that's what it's going to retrieve, and so forth. This allows us to figure out where we're at.

So we know when we navigate whether to go back to page one or two, page three, we know where to go basically. Finally, I created a page counter. Now the page counter is going to control what page were on and which page to move to. So we need to figure out what the page counter is currently, based upon this current page we just retrieved and we do that with a for loop. So we use the for loop to go through the pages array. And then we check to see if current page is equal to one of the items in the pages array.

If that is so then page counter equals I so it's either 01 too. Now, what you will need to do is using what is already set up, you'll add a function, one to go to the next page one to go to the previous page. Basically, you'll be using page counter to do that. And you'll be using the location object of the window. Now there is a method of location object called assign. So it'd be something like this when dot location when because I have a variable when set to the window, assign and then you simply pass in the page you want to load.

And so it could be this for example, you pass that in when dot location dot assign and it will display that page in the browser window. Okay, so that's what you're going to use in the next Previous functions that you set up, then you want to create some event listeners for two things, let me correct that misspelling there for a key press, and I want the left arrow key to go to the previous page, the right arrow key, go to the next page. And for a mouse click, now what is the mouse click going to be associated with? Well, let me open up one of these pages for you to show you. I'm going to copy the file path. paste that in and display it.

Let me move the window up. Again. Notice at the bottom of each page, we have these arrows. So you'll need to set it up so that the user can either click on one of these arrows to go to the next or previous page or they can press the right arrow key on their keyboard or to go to the next page or left arrow key on the keyboard to Go to the previous page. So that's what you need to accomplish. Go ahead and take the time to figure this out.

And then because this introductory portion of this exercise was so long, I'm going to put the solution in the next video. So start the next video when you are ready to look at the solution and compare it to what you were able to accomplish. All right, best of luck.