1
00:00:02,640 --> 00:00:08,970
Now theoretically, our little application here is finished but if you have a look at the HTML code,

2
00:00:08,970 --> 00:00:12,870
you'll see there is another modal in there which we are not using yet

3
00:00:12,870 --> 00:00:17,010
and in the end here I'm asking whether I'm sure that I want to delete an item.

4
00:00:17,100 --> 00:00:23,370
So in the end, I want to present this modal when we click the delete button here and only if we click

5
00:00:23,400 --> 00:00:26,610
yes in that modal, I really want to delete the movie.

6
00:00:26,610 --> 00:00:32,130
So I want to have an extra confirmation step so that we don't accidentally delete a movie.

7
00:00:32,400 --> 00:00:36,350
Now to make that work, we need to restructure our code a little bit.

8
00:00:36,510 --> 00:00:41,090
I'll add a new function, maybe here above delete movie handler which I'll name delete

9
00:00:41,130 --> 00:00:50,560
movie and in there, I expect to get that movie ID as well and actually this entire code here, that's

10
00:00:50,560 --> 00:00:57,130
just moved in here because I want to call the delete movie function from inside the delete movie handler,

11
00:00:57,760 --> 00:01:05,600
so call delete movie here with movie ID but I only want to do that

12
00:01:05,690 --> 00:01:09,090
if we showed that modal and the answer has been yes.

13
00:01:09,200 --> 00:01:15,530
So I'll comment this out for now and then here, I want to add the logic to show that modal, show the

14
00:01:15,530 --> 00:01:22,930
backdrop and also react to clicks on these buttons. So let's select that little modal here and it

15
00:01:22,930 --> 00:01:25,620
has an ID of delete modal which is quite convenient.

16
00:01:25,840 --> 00:01:32,290
So we can select it by that ID and we can do that globally or we just do it here in the delete movie

17
00:01:32,290 --> 00:01:38,630
handler because that's the only place where I will need it in the end. So in here, I can get access to my

18
00:01:39,020 --> 00:01:48,560
delete movie modal with document get element by ID for that delete modal ID.

19
00:01:48,580 --> 00:01:49,560
Now with it selected,

20
00:01:49,600 --> 00:01:57,410
I will use that delete movie modal here, use the classless property and then add the visible class,

21
00:01:57,410 --> 00:02:01,070
we could use toggle but this doesn't really make sense here. When this gets called,

22
00:02:01,070 --> 00:02:06,850
so when we just clicked a movie element, there is absolutely no way that this modal is currently shown.

23
00:02:06,860 --> 00:02:12,950
So toggling it to remove the visible class if it's currently there isn't really something that could ever

24
00:02:12,950 --> 00:02:13,670
happen,

25
00:02:13,760 --> 00:02:17,240
this modal can never be visible when this function executes,

26
00:02:17,450 --> 00:02:22,720
so we can only add this, removing is not something that should ever make sense.

27
00:02:22,730 --> 00:02:25,580
I also want to toggle the backdrop so that we see that

28
00:02:25,580 --> 00:02:39,550
and with that if I save that and we reload here and we add our item here with this image, add and I click

29
00:02:39,550 --> 00:02:39,910
here,

30
00:02:39,910 --> 00:02:45,670
indeed that modal opens up. Now there of course, clicking the buttons doesn't do anything, clicking the

31
00:02:45,670 --> 00:02:47,710
backdrop does something strange,

32
00:02:47,710 --> 00:02:51,090
the backdrop now actually shows us the other modal,

33
00:02:51,130 --> 00:02:55,040
so that's something we'll have to fix and this modal doesn't disappear,

34
00:02:55,150 --> 00:02:58,600
so looks like we need to tweak our code a little bit.

35
00:02:58,650 --> 00:03:03,450
Now we're showing the other modal when I click the backdrop of this first modal because whenever we

36
00:03:03,450 --> 00:03:09,270
click the backdrop, in the end what happens is that the backdrop click handler executes and this calls

37
00:03:09,270 --> 00:03:16,620
toggle movie modal which will of course show that other movie modal if it was currently not shown, previously

38
00:03:16,630 --> 00:03:21,500
that wasn't a problem because there the only thing that added a backdrop was that movie modal,

