Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,350 --> 00:00:05,310 Let's now add some EventListeners to our application, 2 2 00:00:05,310 --> 00:00:08,180 and kind of simulate that we already have 3 3 00:00:08,180 --> 00:00:10,333 some search results in place. 4 4 00:00:12,070 --> 00:00:14,610 And let's start by taking a quick look 5 5 00:00:14,610 --> 00:00:16,660 at our flowchart here. 6 6 00:00:16,660 --> 00:00:19,400 So we already implemented this part here 7 7 00:00:19,400 --> 00:00:23,430 of loading a recipe, and also of rendering it. 8 8 00:00:23,430 --> 00:00:24,810 But now in this lecture, 9 9 00:00:24,810 --> 00:00:29,090 we want to also hook up these two event listeners here, 10 10 00:00:29,090 --> 00:00:31,480 so that the recipe is actually loaded 11 11 00:00:31,480 --> 00:00:34,110 on one of these two events here. 12 12 00:00:34,110 --> 00:00:38,170 So when the user selects a recipe from the results list, 13 13 00:00:38,170 --> 00:00:41,533 or when the page loads with a certain recipe Id. 14 14 00:00:42,770 --> 00:00:45,130 Okay, so let's do that. 15 15 00:00:45,130 --> 00:00:48,543 And let's also take a quick look here at the demo version. 16 16 00:00:50,540 --> 00:00:53,180 So searching for pizza again, 17 17 00:00:53,180 --> 00:00:56,070 and let's click on any recipe here. 18 18 00:00:56,070 --> 00:00:59,990 And so again, here, you see that we have this hash. 19 19 00:00:59,990 --> 00:01:02,330 So everything that comes after 20 20 00:01:02,330 --> 00:01:05,630 this hash symbol here is called the hash. 21 21 00:01:05,630 --> 00:01:07,770 So this is the idea of the recipe. 22 22 00:01:07,770 --> 00:01:10,747 And all of this together is called the hash. 23 23 00:01:10,747 --> 00:01:12,650 And the way this is going to work 24 24 00:01:12,650 --> 00:01:15,780 is that whenever this hash here changes, 25 25 00:01:15,780 --> 00:01:18,490 a new recipe is going to be loaded. 26 26 00:01:18,490 --> 00:01:20,040 So if we click here, now, 27 27 00:01:20,040 --> 00:01:22,083 watch what happens there in the hash. 28 28 00:01:23,950 --> 00:01:26,070 So you see that it changed. 29 29 00:01:26,070 --> 00:01:27,810 And that changing of the hash 30 30 00:01:27,810 --> 00:01:30,783 is actually an event that we can listen for. 31 31 00:01:32,040 --> 00:01:35,830 So again, the hash here now changed, you see, 32 32 00:01:35,830 --> 00:01:38,700 and so we can then listen for that event, 33 33 00:01:38,700 --> 00:01:40,860 take the hash, and from there, 34 34 00:01:40,860 --> 00:01:45,680 take the Id, and then load the recipe with that Id. 35 35 00:01:45,680 --> 00:01:48,290 Okay, did you follow that. 36 36 00:01:48,290 --> 00:01:50,710 And if not, that's not a big deal. 37 37 00:01:50,710 --> 00:01:55,030 So let's just see in code, what I mean by that. 38 38 00:01:55,030 --> 00:01:57,230 And to start, we actually need a way 39 39 00:01:57,230 --> 00:01:59,843 of triggering a change of the hash. 40 40 00:02:00,920 --> 00:02:02,510 All right, and we can do that 41 41 00:02:02,510 --> 00:02:07,400 by adding a fake link here, in the search results. 42 42 00:02:07,400 --> 00:02:12,110 So let's simply add a link here with the href of hash. 43 43 00:02:16,920 --> 00:02:20,783 And then here as the hash, let's actually copy this one, 44 44 00:02:21,870 --> 00:02:24,410 and you can copy any other Id, 45 45 00:02:24,410 --> 00:02:25,700 this doesn't really matter. 46 46 00:02:25,700 --> 00:02:27,870 This is just to show you how we can listen 47 47 00:02:27,870 --> 00:02:30,823 for the event of that hash changing. 48 48 00:02:32,910 --> 00:02:34,960 So give it a safe. 49 49 00:02:34,960 --> 00:02:37,930 And so here now is that very small link. 50 50 00:02:37,930 --> 00:02:40,023 And watch what happens when I click here. 51 51 00:02:41,690 --> 00:02:45,763 So you see that the hash changed, right? 52 52 00:02:46,700 --> 00:02:49,133 And actually, let's add another one here. 53 53 00:02:51,670 --> 00:02:54,940 So one and two men are here from the controller, 54 54 00:02:54,940 --> 00:02:56,933 I can get one of these Ids. 55 55 00:02:58,440 --> 00:02:59,773 So let's say this one, 56 56 00:03:01,170 --> 00:03:03,230 and put that one here. 57 57 00:03:03,230 --> 00:03:07,360 So these are two Ids of two different recipes. 58 58 00:03:07,360 --> 00:03:10,760 And now as we click each of them, 59 59 00:03:10,760 --> 00:03:12,830 you see that the hash up there, 60 60 00:03:12,830 --> 00:03:15,870 in the URL bar keeps changing. 61 61 00:03:15,870 --> 00:03:19,010 And so again, we can listen for that event. 62 62 00:03:19,010 --> 00:03:20,513 And so let's do that now. 63 63 00:03:22,550 --> 00:03:23,913 So let's come down here. 64 64 00:03:26,080 --> 00:03:28,133 And then window.addEeventListener. 65 65 00:03:31,718 --> 00:03:34,313 And the name of the event is called hashchange. 66 66 00:03:36,970 --> 00:03:37,803 Okay. 67 67 00:03:37,803 --> 00:03:41,170 And the function that we want to run then is showrecipe. 68 68 00:03:42,990 --> 00:03:44,880 So let's remove it from here 69 69 00:03:44,880 --> 00:03:47,230 and only run the showrecipe function 70 70 00:03:47,230 --> 00:03:49,253 whenever that hashchanges. 71 71 00:03:50,180 --> 00:03:53,490 However, that is not really helpful yet. 72 72 00:03:53,490 --> 00:03:55,220 Because the next step is that 73 73 00:03:55,220 --> 00:03:59,620 we actually need to get the recipe Id from the hash. 74 74 00:03:59,620 --> 00:04:02,563 Right. So let's go up here. 75 75 00:04:03,470 --> 00:04:05,750 And so let me just show you what I mean. 76 76 00:04:05,750 --> 00:04:07,460 So right now when we click here, 77 77 00:04:07,460 --> 00:04:09,973 then some recipe will get shown. 78 78 00:04:12,010 --> 00:04:15,800 So you see that it loaded this spicy chicken. 79 79 00:04:15,800 --> 00:04:17,100 But now if I click here, 80 80 00:04:17,100 --> 00:04:19,040 then it will load the same one, 81 81 00:04:19,040 --> 00:04:22,730 because we are still hard coding this Id here. 82 82 00:04:22,730 --> 00:04:23,610 But instead, here, 83 83 00:04:23,610 --> 00:04:25,290 we want to show the recipe 84 84 00:04:25,290 --> 00:04:29,740 with this Id in here with this other Id, right? 85 85 00:04:29,740 --> 00:04:33,483 So we want to dynamically get the Id here from the hash. 86 86 00:04:34,724 --> 00:04:37,370 And that's pretty easy to do, actually. 87 87 00:04:37,370 --> 00:04:40,763 So we can actually do that out here of the try. 88 88 00:04:41,650 --> 00:04:42,960 Or we can also do it inside. 89 89 00:04:42,960 --> 00:04:44,623 So that's not really important. 90 90 00:04:48,130 --> 00:04:53,130 So let's say the Id is window.location, 91 91 00:04:54,650 --> 00:04:57,410 which is basically the entire URL, 92 92 00:04:57,410 --> 00:05:00,423 and then from there, we can take to hash. 93 93 00:05:02,520 --> 00:05:04,460 Now that's not yet everything. 94 94 00:05:04,460 --> 00:05:07,513 But let me show you what the Id looks like right now. 95 95 00:05:09,500 --> 00:05:10,523 So let's see. 96 96 00:05:11,490 --> 00:05:12,493 And here it is. 97 97 00:05:13,940 --> 00:05:18,270 So it's basically the Id plus this hash symbol. 98 98 00:05:18,270 --> 00:05:22,420 And so we want to basically remove this first character. 99 99 00:05:22,420 --> 00:05:23,253 Or in other words, 100 100 00:05:23,253 --> 00:05:25,330 we only want to start reading from 101 101 00:05:25,330 --> 00:05:27,883 the string basically, at the first position. 102 102 00:05:29,230 --> 00:05:33,330 So we can do that easily, using the slice method, 103 103 00:05:33,330 --> 00:05:36,393 starting at one, all the way to the end. 104 104 00:05:37,280 --> 00:05:41,000 And so now, instead of having the Id hard coded here, 105 105 00:05:41,000 --> 00:05:42,610 like we have, right now, 106 106 00:05:42,610 --> 00:05:45,563 we can simply insert the Id right there. 107 107 00:05:49,020 --> 00:05:50,623 So Id, 108 108 00:05:51,500 --> 00:05:52,873 and so Let's now check. 109 109 00:05:58,190 --> 00:06:02,730 Okay, and now it's Jay's signature pizza crust. 110 110 00:06:02,730 --> 00:06:05,530 And if you go here, then it's the spicy chicken. 111 111 00:06:05,530 --> 00:06:08,450 And as we click here, then again, it changes. 112 112 00:06:08,450 --> 00:06:11,310 And you see that the Id that we get here, 113 113 00:06:11,310 --> 00:06:12,710 of this recipe object 114 114 00:06:12,710 --> 00:06:15,313 is indeed exactly this one here, 115 115 00:06:16,263 --> 00:06:18,893 that is coming from the URL bar. 116 116 00:06:19,820 --> 00:06:20,653 Great. 117 117 00:06:20,653 --> 00:06:24,140 So this was actually already a pretty important part 118 118 00:06:24,140 --> 00:06:26,460 of our applications functionality. 119 119 00:06:26,460 --> 00:06:30,490 But now what happens if we take this entire URL 120 120 00:06:30,490 --> 00:06:33,523 and copy it and want to open it in another tab? 121 121 00:06:36,010 --> 00:06:40,010 Well, then no recipe at all shows up. 122 122 00:06:40,010 --> 00:06:41,457 And so that's because this time, 123 123 00:06:41,457 --> 00:06:45,020 the hash did not really change, right? 124 124 00:06:45,020 --> 00:06:47,310 We simply opened this page here, 125 125 00:06:47,310 --> 00:06:49,730 but we never changed the hash. 126 126 00:06:49,730 --> 00:06:53,390 And so we also want to listen for the load event. 127 127 00:06:53,390 --> 00:06:54,223 So basically, 128 128 00:06:54,223 --> 00:06:56,853 for the event of the entire page loading. 129 129 00:06:58,450 --> 00:07:01,563 Okay, and that's easy enough. 130 130 00:07:03,110 --> 00:07:07,170 So all we would have to do is duplicate this, 131 131 00:07:07,170 --> 00:07:10,020 and listen for the load event. 132 132 00:07:10,020 --> 00:07:11,670 So this event here is fired off 133 133 00:07:11,670 --> 00:07:15,980 immediately after the page has completed loading. 134 134 00:07:15,980 --> 00:07:17,853 But here we have some duplicate code. 135 135 00:07:18,730 --> 00:07:21,870 And so I actually wanted to show you a nice way 136 136 00:07:21,870 --> 00:07:24,930 in which we can do all of this at the same time. 137 137 00:07:24,930 --> 00:07:27,430 And imagine you had like 10 events 138 138 00:07:27,430 --> 00:07:29,170 for which you wanted to run 139 139 00:07:29,170 --> 00:07:31,890 the same event handler function. 140 140 00:07:31,890 --> 00:07:33,560 So then it wouldn't be good 141 141 00:07:33,560 --> 00:07:37,420 to have this same code here 10 times. 142 142 00:07:37,420 --> 00:07:38,784 Right. And so instead, 143 143 00:07:38,784 --> 00:07:40,380 what we can do 144 144 00:07:40,380 --> 00:07:42,060 is a nice array, 145 145 00:07:42,060 --> 00:07:45,853 which contains these two events. 146 146 00:07:47,230 --> 00:07:48,950 So hashchange, 147 147 00:07:48,950 --> 00:07:51,380 and load. 148 148 00:07:51,380 --> 00:07:52,830 And then we can simply loop over 149 149 00:07:52,830 --> 00:07:54,403 this array and do something. 150 150 00:07:55,390 --> 00:07:58,350 And so for that we use forEach. 151 151 00:07:58,350 --> 00:08:01,180 And in this array, each element is an event. 152 152 00:08:01,180 --> 00:08:03,210 So e for event. 153 153 00:08:03,210 --> 00:08:04,043 And then here, 154 154 00:08:04,043 --> 00:08:07,090 all we have to do is window.addEventListener, 155 155 00:08:08,660 --> 00:08:10,200 and then the event. 156 156 00:08:10,200 --> 00:08:12,830 Let's call it ev, because usually, 157 157 00:08:12,830 --> 00:08:15,820 the e is the actual event object. 158 158 00:08:15,820 --> 00:08:17,513 So let's not get confused here. 159 159 00:08:18,650 --> 00:08:22,483 So the event and then the handler function. 160 160 00:08:24,190 --> 00:08:26,730 Okay, so this is not exactly the same 161 161 00:08:26,730 --> 00:08:29,190 as having these two lines here. 162 162 00:08:29,190 --> 00:08:30,900 So in the first iteration, 163 163 00:08:30,900 --> 00:08:32,810 this ev will be hash change. 164 164 00:08:32,810 --> 00:08:34,963 And in the second, it will be load. 165 165 00:08:36,270 --> 00:08:37,860 Right? 166 166 00:08:37,860 --> 00:08:39,733 Let's just comment this part out. 167 167 00:08:41,510 --> 00:08:45,220 And, well, let's copy this again. 168 168 00:08:45,220 --> 00:08:46,943 Close it, and open. 169 169 00:08:48,150 --> 00:08:49,710 And indeed, 170 170 00:08:49,710 --> 00:08:52,783 now it loaded the recipe right at the beginning. 171 171 00:08:54,900 --> 00:08:55,733 Okay. 172 172 00:08:56,820 --> 00:08:58,380 And now, just one more scenario, 173 173 00:08:58,380 --> 00:09:00,970 let's say we dIdn't have any hash, 174 174 00:09:00,970 --> 00:09:03,760 well, then we get an error. 175 175 00:09:03,760 --> 00:09:07,400 Right? So something went wrong. 176 176 00:09:07,400 --> 00:09:11,290 And then our spinner here keeps loading forever. 177 177 00:09:11,290 --> 00:09:13,130 And so the problem is that right now, 178 178 00:09:13,130 --> 00:09:14,823 we don't have any Id. 179 179 00:09:16,890 --> 00:09:18,380 Right? 180 180 00:09:18,380 --> 00:09:21,240 So right here, 181 181 00:09:21,240 --> 00:09:23,090 we are trying to read the Id, 182 182 00:09:23,090 --> 00:09:25,870 but then the location doesn't have any hash. 183 183 00:09:25,870 --> 00:09:28,800 And so therefore, maybe you saw it here, 184 184 00:09:28,800 --> 00:09:31,660 we have an empty string, basically. 185 185 00:09:31,660 --> 00:09:34,010 And so then we are trying to find the recipe 186 186 00:09:34,010 --> 00:09:36,080 for the empty string. 187 187 00:09:36,080 --> 00:09:38,750 And so of course, then we get an error. 188 188 00:09:38,750 --> 00:09:40,430 And that error will then trigger 189 189 00:09:40,430 --> 00:09:43,010 the alert window that we saw. 190 190 00:09:43,010 --> 00:09:46,820 And so let's put a simple guard clause right here, 191 191 00:09:46,820 --> 00:09:49,403 saying that if there is no Id, 192 192 00:09:50,770 --> 00:09:51,603 then return. 193 193 00:09:52,990 --> 00:09:54,490 Then that's it. 194 194 00:09:54,490 --> 00:09:57,860 And again, using guard clauses like this 195 195 00:09:57,860 --> 00:10:02,860 is really the modern way of performing this test. 196 196 00:10:02,960 --> 00:10:06,180 So the old way would have been to write if Id. 197 197 00:10:06,180 --> 00:10:07,880 And then we would have to wrap all of 198 198 00:10:07,880 --> 00:10:11,450 this code here into def block. 199 199 00:10:11,450 --> 00:10:14,690 And so that would then create unnecessary nesting 200 200 00:10:14,690 --> 00:10:16,593 and make our code harder to read. 201 201 00:10:17,460 --> 00:10:19,900 So if we save it now, 202 202 00:10:19,900 --> 00:10:21,630 and reload it now, well, 203 203 00:10:21,630 --> 00:10:23,410 then we don't get any error, 204 204 00:10:23,410 --> 00:10:25,150 and everything works fine. 205 205 00:10:25,150 --> 00:10:27,610 And so we can now safely click here. 206 206 00:10:27,610 --> 00:10:29,900 And then each of these different links 207 207 00:10:29,900 --> 00:10:33,260 will load these different recipes. 208 208 00:10:33,260 --> 00:10:34,560 Alright. 209 209 00:10:34,560 --> 00:10:36,320 And that's actually it for 210 210 00:10:36,320 --> 00:10:39,520 the very core functionality here 211 211 00:10:39,520 --> 00:10:41,130 that we have in our flowchart. 212 212 00:10:41,130 --> 00:10:44,023 So at least have this right side of the flowchart. 213 213 00:10:45,120 --> 00:10:48,690 So this is now basically implemented at this point. 214 214 00:10:48,690 --> 00:10:52,560 However, it is not implemented in a very clean way. 215 215 00:10:52,560 --> 00:10:54,080 And so in the next lecture, 216 216 00:10:54,080 --> 00:10:56,710 it is finally time to talk a little bit about 217 217 00:10:56,710 --> 00:10:58,470 the architecture that we're going 218 218 00:10:58,470 --> 00:11:00,363 to implement in this project. 17918