[MUSIC] Welcome to the first lesson in this module. What we're gonna do in this lesson is add some more functionality to the editor as you might imagine. And what we're going to add is the ability for users to create new documents. So far, we've just been editing a single document, and everyone who uses the page has had to edit the same document. So it's obviously really useful to be able to have lots of different documents and choose which one you want to edit. First of all, let's have a quick look at the wire frame that we're gonna use to do that. Because the first step, which we're gonna complete in this lesson, is adding a simple button to the navigation bar, which then caused an event listener defined on the template. All right. Here's the wire frame, and you can see I've got all the bits that are on my site. You'll have a better login button, but you're got the brand and then the new thing I'm going to add, which is this new button, and then list of editors, editor and preview. It's all there, so that shows me where I'm going to add my button to create new documents. And what I want to do first is get that navigation bar and take it from just being static code, sitting in the body tag, and I'm going to move it into a template so that it's much easier for me to assign events and helpers to it. Here's the HTML page where template's defined, and I'm going to grab the code from the navigation bar, take it out of the body tag and drop it down here. I'll put it above the templates, cuz in terms of the layout, it does actually appear at the top of the other templates. And the name's gonna be navbar, that's no problem. And there's the navigation code. And then I just have to. Drop it in. To the body, like that, save. With a bit of luck, if my app is running, that's good. If I now look at it, it should look exactly as it did before, perfect. But what I'm going to do now is add some more code to that navigation bar so that we can have a plus button, and I was thinking it would be quite nice to have sort of a little icon for that plus sign instead of maybe typing in a plus sign. And again, bootstrap has a set of icons that it comes with, which we can use for doing that. And if we go to the bootstrap components page, you can see that these are all the available icons. And the one I'm gonna use, even though there's all these fun ones there, and you can kinda use your own one. I'm just gonna use the plus sign, so this one here. Okay, so how do we use them? Well we scroll down below and it should give us a bit of boiler plate code we can just pop in there. And there's a few caveats there that's worth making yourself aware of. But the basic idea is we can grab it like that. And then pop it into the navigation bar template. And it's going to be next to the brand. And, in case I want to add more buttons later I'm actually going to make it part of a little functional navbar there. And in the list item. So, I don't know if you remember back in the second course, if you took it, we did some videos on accessibility. We sort of tried to look at a web page with a screen reader, and we found out that if you structure your page properly, then it's much easier for people to read your page, if they don't have, full vision, or something like that, and they have to get the machine to read the page to them. And an example of good structure is using list elements in your HTML to sort of write lists of links and lists of functions, and because I'm adding a function where, there's gonna be a button they can click on, I'm going to put in a list. So here I've got my list element, and I've pasted in that boilerplate code from, that makes the icon. The icon I want is called plus and the class, this is navbar nav. Okay. Let's just see how that looks. Okay, and finally I think I'm gonna make it into a link. And put a blank. Oops. Okay, so I have just created the correct structure to add the plus icon and then I am going to make just a comment to say new doc, we call that document. Whoops, so that has appeared in the wrong place, let's put that inside the a tag. All right, so let's just sort of lay out this code a bit more neatly, so it's really obvious what's going on. So I've got span, then I've got some text. And then I've got the end of the a and the end of the l. So that's really clear now, so I've basically got a ul and an li. And a link, which starts with the icon and then has some text. So let's have a look at that. Okay, you see how that looks? I've got a nice plus sign and then new document. And the final thing is to add a special class to the link so that it can be hooked into an event listener on the template. Let's put that in, so we put a class in there, js-add-doc. Right, so that would be something that I can bind an event listener onto, and I do that in my helper, sorry, event listeners, so let's just try and organize this a little bit. So these are all helpers. And then I'm gonna put some events, so I'll label it up to say. Events. Now, later in this module, we're gonna go back through this code and sort of reorganize it into folders and make it much more clear. For the moment, we'll stick with this big monolithic file. I do template, then the name of the template, which is navbar events. And I pass it a property set and remember I have to say what type of event, and then the class of things that I want to bind it to. And event-prevent-default. Right and then console log add a new doc. Okay just to check that it's working. Let's just check that code again in case we forgotten how to do events. So template navbar, the name of the template and we're adding events. And we're saying when someone clicks on anything in that template with the class of js-add-doc, I want you to call this function, passing the data about the event. And if we just double check that. So here we are, there's the navbar template. There is the a tag with the class, so basically it's binding an event listener to that a tag which will trigger. And let's just save that one. Hopefully it will give us another reload, and then you can see in the console that it's printing out a new doc. I've successfully added a nicely formatted add button to my navigation bar, and I have hooked an event listener onto that, so that I can then respond to the user's request to add a document. And in the next lesson, we're gonna sort of continue building out on that. And see how we can then actually create a document in the database when they click that button. [MUSIC]
