1 00:00:02,170 --> 00:00:07,300 So inside of the delete movie handler function here, I want to make sure that we also work with the 2 00:00:07,300 --> 00:00:09,040 buttons that we show in that modal, 3 00:00:09,070 --> 00:00:11,560 that would be that no and that yes button. 4 00:00:11,560 --> 00:00:17,200 Now again, we can use button passive and button danger, these CSS classes inside of the delete modal 5 00:00:17,220 --> 00:00:20,210 div here to select these buttons. 6 00:00:20,260 --> 00:00:28,870 So if I go to app.js, in here I want to add handlers to these buttons, so deletemoviemodal and then 7 00:00:28,870 --> 00:00:32,920 query selector CSS class button--passive, 8 00:00:32,950 --> 00:00:40,030 that's my cancel button and here that's the danger button, 9 00:00:40,030 --> 00:00:41,230 that's the yes button. 10 00:00:43,370 --> 00:00:46,520 Now we just need to add event listeners here 11 00:00:46,520 --> 00:00:50,850 and of course you could store where the selected buttons in constants here, 12 00:00:50,870 --> 00:00:55,820 you can use global constants, I'll go with local ones because I really only need it in this function 13 00:00:55,820 --> 00:00:56,570 here. 14 00:00:56,570 --> 00:01:04,730 So I'll name this cancel deletion button because that's what this button will do 15 00:01:05,240 --> 00:01:11,350 and here add another constant which we could name confirm deletion button. 16 00:01:11,390 --> 00:01:16,300 Now we can add event listeners, cancel deletion button, there 17 00:01:16,340 --> 00:01:21,450 I will add an event listener for click event and add an anonymous function. 18 00:01:21,740 --> 00:01:24,870 You could of course also go for a named function if you prefer to 19 00:01:24,950 --> 00:01:30,110 but here, an anonymous function where I call close movie deletion modal like that, 20 00:01:30,320 --> 00:01:36,140 therefore we can actually also just point at this movie deletion modal function like this because we 21 00:01:36,140 --> 00:01:40,520 don't need to do anything else with it and nothing else needs to be done when this button is clicked, 22 00:01:40,520 --> 00:01:51,920 so if we now save that and we go back here, reload and add a new movie, like that, click on it here and 23 00:01:51,920 --> 00:01:57,200 click no, this closes this just as if we click on the backdrop. 24 00:01:57,200 --> 00:01:58,610 So this works, now if I click 25 00:01:58,640 --> 00:01:59,080 yes, 26 00:01:59,090 --> 00:02:02,680 then I really want to delete it so then I want to execute delete movie. 27 00:02:03,230 --> 00:02:11,260 So we also need to add a listener here, confirm deletion button and there, I'll add an event listener where 28 00:02:11,260 --> 00:02:15,460 upon a click, I want to execute delete movie in the end 29 00:02:15,460 --> 00:02:17,370 and here we need to bind null 30 00:02:17,380 --> 00:02:18,680 and then the movie ID 31 00:02:18,850 --> 00:02:25,720 so that we forward that movie ID in the end, so that the right movie gets deleted eventually and i can 32 00:02:25,720 --> 00:02:29,830 get rid of this comment. Now as mentioned before, 33 00:02:29,830 --> 00:02:34,990 you could rename these functions which are triggering here to handler functions because they're now 34 00:02:35,020 --> 00:02:39,310 only executed upon handlers. For deleting I will definitely do that, delete 35 00:02:39,400 --> 00:02:40,480 movie handler. 36 00:02:43,170 --> 00:02:48,670 For closing the movie deletion modal, I'll not do it because we actually can trigger this from other 37 00:02:48,670 --> 00:02:55,710 places as well, like here in the backdrop click handler function. So with that, let's give it another try, 38 00:02:55,930 --> 00:03:02,140 let's save that and do a full reload here and I'll get an error in line 44, identifier delete movie handler 39 00:03:02,140 --> 00:03:04,580 has already been declared. So look 40 00:03:04,580 --> 00:03:07,450 line 44 complains about delete 41 00:03:07,450 --> 00:03:08,950 movie handler. 42 00:03:08,950 --> 00:03:09,570 Oh yes, 43 00:03:09,670 --> 00:03:11,430 of course I'm duplicating the name now. 44 00:03:11,800 --> 00:03:18,980 So this here makes sense to be called delete movie handler because this really will do the deletion, 45 00:03:18,980 --> 00:03:22,390 this will just confirm or check whether you want to continue, 46 00:03:23,120 --> 00:03:28,350 so I'll name this start delete movie handler 47 00:03:28,360 --> 00:03:31,430 because in the end here, we start that deletion process 48 00:03:31,550 --> 00:03:36,880 and now we just need to go down to render a new movie element and there, connect us to the start delete 49 00:03:36,890 --> 00:03:37,610 movie handler, 50 00:03:37,620 --> 00:03:40,410 this click listener here. 51 00:03:40,440 --> 00:03:43,920 So now we get rid of that duplication, if 52 00:03:43,980 --> 00:03:44,880 we now reload, 53 00:03:44,880 --> 00:03:46,150 there are no errors 54 00:03:46,150 --> 00:03:47,250 and now let's give it a try. 55 00:03:47,250 --> 00:03:52,460 Let's add Javascript, The Complete 56 00:03:54,810 --> 00:04:06,390 Guide here like this, add it, then also add something else, clearing the input when I cancel, when I click 57 00:04:06,390 --> 00:04:06,930 the backdrop 58 00:04:06,930 --> 00:04:11,710 by the way doesn't work as I see, clicking cancel here also doesn't get rid of the backdrops there. 59 00:04:11,730 --> 00:04:14,290 So there still are some errors which we should get rid of, 60 00:04:14,550 --> 00:04:15,320 we'll do so soon 61 00:04:15,330 --> 00:04:17,790 but now here I cancel, 62 00:04:17,790 --> 00:04:20,610 now I confirm and now everything's gone. 63 00:04:20,670 --> 00:04:22,830 So that didn't really work, 64 00:04:22,830 --> 00:04:25,190 we still have a couple of bugs which we need to fix. 65 00:04:25,200 --> 00:04:26,790 Let's make sure we do fix them now.