Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,180 --> 00:00:04,130 So we have been making a lot of progress 2 2 00:00:04,130 --> 00:00:06,470 in building our application. 3 3 00:00:06,470 --> 00:00:10,640 That we can actually say already that the core functionality 4 4 00:00:10,640 --> 00:00:14,610 of the app is in fact already working. 5 5 00:00:14,610 --> 00:00:18,340 So now let's take a breath and think a little bit 6 6 00:00:18,340 --> 00:00:21,393 about our next step in this short lecture. 7 7 00:00:23,340 --> 00:00:27,440 So again, the core functionality is what we see here 8 8 00:00:27,440 --> 00:00:29,010 in this flow chart. 9 9 00:00:29,010 --> 00:00:32,340 And so that is basically the search functionality, 10 10 00:00:32,340 --> 00:00:35,340 then also displaying the pagination 11 11 00:00:35,340 --> 00:00:39,180 and then displaying any recipe that was selected. 12 12 00:00:39,180 --> 00:00:42,700 And so that we already have working at this point. 13 13 00:00:42,700 --> 00:00:45,610 And so that is really great progress, 14 14 00:00:45,610 --> 00:00:48,460 but now let's take it to the next level 15 15 00:00:48,460 --> 00:00:51,800 and think a little bit about how we will implement 16 16 00:00:51,800 --> 00:00:53,800 our next features here. 17 17 00:00:53,800 --> 00:00:55,850 So based on the user stories 18 18 00:00:55,850 --> 00:00:59,230 that we outlined in the beginning of this project, 19 19 00:00:59,230 --> 00:01:02,200 our next feature was a functionality 20 20 00:01:02,200 --> 00:01:05,980 for changing the servings of the displayed recipe. 21 21 00:01:05,980 --> 00:01:07,900 And that's going to be quite easy. 22 22 00:01:07,900 --> 00:01:10,540 All we will have to do is to listen 23 23 00:01:10,540 --> 00:01:15,270 and to handle events on the change servings buttons 24 24 00:01:15,270 --> 00:01:19,870 and then basically update the recipe and render it again. 25 25 00:01:19,870 --> 00:01:23,720 Then the next feature is the bookmarking functionality. 26 26 00:01:23,720 --> 00:01:26,980 And this is going to be yet another one 27 27 00:01:26,980 --> 00:01:30,160 that will be a little bit complex to implement. 28 28 00:01:30,160 --> 00:01:32,520 So let's see what we have here. 29 29 00:01:32,520 --> 00:01:36,170 So starting with the event here more on the left side, 30 30 00:01:36,170 --> 00:01:39,630 whenever the user bookmarks a certain recipe 31 31 00:01:39,630 --> 00:01:42,290 then we want to render that bookmarks 32 32 00:01:42,290 --> 00:01:44,710 in the special bookmarks panel, 33 33 00:01:44,710 --> 00:01:48,640 and we also want to update the button in the recipe. 34 34 00:01:48,640 --> 00:01:52,880 And so basically we will then rerender the recipe. 35 35 00:01:52,880 --> 00:01:56,830 Now then whenever the user clicks one of the bookmarks, 36 36 00:01:56,830 --> 00:01:59,940 and so that's the other event down there 37 37 00:01:59,940 --> 00:02:03,670 then we want to render exactly that a recipe 38 38 00:02:03,670 --> 00:02:05,990 that was clicked, okay? 39 39 00:02:05,990 --> 00:02:08,220 So here we will need two events 40 40 00:02:08,220 --> 00:02:11,420 and by the time we reach this functionality 41 41 00:02:11,420 --> 00:02:14,713 we will, of course seen more detail how it's gonna work. 42 42 00:02:15,740 --> 00:02:18,960 Then next up, we want to be able to store 43 43 00:02:18,960 --> 00:02:22,690 this personalized bookmark data in the browser 44 44 00:02:22,690 --> 00:02:26,410 and also a read it back when the page is loaded 45 45 00:02:26,410 --> 00:02:28,270 for the next time. 46 46 00:02:28,270 --> 00:02:31,830 And so that's exactly what is here on this diagram. 47 47 00:02:31,830 --> 00:02:34,300 So whenever there is a new bookmark, 48 48 00:02:34,300 --> 00:02:37,920 we basically store all the bookmarks to local storage. 49 49 00:02:37,920 --> 00:02:39,890 And then when the page loads 50 50 00:02:39,890 --> 00:02:43,330 then we load all the bookmarks back 51 51 00:02:43,330 --> 00:02:47,530 from the local storage and render them, all right? 52 52 00:02:47,530 --> 00:02:49,850 And so that's actually it. 53 53 00:02:49,850 --> 00:02:53,920 So this is what we will do over the next couple of lectures. 54 54 00:02:53,920 --> 00:02:55,600 And once we're done with that, 55 55 00:02:55,600 --> 00:02:59,300 the application will actually almost be finished. 56 56 00:02:59,300 --> 00:03:03,510 Okay, so that is our plan for the next couple of lectures. 57 57 00:03:03,510 --> 00:03:05,550 And so let's now go back to code 58 58 00:03:05,550 --> 00:03:08,010 and implement the functionality 59 59 00:03:08,010 --> 00:03:11,433 of changing the servings right in the next lecture. 5248