 Hello, this is Christian, welcome to the video. In this video, I'm going to show you how to create handlebars helper functions in the back and using Node.js in Express. So here in the IDE, I'm going to go into Unit 6. And let's run this application first. Open up the files. I'm going to run in the terminal. And so here we go, Noman. I'm going to press and control click this. And it should load somewhere. OK, let's go to my browser. I'm not showing that, maybe it's a different browser. OK, so I think it's a local whole course 8, 9, 0, 0. All right, so here we go. Now in the previous video in the portfolio tab, I wanted to number these from 1, 2, 3, 4, and so forth. I showed you to do that and didn't work the way we wanted because it's a zero based index. So it will always print 0, 1, 2, and 3 instead. We want this to be named starting from 1 to n. So in the code, if you remember, let's go off this terminal. Go to the views and the portfolio.hbs here. So right before the title, I wanted to display the index here and the dot followed by the title. And this works fine, except the problem was that it always starts from 0 and not 1. So ideally, you want to say 1 here. And to do this, it's very simple in like Vue.js or Angular or React. You just put that plus 1 and it would work fine. But the handlebars engine doesn't do that automatically for you. So you have to write a function to do that. And so normally you'd be very tempted to do this, right? If you do that, it doesn't work. There is a math library that you can overwrite. Also create your own function to do that. But for us, we're going to write a function to produce something like this to render that to the browser. Just to show that doesn't work, if I save that, if I go back to the browser and refresh it, you'll see that it should cause an error. It doesn't know what that is. So it has a parsing error. So let's go and fix how we can do this. So what we can do is we go to the index, the application. And you also notice that I have updated my Express.js version. And this body parser here is now deprecated. So if you're using Express version 4.16.1 or higher, I believe, you don't need that body parser anymore because it's now a part of the Express library. And you don't need that anymore. So if you go to the module, you search in there, you will see that it's a part of our video. So therefore I should go back and just remove that. Or so we move my body parser. I don't need that anymore. It's redundant in this case. And instead of body parser, you can now just put here Express. Call the Express object, and you leave that. That solves the problem. OK, so our helper function. Now when you set the engine here, the way it's set up is a little different from, there's another way to do it too. But this is the way I did it. So here's what I'm going to do. Inside this property here, this object, there is a property called helpers. It's an object. And the helper is where you can create all your custom helper functions. So let's say I want to create a function called counter. And it's going to be an I use the error function. It will return, for example, 1,000. You can create multiple functions too. We can put here, say, speak. And this one will speak a message, for example. Say, high earth, like that. So all your helper functions can be created right in here. Now these are also known as the instance level. Or I guess you can say the global helper functions. Not like global to the handlebars, but global to this application, this instance. You can create multiple instances. So it's going to be available everywhere in the program in your application to all these templates. So here is we're going to just focus on the counter. It's going to return 1,000 back to where it's been used. So I'm going to go back to my portfolio. Here I'm going to replace all of these with the counter function we just created. You invoke it by just putting the counter name here, just like you would with the variable name over here. So save that and go back to the browser. And let's refresh this. And now you see that it renders 1,000, 1,000 for each of those lists. So that's exactly what we want, one in mine. Now instead of 1,000, we want to plus 1 do the index. So let's go back in here and modify our code. We want to say the index plus 1. And in here, we're going to pass the index to this function. This is just a variable name. Use whatever you want. I'll call it index. And then now this one now takes a parameter. So in your template, you now have to supply that parameter to this counter function. You cannot do this. You would be tempted to do that because you think that's a function. I've got to pass in the index to that function. That's how you do it. This template uses something very similar to SQL Server or SQL commands where you invoke a store procedure. You invoke the function with the procedure name. And then you put a space. And then all your parameters are passed to that function or parameter procedure just by adding it right here. This is one parameter. If I have two parameters, I put a space. And then second parameter, third parameter, and so on. In that order. So I'm going to pass the index to the counter function. And then the counter function receives the index. I'm going to plus 1 do that. And I think that is exactly what I want. So let's go back and refresh our page. And there it is. That's how you resolve this problem here. And you have to create your own function to do that. So what we did is a global helper function. It's available everywhere else here. What that means is that I can go and put counter inside another file too. I'm just for the example here. I can go to, let's say, the about page, for example. I'll just put here, for whatever reason, I'll just put here after the paragraph, counter here. I'll pass in a number, maybe like 100. So I should get 101 back for this about page. So save that. Go back to my browser, if I go my about page. And there it is, 101. Kind of tiny to see, but that's where it is. Okay, so now how do you write a function so that it's only available to this template? You can do that too. What is called the template level. Now, if you remember that everything here can all be overwritten, pretty much all of them, especially the layout here. It can all be overwritten. And we did that down here. I think I showed you one example right here, right, the chat layout. We have our own layout. We call it chat main instead of using the index layout. The index is the base layout for all the other pages, but the chat has its own index, own layout. So by the same token, you can override these global helper functions too. So here in the portfolio, let me go ahead and reorganize this so it's easier to see. So this is the object, right? And one of these properties is, again, the helpers. So I can go here and add this property and the same function name called counter. Let's put it down here. I'm gonna, I put in this time and I'm gonna put in times two, okay? I'm overwriting this function only here. The other one I did not change like the, you know, speak, but the global function will be using this. If I'm supplying the local version, it's gonna use this instead. So let's go to the browser and see. Yeah, so let's go back here. And so you can see it's 101 here and the portfolio, it's still the same. Actually, no, yeah, it's only zero because I did not add a one to, I think. So that's the portfolio times two. Yeah, that's great. We multiply that by two. So we got an even number instead of one, two, and three, and four, okay? You get like zero, two, four, and six instead, okay? Otherwise, if it's, you know, the local version, you would have got zero here because zero times something is always zero, okay? So that's how you can create helper functions and using handle express and express. And of course, as you add more and more functions to this list, it's gonna grow, right? It's gonna grow really huge. And so instead of doing that way, you can move all of these functions out into another external JS file. Import that in like you did up here and assign the helpers to that list of functions available here. Okay, so I hope this is helpful. And if you have any questions, please feel free to let me know any recommendations. They're also welcome. Thank you for watching. I'll see you guys in the next video.