3.1 Setting Up the List

In this lesson we're going to start applying the stuff that we've talked about in this course. We are going to write a page that's going to allow us to manipulate a list. So we're not getting away from this unordered list, but we are going to do some different things with it, such as add interactivity. In this session, we're going to focus more on the style, so that whenever we click on an item in the list, we are going to essentially activate it. Like for example, if you go to a Menu and click on something, you're activating that Menu item. Well, that's kind of what we're going to be doing. We're not going to add any special functionality such as going to a different page or anything like that, but we are going to be using events in order to make some of this work. Now, if you're not familiar with events, don't worry about it. It's fine because it's pretty easy actually, at least the events that we are going to be working with. So this will at least give you some exposure there. So let's take our style file, and let's copy and rename the copy to list, that HTML. As far as the title is concerned, let's not worry about a lesson number because we're going to use this file for multiple lessons. So let's call this manipulating lists. And I want to change some of the style because well, let's face it. This isn't the best thing to look at and I want it to be at least somewhat pleasing to the eye. So let's first of all change the font size because it is rather small, and we need something larger than the default, which is 1em, so let's do 1.3em. And yeah, I think that that will be fine, although let's see what 1.4 is gonna do. That's a little bit better. So we would go with that and we will leave that there. Let's also get rid of the bullet point. So let's set the list style on the l or the ul element as none. And let's also add some white space. Because these items are scrunched together, I want them to breathe a little bit. So let's give them a padding all the way around 5 pixels. Let's also set the cursor to pointer. Now the reason why is because we are going to be able to click on these things, and we want the user which is going to be us, to realize that they can click on these things. And so the best way to do that is to use the pointer. And so now let's change this blue because it's a little harsh, and let's use something a little softer. So I have already picked out a softer blue. It is that hex number there, and that's a lot easier on the eyes. And let's also change this to active, because I want to use the term active in that we are activating an element. So let's set the first item as active now. We're going to just work with the hard-coded HTML in this lesson, we're not going to dynamically create anything. We'll save that for a different lesson. But the first item is going to be selected, that's fine. And we can get started. So the first thing we want to do is set up the Click event for these li elements, because we want to be able to click on them and activate them. But whenever we activate one, we need to deactivate whichever one is currently active, but we'll get to that point. So let's first of all retrieve all of the li elements that we want to work with. And the best way to do that is with the query selector, all method, and for our selector, let's get all of the li elements inside of a ul element with the class of list. And then we want to set up the click EventListener. Now we can do this in several different ways, and I'm going to choose the more straightforward way. It's not necessarily the way that I would do this in a real application, but the way that I would do it in a real application can be a little confusing. So we're going to do this straightforward in that we are going to iterate over all of the elements that we just retrieved. And we are going to manually set up the click EventListener on each one. So let's create a variable called element, because when it comes to working with arrays or array-like structures I hate using indexing notation. So if I can get away from doing that as much as possible, I will. I mean, otherwise our codes going to look like this to where we have an index here and add EventListener. And if we were gonna use this some other place than once again, we would have li elements on it, you get the idea. This just makes code a little bit easier to read, easier to follow. And I'm all about that. All right, so we are going to call this method called add EventListener, and this is going to set up something that's going to listen for whatever event that we specify. In this case it is the click event and we we get to specify a function that is going to execute whenever this event takes place. Now if you are not familiar with events, an event is something that happens in the browser. And it could be caused by anything. It could be caused by the user, or it could be caused by something else inside of the document. In this case we want the user to click on these things, so that is what we're going to be listening for. And this e argument to this function is automatically passed, it's an event object that has information about the event that took place. And there's a property called target. This target property is the element that received the click event. So it's going to be one of the li elements, whichever one that we clicked on. So, this is where we would be able to manipulate the class list, and we will add the active class, just like that. So let's just briefly go over this again. We are retrieving all of the li elements that we're going to be working with. We are iterating over each one of those. We are setting up the click EventListener, so that we will set the act of class on that element that we click on. So let's go to the browser, if we click on the second item, we can see that, voila, we have just activated that but we still have this first item that we want to deactivate. So let's write a function that's going to do that, we'll just call it deactivate. And we can easily deactivate whichever one is currently active by using the query selector methods. So let's call this activated and document.querySelector. We want to select the li element that is inside of the ul element with a class of list and the li element needs a class of active. That's a lot to say. It's a lot simpler to type than it is to say. So we are going to select that element and then we are simply going to manipulate the class list. We are going to remove the active class, and that's going to work there. Now, we do need to call this function inside of our click EventListener. So we are going to first of all deactivate whichever one is currently active, and then we activate the one that we click on. So once again if we go back to the browser click, well, something is going wrong. So let's take a look at the console uncut reference error activate is not defined, and that's because I had a typo. So now, there we go. We can see that our list is at least responding to our click how ever we want it to. And in the next lesson we are going to add the ability to add items to this list. Of course, that means that we will need to dynamically create them using the create element method, and of course, then add it to the list.