let's now add some event listeners to our application and kind of simulate that we already have some search results in place and let's start by taking a quick look at our flowchart here so we already implemented this part here of loading a recipe and also of rendering it but now in this lecture we want to also hook up these two event listeners here so that the recipe is actually loaded on one of these two events here so when the user selects a recipe from the results list or when the page loads
with a certain recipe ID okay so let's do that and let's also take a quick look here at the demo version so searching for pizza again and let's click on any recipe here and so again here you see that we have this hash so everything that comes after this hash symbol here is called the hash so this is the ID of the recipe and all of this together is called the hash and the way this is going to work is that whenever this hash here changes a new recipe is going to be loaded so if we click here now w
atch what happens there in the hash so you see that it changed and that changing of the hash is actually an event that we can listen for so again the hash here now changed you see and so we can then listen for that event take the hash and from there take the ID and then load the recipe with that ID okay did you follow that and if not that's not a big deal so let's just see in code what I mean by that and to start we actually need a way of triggering a change of the hash all right and we can do t
hat by adding a fake link here in the search results so let's simply add a link here with the href of hash and then here as the hash let's actually copy this one and you can copy any other ID this doesn't really matter this is just to show you how we can listen for the event of that hash changing so give it a save and so here now is that a very small link and watch what happens when I click here so you see that the hash changed right and actually let's add another one here so one and two and now
here from the controller I can get one of these IDs so let's say this one and put that one here so these are two IDs of two different recipes and now as we click each of them you see that the hash up there in the URL bar keeps changing and so again we can listen for that event and so let's do that now so let's come down here and then window dot add event listener and the name of the event is called hash change okay and the function that we want to run then is show recipe so let's remove it from
here and only run the show recipe function whenever that hash changes however that is not really helpful yet because the next step is that we actually need to get the recipe ID from the hash right so let's go up here and so let me just show you what I mean so right now when we click here then some recipe will get shown so you see that it loaded this spicy chicken but now if I click here then it will load the same one because we are still hard coding this ID here but instead here we want to show
the recipe with this ID and here with this other ID right so we want to dynamically get the ID here from the hash and that's pretty easy to do actually so we can actually do that out here of the try or we can also do it inside so that's not really important foreign is window dot location which is basically the entire URL and then from there we can take the hash now that's not yet everything but let me show you what the ID looks like right now so let's see and here it is so it's basically the ID
plus this hash symbol and so we want to basically remove this first character or in other words we only want to start reading from the string basically at the first position so we can do that easily using the slice method starting at 1 all the way to the end and so now instead of having did hard coded here like we have right now we can simply insert the ID right there um so ID and so let's now check okay and now it's j signature pizza crust and if you go here then it's the spicy chicken and as
we click here then again it changes and you see that the ID that we get here of this recipe object is indeed exactly this one here that is coming from the URL bar great so this was actually already a pretty important part of our applications functionality but now what happens if we take this entire URL and copy it and want to open it in another tab well then no recipe at all shows up and so that's because this time the hash did not really change right we simply opened this page here but we never
changed the hash and so we also want to listen for the load event so basically for the event of the entire page loading okay and that's easy enough so all you would have to do is duplicate this and listen for the load event so this event here is fired off immediately after the page has completed loading but here we have some duplicate code and so I actually wanted to show you a nice way in which we can do all of this at the same time and imagine you had like 10 events for which you wanted to ru
n the same event handler function so then it wouldn't be good to have this same code here 10 times right and so instead what we can do is a nice array which contains these two events so hash change and load and then we can simply Loop over this array and do something and so for that we use for each and in this array each element is an event so e for event and then here all we have to do is window dot add event listener and then the event let's call it EV because usually the E is the actual event
object so let's not get confused here so the event and then the Handler function okay so this is now exactly the same as having these two lines here so in the first iteration this EV will be hash change and in a second it will be load right let's just comment this part out and well let's copy this again close it and open and indeed now it loaded the recipe right at the beginning okay and now just one more scenario let's say we didn't have any hash well then we get an error right so something we
nt wrong and then our spinner here keeps loading forever and so the problem is that right now we don't have any ID right so right here we are trying to read the ID but then the location doesn't have any hash and so therefore maybe you saw it here we have an empty string basically and so then we are trying to find a recipe for the empty string and so of course then we get an error and that error will then trigger the alert window that we saw and so let's put a simple guard class right here saying
that if there is no ID then return and that's it and again using guard Clauses like this is really the modern way of Performing this test so the old way would have been to write if ID and then we would have to wrap all of this code here into the if block and so that would then create unnecessary nesting and make our code harder to read so if we save it now and reload it now well then we don't get any error and everything works fine and so we can now safely click here and then each of these diff
erent links will load these different recipes all right and that's actually it for the very core functionality here that we have in our flowchart so at least of this right side of the flowchart so this is now basically implemented at this point however it is not implemented in a very clean way and so in the next lecture it is finally time to talk a little bit about the architecture that we're going to implement in this project
Comments