Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,220 --> 00:00:02,710 So, as I mentioned, 2 2 00:00:02,710 --> 00:00:05,150 by the end of the last lecture. 3 3 00:00:05,150 --> 00:00:09,010 In this one, we will now make the bookmarks data persist 4 4 00:00:09,010 --> 00:00:10,830 across page loads. 5 5 00:00:10,830 --> 00:00:13,970 And for that, we're gonna use local storage. 6 6 00:00:13,970 --> 00:00:17,360 And once again, this will now become quite easy, 7 7 00:00:17,360 --> 00:00:19,370 and quite straightforward, 8 8 00:00:19,370 --> 00:00:22,730 because we already have our entire project structure 9 9 00:00:22,730 --> 00:00:24,183 so nicely set up. 10 10 00:00:25,840 --> 00:00:29,540 So storing data in local storage 11 11 00:00:29,540 --> 00:00:32,230 is of course all about data. 12 12 00:00:32,230 --> 00:00:36,083 And so that will have to be implemented here in the model. 13 13 00:00:37,090 --> 00:00:40,863 So let's actually take a look here at our flow chart again. 14 14 00:00:42,080 --> 00:00:46,110 And so now this is all about loading bookmarks 15 15 00:00:46,110 --> 00:00:50,720 from local storage and storing bookmarks to local storage. 16 16 00:00:50,720 --> 00:00:55,213 So when should the bookmarks be stored to local storage? 17 17 00:00:56,230 --> 00:00:58,750 Well, that happens whenever the user 18 18 00:00:58,750 --> 00:01:00,970 bookmarks a recipe. 19 19 00:01:00,970 --> 00:01:03,240 And of course that also when the user 20 20 00:01:03,240 --> 00:01:05,770 unbookmarks the recipe. 21 21 00:01:05,770 --> 00:01:07,990 So in either of these cases, 22 22 00:01:07,990 --> 00:01:09,690 the current bookmarks array 23 23 00:01:09,690 --> 00:01:12,623 basically needs to be stored to local storage. 24 24 00:01:14,050 --> 00:01:17,350 Okay, so what I just said, 25 25 00:01:17,350 --> 00:01:21,260 is that whenever we add a bookmark or delete a bookmark, 26 26 00:01:21,260 --> 00:01:23,740 we need to persist that data. 27 27 00:01:23,740 --> 00:01:26,420 And so let's add a function here, 28 28 00:01:26,420 --> 00:01:30,070 which we can then call in these two functions. 29 29 00:01:30,070 --> 00:01:32,080 So this one we don't need to export 30 30 00:01:34,270 --> 00:01:38,073 because we simply will call it in these other two functions. 31 31 00:01:39,400 --> 00:01:41,063 So persist, bookmarks. 32 32 00:01:45,510 --> 00:01:47,030 And then here, remember, 33 33 00:01:47,030 --> 00:01:50,163 all we have to do is local storage.setItem. 34 34 00:01:51,900 --> 00:01:54,633 Then here we can give that item a name. 35 35 00:01:56,850 --> 00:01:58,950 So that's bookmarks. 36 36 00:01:58,950 --> 00:02:01,430 And then here, we need to set a string. 37 37 00:02:01,430 --> 00:02:04,673 And we do that by calling Json.stringify 38 38 00:02:05,930 --> 00:02:07,200 and then with the object 39 39 00:02:07,200 --> 00:02:10,940 that we basically want to convert to a string. 40 40 00:02:10,940 --> 00:02:14,383 And so that is state.bookmarks, 41 41 00:02:15,230 --> 00:02:17,090 and that's actually it. 42 42 00:02:17,090 --> 00:02:19,700 Now, all we have to do is to call this function 43 43 00:02:19,700 --> 00:02:20,913 in these two places. 44 44 00:02:24,480 --> 00:02:26,880 And that's already the first step 45 45 00:02:26,880 --> 00:02:30,133 and we can actually try that out already. 46 46 00:02:31,330 --> 00:02:33,283 So at least seeing it in the console. 47 47 00:02:35,920 --> 00:02:40,920 So let's bookmark this one and also this Greek pasta salad. 48 48 00:02:44,240 --> 00:02:47,620 Right, so both of them are now here 49 49 00:02:47,620 --> 00:02:52,093 and let's come here to application and then local storage. 50 50 00:02:53,740 --> 00:02:57,450 And so here it is already. 51 51 00:02:57,450 --> 00:03:01,210 So here are the bookmarks with these two recipes 52 52 00:03:01,210 --> 00:03:02,990 that we just stored. 53 53 00:03:02,990 --> 00:03:05,170 And now, as I reload the page, 54 54 00:03:05,170 --> 00:03:07,163 you see that the data is still here. 55 55 00:03:08,130 --> 00:03:11,550 Now, of course it is not yet back here. 56 56 00:03:11,550 --> 00:03:14,520 So just because the data is still in local storage, 57 57 00:03:14,520 --> 00:03:18,560 doesn't mean that it's magically gonna show up here 58 58 00:03:18,560 --> 00:03:21,940 because we didn't write any code for that yet, 59 59 00:03:21,940 --> 00:03:25,140 but let's now actually go do that. 60 60 00:03:25,140 --> 00:03:27,760 So basically when the page is loaded, 61 61 00:03:27,760 --> 00:03:30,030 we then want to run a method 62 62 00:03:30,030 --> 00:03:33,163 which will basically render the bookmarks here. 63 63 00:03:34,070 --> 00:03:35,610 All right. 64 64 00:03:35,610 --> 00:03:37,860 So the first step in doing that, 65 65 00:03:37,860 --> 00:03:41,600 is to actually get the bookmarks out of the local storage 66 66 00:03:41,600 --> 00:03:43,670 and back into our code. 67 67 00:03:43,670 --> 00:03:47,680 And then after that, we can then as I just said, 68 68 00:03:47,680 --> 00:03:51,903 render them back here to this bookmarks view, okay? 69 69 00:03:55,160 --> 00:03:57,890 So we have to code for persisting. 70 70 00:03:57,890 --> 00:04:01,810 So for storing the bookmarks in local storage here, 71 71 00:04:01,810 --> 00:04:05,430 so let's now also have to code for taking them out 72 72 00:04:05,430 --> 00:04:06,453 also right here. 73 73 00:04:07,940 --> 00:04:12,460 And let me simply write an initialization function here. 74 74 00:04:12,460 --> 00:04:13,823 So an init function, 75 75 00:04:14,730 --> 00:04:16,550 and then right at the beginning, 76 76 00:04:16,550 --> 00:04:20,083 I will call that init function. 77 77 00:04:21,175 --> 00:04:25,540 And here, of course, missing the function keyword. 78 78 00:04:25,540 --> 00:04:28,833 And so here we need to do the opposite. 79 79 00:04:29,780 --> 00:04:33,193 So LocalStorage.getItem, 80 80 00:04:35,660 --> 00:04:39,223 and then remember it is called bookmarks. 81 81 00:04:40,130 --> 00:04:43,700 And then we also need to store that somewhere 82 82 00:04:43,700 --> 00:04:46,970 and I'm not storing it directly into our state, 83 83 00:04:46,970 --> 00:04:51,520 because this data might not be defined actually. 84 84 00:04:51,520 --> 00:04:54,760 So we might have nothing of course, in the storage. 85 85 00:04:54,760 --> 00:04:58,010 And so only if there is storage, 86 86 00:04:58,010 --> 00:05:03,010 then we want state.bookmarks to be 87 87 00:05:05,680 --> 00:05:08,500 Json.parse, 88 88 00:05:08,500 --> 00:05:12,403 which is basically to convert the string back to an object. 89 89 00:05:14,610 --> 00:05:17,520 And so here we are now calling this function 90 90 00:05:17,520 --> 00:05:20,330 right in the beginning and then 91 91 00:05:20,330 --> 00:05:25,093 just to see let's then immediately log state.bookmarks 92 92 00:05:26,490 --> 00:05:27,903 to the console. 93 93 00:05:31,230 --> 00:05:35,150 Okay, so here we have a lot of logs. 94 94 00:05:35,150 --> 00:05:38,470 So let's go here to line 11 of these two 95 95 00:05:38,470 --> 00:05:41,233 and line 114 of the model. 96 96 00:05:42,590 --> 00:05:46,880 So model, now this one actually, 97 97 00:05:46,880 --> 00:05:48,630 is the one that I just did, 98 98 00:05:48,630 --> 00:05:52,400 but here we apparently have some console dot logs 99 99 00:05:52,400 --> 00:05:53,453 that we don't need. 100 100 00:05:54,380 --> 00:05:57,743 So here and here, 101 101 00:05:59,520 --> 00:06:01,430 and in fact, let's close these here 102 102 00:06:04,140 --> 00:06:05,823 and actually all of them for now. 103 103 00:06:07,650 --> 00:06:08,920 And so here, right? 104 104 00:06:08,920 --> 00:06:11,993 Immediately we have the local storage. 105 105 00:06:13,040 --> 00:06:16,933 Now, for some reason, this recipe was not find let's reload. 106 106 00:06:18,080 --> 00:06:19,303 Well, that's weird. 107 107 00:06:21,700 --> 00:06:25,500 And apparently we broke something in our code, 108 108 00:06:25,500 --> 00:06:28,910 but let's worry about that in a second. 109 109 00:06:28,910 --> 00:06:30,390 So for now, what matters here, 110 110 00:06:30,390 --> 00:06:35,060 is that we actually got the data back from local storage. 111 111 00:06:35,060 --> 00:06:39,480 So let's see if this has anything to do with the code 112 112 00:06:39,480 --> 00:06:40,913 that we just wrote here. 113 113 00:06:46,530 --> 00:06:49,200 Well, that's very weird. 114 114 00:06:49,200 --> 00:06:53,320 So now it is back to working for some reason. 115 115 00:06:53,320 --> 00:06:55,740 So let's actually log the error 116 116 00:06:55,740 --> 00:06:57,913 that is actually happening to the console. 117 117 00:06:59,260 --> 00:07:02,920 So here let's set that back to cause that error, 118 118 00:07:02,920 --> 00:07:05,120 but then here in the controller, 119 119 00:07:05,120 --> 00:07:10,120 so the one that is responsible for loading the recipe. 120 120 00:07:11,090 --> 00:07:11,980 So here, right now, 121 121 00:07:11,980 --> 00:07:15,620 we are only rendering the error to the user interface, 122 122 00:07:15,620 --> 00:07:19,400 and we are doing that with this nicely formatted error 123 123 00:07:19,400 --> 00:07:22,330 that we defined in the recipe view. 124 124 00:07:22,330 --> 00:07:26,330 But so let's not actually also log the error itself 125 125 00:07:26,330 --> 00:07:28,520 in the console so that we can see 126 126 00:07:28,520 --> 00:07:29,893 what is actually happening. 127 127 00:07:31,300 --> 00:07:34,493 So console error with error. 128 128 00:07:36,330 --> 00:07:40,410 And so now we get text content of undefined 129 129 00:07:42,310 --> 00:07:45,023 coming from controller at line 34. 130 130 00:07:47,030 --> 00:07:49,800 Okay, that's just the log. 131 131 00:07:49,800 --> 00:07:52,820 And so here we have a stack trace. 132 132 00:07:52,820 --> 00:07:56,713 And so the error itself is originating in line 25. 133 133 00:07:58,610 --> 00:08:02,023 So it is here when we update the bookmarks view. 134 134 00:08:03,640 --> 00:08:08,150 Okay, so this is where the error basically comes from. 135 135 00:08:08,150 --> 00:08:12,270 And so this is how we use this so-called stack trace. 136 136 00:08:12,270 --> 00:08:15,240 So here we can then follow exactly what happens. 137 137 00:08:15,240 --> 00:08:18,600 So here we then need to go to view 27, 138 138 00:08:18,600 --> 00:08:22,000 which is where this update is defined 10 for each 139 139 00:08:22,000 --> 00:08:23,493 and then line 37. 140 140 00:08:24,520 --> 00:08:26,713 So line 37 in the view, 141 141 00:08:28,890 --> 00:08:31,203 and so that is right here. 142 142 00:08:32,220 --> 00:08:33,530 So some kind of problem 143 143 00:08:33,530 --> 00:08:37,920 with updating the bookmarks view. 144 144 00:08:37,920 --> 00:08:41,810 So apparently we're trying to set the text content 145 145 00:08:41,810 --> 00:08:45,560 on some element here that doesn't yet exist. 146 146 00:08:45,560 --> 00:08:49,150 So maybe we are simply calling this method here 147 147 00:08:49,150 --> 00:08:50,380 a little bit too soon. 148 148 00:08:50,380 --> 00:08:52,223 So that's moved out here to the end. 149 149 00:08:56,970 --> 00:09:01,970 So updating a bookmark's view. 150 150 00:09:04,730 --> 00:09:06,940 So we still have an error. 151 151 00:09:06,940 --> 00:09:10,233 So this might be a good time to use the debugger. 152 152 00:09:14,160 --> 00:09:18,250 And I hope that with this, we will be able to find the bug. 153 153 00:09:18,250 --> 00:09:22,500 And if you're not interested in watching me find this bug 154 154 00:09:22,500 --> 00:09:25,660 and please feel free to jump to some later point 155 155 00:09:25,660 --> 00:09:26,493 in the code. 156 156 00:09:27,690 --> 00:09:29,653 So you see that at this point, 157 157 00:09:30,510 --> 00:09:32,363 the recipe has actually loaded. 158 158 00:09:34,880 --> 00:09:38,320 Okay, and so now here we are at the debugger. 159 159 00:09:38,320 --> 00:09:42,220 And so let's now go to the next step, 160 160 00:09:42,220 --> 00:09:43,990 which is this one here. 161 161 00:09:43,990 --> 00:09:47,153 Then we go into bookmarks view.update. 162 162 00:09:48,420 --> 00:09:50,720 And at this point, the data here, 163 163 00:09:50,720 --> 00:09:53,600 is actually already the data that is coming 164 164 00:09:53,600 --> 00:09:57,063 from our local storage, right? 165 165 00:09:58,320 --> 00:10:02,743 So this bookmarks here is at this point already loaded. 166 166 00:10:03,670 --> 00:10:08,380 So right here we do that right at the beginning. 167 167 00:10:08,380 --> 00:10:11,300 And so therefore the bookmarks, 168 168 00:10:11,300 --> 00:10:15,340 so model.state.bookmarks here is already defined. 169 169 00:10:15,340 --> 00:10:18,513 So that's these two objects right there. 170 170 00:10:19,500 --> 00:10:24,163 Let's actually see the scope here. 171 171 00:10:25,190 --> 00:10:29,093 And so indeed that's these two recipe objects, right? 172 172 00:10:30,440 --> 00:10:32,933 So here we also have the entire call stack. 173 173 00:10:36,320 --> 00:10:39,970 Okay, now let's keep going. 174 174 00:10:39,970 --> 00:10:41,740 So the new markup, 175 175 00:10:41,740 --> 00:10:44,573 then here we go through all of this. 176 176 00:10:53,160 --> 00:10:55,683 Okay, once again, 177 177 00:11:02,383 --> 00:11:04,810 all right, so here we are back. 178 178 00:11:04,810 --> 00:11:06,373 Whoa, what's that? 179 179 00:11:07,420 --> 00:11:10,550 Ah, so I just hovered over the string, 180 180 00:11:10,550 --> 00:11:11,763 which has all of this. 181 181 00:11:12,810 --> 00:11:15,980 So that's this markup that we just generated 182 182 00:11:15,980 --> 00:11:19,213 then here let's generate this dam, okay? 183 183 00:11:23,490 --> 00:11:26,513 And here are the new elements and the current elements. 184 184 00:11:27,710 --> 00:11:30,523 So right now here, inside the current elements, 185 185 00:11:31,380 --> 00:11:33,373 let's see what that is. 186 186 00:11:35,050 --> 00:11:36,920 So that's all of the elements 187 187 00:11:36,920 --> 00:11:39,890 that are basically right now 188 188 00:11:39,890 --> 00:11:44,763 in that empty bookmarks panel, right? 189 189 00:11:48,690 --> 00:11:52,390 Now, and do you see that the length of this one here is five 190 190 00:11:52,390 --> 00:11:54,600 and this one here is 14. 191 191 00:11:54,600 --> 00:11:58,950 And so I think I'm starting to see the problem here. 192 192 00:11:58,950 --> 00:12:01,430 So these two arrays are the arrays 193 193 00:12:01,430 --> 00:12:05,920 that we are basically comparing here, right? 194 194 00:12:05,920 --> 00:12:07,840 So we have this hole for each loop 195 195 00:12:07,840 --> 00:12:12,170 to compare the elements in these two arrays, right? 196 196 00:12:12,170 --> 00:12:16,700 Because the goal of this method is to not add new elements, 197 197 00:12:16,700 --> 00:12:19,610 but only to replace some text and elements 198 198 00:12:19,610 --> 00:12:21,560 that already exist. 199 199 00:12:21,560 --> 00:12:25,920 However, right now this bookmarks here is still empty. 200 200 00:12:25,920 --> 00:12:28,770 And what does update here is trying to do, 201 201 00:12:28,770 --> 00:12:31,650 is to now insert the data in there. 202 202 00:12:31,650 --> 00:12:35,570 And so that should not happen, okay? 203 203 00:12:35,570 --> 00:12:37,793 And so I'll actually quit this now, 204 204 00:12:38,680 --> 00:12:40,683 by going back here, 205 205 00:12:41,760 --> 00:12:44,623 getting rid of this and simply reloading. 206 206 00:12:49,800 --> 00:12:51,403 So let's get this down. 207 207 00:12:52,330 --> 00:12:54,560 And so in order to prevent this, 208 208 00:12:54,560 --> 00:12:57,160 the first thing that we need to do now on the page 209 209 00:12:57,160 --> 00:12:59,950 is basically render the bookmarks 210 210 00:12:59,950 --> 00:13:01,750 and remember that's what happened 211 211 00:13:01,750 --> 00:13:05,100 right at the beginning when we load the page. 212 212 00:13:05,100 --> 00:13:07,800 So let's go to the bookmarks view 213 213 00:13:08,640 --> 00:13:10,813 and here create a new handler. 214 214 00:13:12,150 --> 00:13:15,433 So add handler render, 215 215 00:13:16,440 --> 00:13:19,590 which receives an handler, 216 216 00:13:19,590 --> 00:13:22,723 and then window.addeventlistener and load. 217 217 00:13:27,130 --> 00:13:30,143 And then we will immediately call this handler. 218 218 00:13:32,011 --> 00:13:35,030 Okay, and so here, 219 219 00:13:35,030 --> 00:13:37,250 we already imported it. 220 220 00:13:37,250 --> 00:13:38,880 And so here at the very end, 221 221 00:13:38,880 --> 00:13:42,790 let's create then the handler function. 222 222 00:13:42,790 --> 00:13:47,553 So the controller control and bookmarks, 223 223 00:13:53,247 --> 00:13:55,230 and then all that we will do 224 224 00:13:55,230 --> 00:13:59,830 is actually take bookmarksview.render 225 225 00:13:59,830 --> 00:14:04,830 with state.bookmarks. 226 226 00:14:04,950 --> 00:14:09,450 And again, that is actually model.state. 227 227 00:14:09,450 --> 00:14:13,290 And now let's ask the first of all thing here, 228 228 00:14:13,290 --> 00:14:17,230 do bookmarks view.addhandlerrender 229 229 00:14:20,210 --> 00:14:22,563 with the control bookmarks? 230 230 00:14:24,280 --> 00:14:26,470 And so now we are back to working 231 231 00:14:26,470 --> 00:14:30,363 and the two bookmarks from before are now actually here. 232 232 00:14:32,560 --> 00:14:35,093 All right, so with that we solved the problem, 233 233 00:14:36,250 --> 00:14:40,740 because now as the page here tries to then 234 234 00:14:42,900 --> 00:14:45,840 updating the bookmarks view, 235 235 00:14:45,840 --> 00:14:48,120 the bookmarks are already there. 236 236 00:14:48,120 --> 00:14:50,970 And so then there's nothing to update really. 237 237 00:14:50,970 --> 00:14:55,260 So we can actually move that back up here, I believe 238 238 00:14:57,370 --> 00:14:58,923 actually this one as well. 239 239 00:15:02,150 --> 00:15:03,973 So let's try that again. 240 240 00:15:05,220 --> 00:15:10,220 And yeah, so this is a bit of a more, 241 241 00:15:10,260 --> 00:15:11,410 a natural order 242 242 00:15:14,730 --> 00:15:15,573 now, okay. 243 243 00:15:17,160 --> 00:15:19,610 And so now of course I can click here 244 244 00:15:19,610 --> 00:15:22,220 and then this gets selected 245 245 00:15:22,220 --> 00:15:24,670 and everything keeps working the same. 246 246 00:15:24,670 --> 00:15:28,550 So we don't even need to search functionality 247 247 00:15:28,550 --> 00:15:32,433 to be able to switch between our recipes. 248 248 00:15:34,200 --> 00:15:36,517 And of course, if we unbookmark, 249 249 00:15:36,517 --> 00:15:40,050 then that is gone, and as we reload the page, 250 250 00:15:40,050 --> 00:15:41,683 then we only have this one, 251 251 00:15:43,180 --> 00:15:47,600 then let's remove all of them. 252 252 00:15:47,600 --> 00:15:51,860 And then as this was re-rendered, right? 253 253 00:15:51,860 --> 00:15:55,770 Then we got this error message here back. 254 254 00:15:55,770 --> 00:15:57,830 And of course, if we reload now, 255 255 00:15:57,830 --> 00:16:00,693 then we have no bookmarks at all, again. 256 256 00:16:01,830 --> 00:16:02,740 Now just to finish, 257 257 00:16:02,740 --> 00:16:06,843 let's quickly add like a quick function here for debugging. 258 258 00:16:09,170 --> 00:16:12,643 Let's call it clear bookmarks, 259 259 00:16:14,060 --> 00:16:16,880 which is simply a function that at some point 260 260 00:16:16,880 --> 00:16:18,793 we might want to call, 261 261 00:16:20,420 --> 00:16:23,950 but again, only during development, 262 262 00:16:23,950 --> 00:16:26,633 so clear 10 bookmarks. 263 263 00:16:28,550 --> 00:16:30,000 So when I'm working with this, 264 264 00:16:30,000 --> 00:16:34,230 then sometimes I need to do this. 265 265 00:16:34,230 --> 00:16:35,873 So clearing all the bookmarks. 266 266 00:16:37,830 --> 00:16:40,853 So let me add a couple of ones here. 267 267 00:16:43,410 --> 00:16:45,713 So this one and this one. 268 268 00:16:46,890 --> 00:16:49,500 Okay, and now as they reload the page, 269 269 00:16:49,500 --> 00:16:51,193 it should then clear all of them. 270 270 00:16:52,860 --> 00:16:55,543 Well, it didn't for some reason. 271 271 00:16:58,600 --> 00:17:00,360 Oh, and that's probably 272 272 00:17:00,360 --> 00:17:03,060 because this one here happened first, 273 273 00:17:03,060 --> 00:17:07,220 so let's take this one out, do that again. 274 274 00:17:07,220 --> 00:17:09,103 And now the bookmarks are gone. 275 275 00:17:11,110 --> 00:17:12,860 Okay, but by default, 276 276 00:17:12,860 --> 00:17:15,490 this will, of course be turned off 277 277 00:17:15,490 --> 00:17:19,173 because otherwise our application is not going to work. 278 278 00:17:21,850 --> 00:17:24,723 So here is the hot pizza dip. 279 279 00:17:26,400 --> 00:17:31,010 And it is still bookmarked after we reload the application. 280 280 00:17:31,010 --> 00:17:33,650 And so let's quickly to finish, 281 281 00:17:33,650 --> 00:17:35,200 check out our flow chart, 282 282 00:17:35,200 --> 00:17:38,463 but I'm pretty confident that everything is implemented. 283 283 00:17:39,310 --> 00:17:41,850 So when the user clicks a bookmark, 284 284 00:17:41,850 --> 00:17:44,430 it will then mark the selected bookmark here. 285 285 00:17:44,430 --> 00:17:47,240 And of course it will render the recipe. 286 286 00:17:47,240 --> 00:17:48,653 When the page loads, 287 287 00:17:49,934 --> 00:17:52,990 then the bookmarks are loaded from local storage 288 288 00:17:52,990 --> 00:17:54,890 and they are rendered. 289 289 00:17:54,890 --> 00:17:57,670 So check here as well. 290 290 00:17:57,670 --> 00:18:00,150 And when the user bookmarks a recipe, 291 291 00:18:00,150 --> 00:18:03,520 then it gets stored to local storage. 292 292 00:18:03,520 --> 00:18:05,590 So check here as well. 293 293 00:18:05,590 --> 00:18:08,460 And so we just implemented all of this 294 294 00:18:08,460 --> 00:18:10,650 or rather complex part. 295 295 00:18:10,650 --> 00:18:13,840 So now it's finally time to take a break 296 296 00:18:13,840 --> 00:18:17,990 and take an overview of what we need to implement next 297 297 00:18:17,990 --> 00:18:20,223 in order to finish this application. 25181