39
00:03:21,510 --> 00:03:23,770
so toggling won't always remove it,

40
00:03:23,790 --> 00:03:29,770
now other things can add that backdrop and then clicking that will actually show the movie modal.

41
00:03:29,970 --> 00:03:36,540
So to work around that, we need to change our code a little bit and actually get rid of the toggle functionality

42
00:03:36,540 --> 00:03:44,660
which worked before but doesn't anymore and instead add a close movie modal function here which will

43
00:03:44,660 --> 00:03:56,240
just go ahead and use add movie modal class list and then remove the visible class here and rename toggle

44
00:03:56,240 --> 00:04:06,770
the movie modal here to add movie modal or to show movie modal and then here we use add instead of toggle.

45
00:04:07,300 --> 00:04:13,150
Now that of course means we need to change all places where I used the toggle movie modal. Here when I cancelled

46
00:04:13,180 --> 00:04:19,840
adding a movie, I want to close the movie modal, to scroll down further here when we added a new movie,

47
00:04:19,940 --> 00:04:24,030
I also want to close the movie modal, if we scroll down further

48
00:04:24,040 --> 00:04:28,570
when you click the backdrop, I want to close the movie modal, never open it

49
00:04:28,570 --> 00:04:35,370
and on the other hand here when we start clicking the start add movie button, I want to show my movie modal

50
00:04:35,380 --> 00:04:41,770
and here we could therefore also add a handler function but since show movie modal could theoretically

51
00:04:41,770 --> 00:04:43,120
also be called from other places,

52
00:04:43,120 --> 00:04:47,020
I'll keep that name but it's up to you whether you want to keep it there or not.

53
00:04:47,020 --> 00:04:53,230
So now with that restructured, we should be good regarding that behavior of that other modal showing up suddenly.

54
00:04:53,320 --> 00:05:01,130
Now I also want to make sure of course that clicking the backdrop closes our confirm deletion modal

55
00:05:01,130 --> 00:05:07,160
though, so this modal, that this is closed if we click the backdrop there and to make sure that this is

56
00:05:07,160 --> 00:05:12,890
possible, I will actually grab this constant, delete movie modal and move it up to the other constants

57
00:05:12,980 --> 00:05:18,520
so that this is globally available and not just in this function here, not just in the delete movie handler

58
00:05:19,130 --> 00:05:21,530
because that allows us to add another function,

59
00:05:24,340 --> 00:05:27,640
cancel movie deletion

60
00:05:30,390 --> 00:05:41,160
and in there, I want to toggle the backdrop and I also want to reach out to the delete movie modal and

61
00:05:41,160 --> 00:05:46,020
there on the CSS classes, I want to remove the visible class to close the modal and get rid of the

62
00:05:46,020 --> 00:05:53,430
backdrop and now cancel movie deletion is something that should be called from inside backdrop click

63
00:05:53,430 --> 00:06:01,710
handler. We could of course, also to be in line with the other names I guess, name it close movie deletion

64
00:06:01,980 --> 00:06:05,190
modal, just a very long name but might be clearer.

65
00:06:05,430 --> 00:06:12,670
So close movie deletion modal, of course that's now also what I should rename this function to and now

66
00:06:12,670 --> 00:06:14,980
with that, if we save that and we reload

67
00:06:17,990 --> 00:06:25,550
and we give this another try, enter something here, enter something here, now I have the backdrop

68
00:06:25,670 --> 00:06:35,010
open up after clicking add. So there is something wrong if I add a new movie, let's have a look at movie

69
00:06:35,010 --> 00:06:43,020
handler, close movie modal, yes I of course also need to toggle the backdrop here now.

70
00:06:43,080 --> 00:06:49,260
Now if you save that, give this another try and reload, enter something here, something here,

71
00:06:49,290 --> 00:06:54,120
this works and if I now click on this, we get this handler and if I click on the backdrop, it just closes

72
00:06:54,120 --> 00:06:56,130
now, this opens again,

73
00:06:56,280 --> 00:07:01,710
so that's now all working. So this looks good,

74
00:07:01,710 --> 00:07:06,020
now let's make sure that the buttons inside of the confirm deletion modal also do something.