-: Let's now add some EventListeners 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 idea 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,
watch 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 that
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 safe.
And so here now is that 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 men are 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.addEeventListener.
And the name of the event is called hashchange.
Okay.
And the function that we want to run then is showrecipe.
So let's remove it from here
and only run the showrecipe function
whenever that hashchanges.
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 in 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.
So let's say the Id is window.location,
which is basically the entire URL,
and then from there, we can take to 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 one, all the way to the end.
And so now, instead of having the Id hard coded here,
like we have, right now,
we can simply insert the Id right there.
So Id,
and so Let's now check.
Okay, and now it's Jay's 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 we 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 run
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 hashchange,
and load.
And then we can simply loop over
this array and do something.
And so for that we use forEach.
And in this array, each element is an event.
So e for event.
And then here,
all we have to do is window.addEventListener,
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 not exactly the same
as having these two lines here.
So in the first iteration,
this ev will be hash change.
And in the 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 went 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 the 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 clause right here,
saying that if there is no Id,
then return.
Then 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 def 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 different links
will load these different recipes.
Alright.
And that's actually it for
the very core functionality here
that we have in our flowchart.
So at least have 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.