1 00:00:02,330 --> 00:00:03,690 So first things first, 2 00:00:03,740 --> 00:00:10,820 if we reload, one problem we have is if I enter something here and I click cancel, the backdrop doesn't close. 3 00:00:10,820 --> 00:00:16,550 If I enter something here and I click the backdrop, everything closes but my input is not cleared. 4 00:00:16,550 --> 00:00:22,790 So there are a couple of things I want to change here, for one clearing that input. We got that clear 5 00:00:22,790 --> 00:00:26,770 movie input function and we call that when the cancel add movie handler is called, 6 00:00:27,020 --> 00:00:31,730 well in the end of course I also want to call this whenever we close the backdrop 7 00:00:31,730 --> 00:00:36,110 of course, that also therefore calls this function if we close the other modal 8 00:00:36,110 --> 00:00:42,170 but since that's the only other use case we have in this app, calling it like this will be okay. 9 00:00:42,230 --> 00:00:47,720 So that should fix this error, that if we enter something here and we click the backdrop, the content 10 00:00:47,720 --> 00:00:48,600 was still there, 11 00:00:48,680 --> 00:00:50,020 this works. Now 12 00:00:50,080 --> 00:00:54,590 however if we have another issue, if I click cancel, the backdrop doesn't close. 13 00:00:54,590 --> 00:00:59,990 Now let's have a look at what happens when I click that cancel button, cancel add movie button here fires 14 00:00:59,990 --> 00:01:05,440 the cancel add movie handler and in there, I close the movie modal, I clear the movie input. 15 00:01:05,540 --> 00:01:09,950 Well in close movie modal, if I scroll up, I indeed don't toggle the backdrop, 16 00:01:09,950 --> 00:01:13,040 so here I need to toggle the backdrop instead. 17 00:01:13,040 --> 00:01:19,550 So now this should make sure that when I do click cancel here, we also clear the backdrop. 18 00:01:19,550 --> 00:01:30,740 Now another issue we had was that if I do add movies here, let's say to and I click on one and I confirm 19 00:01:30,740 --> 00:01:32,360 deletion, 20 00:01:32,360 --> 00:01:39,740 now I delete it but I get an error and that does not close and previously, if we reload here, if we add two 21 00:01:39,740 --> 00:01:46,140 items here, this one and then this one here, 22 00:01:46,170 --> 00:01:46,720 right? 23 00:01:46,740 --> 00:01:51,570 If I add two of them and I click on the first one and cancel and click on the second one and click 24 00:01:51,570 --> 00:01:52,140 yes, 25 00:01:52,230 --> 00:01:53,550 both are gone. 26 00:01:53,610 --> 00:02:01,320 So this never closes and the deletion process also isn't correct. Now regarding the modal which doesn't 27 00:02:01,320 --> 00:02:07,710 close when we confirm deletion, for that we can just go to our delete movie handler which is in the end 28 00:02:07,710 --> 00:02:14,280 triggered when we really want to get rid of everything and there, we just have to call close movie deletion 29 00:02:14,280 --> 00:02:21,360 modal, close movie deletion modal and therefore even though it would work in this order as well because 30 00:02:21,360 --> 00:02:27,060 everything is parsed before this will be executed for the first time, I will move that up above that 31 00:02:27,060 --> 00:02:32,820 so that I have a structure where I have the functions that I call above the functions where I need them, 32 00:02:33,820 --> 00:02:40,060 therefore actually I will, even though it's not strictly required, also move toggle backdrop up a bit, 33 00:02:40,740 --> 00:02:46,570 cut that and add toggle backdrop here at the top but that's not the main thing 34 00:02:46,620 --> 00:02:52,290 but now we should close the movie deletion modal once we delete the movie but still we got some 35 00:02:52,320 --> 00:02:58,770 error here in our logic as it seems, it seems like we're deleting the wrong item sometimes, 36 00:02:58,770 --> 00:03:06,730 let me show you again. Now if we reload here and we add a movie, let's say a single movie and I click 37 00:03:06,730 --> 00:03:09,450 on it and I confirm this, it works. 38 00:03:09,610 --> 00:03:21,310 If I add two movies here, first one, second one and I click on the second one and click yes, this also 39 00:03:21,310 --> 00:03:25,340 works. If I add two movies here, 40 00:03:27,400 --> 00:03:28,850 like that 41 00:03:29,170 --> 00:03:34,180 and then here like this and I click on the first one and delete it, 42 00:03:35,160 --> 00:03:37,180 this now works. 43 00:03:37,210 --> 00:03:38,470 Now let's see, 44 00:03:38,700 --> 00:03:40,350 it seems to fail 45 00:03:40,560 --> 00:03:42,300 if I have more movies 46 00:03:45,990 --> 00:03:51,410 like this and we then click on one, cancel this and then delete the other one, now 47 00:03:51,420 --> 00:03:54,150 this clearly does not behave in the way it should, 48 00:03:54,150 --> 00:03:55,980 now what's the problem here? 49 00:03:57,050 --> 00:04:00,900 The problem has something to do with the start delete movie handler, there 50 00:04:00,900 --> 00:04:02,260 I set up these event listeners 51 00:04:02,270 --> 00:04:05,480 and the problem is if we have a movie here, 52 00:04:08,760 --> 00:04:14,460 it even occurs with only one movie and I cancel deletion and then I delete, here I get another error, 53 00:04:14,700 --> 00:04:20,370 the error source is the same or the problem we have here is actually the same as the problem that causes 54 00:04:20,370 --> 00:04:22,140 multiple items to be deleted. 55 00:04:22,290 --> 00:04:26,490 Whenever I start the deletion process, we add an event listener for both buttons, 56 00:04:26,490 --> 00:04:33,360 right? Now when I cancel, we of course execute this event listener or this function here and not the other 57 00:04:33,360 --> 00:04:34,100 one. 58 00:04:34,140 --> 00:04:38,190 If I then click on the same movie again or even on a different movie, 59 00:04:38,190 --> 00:04:44,940 the problem is that we add new listeners to the cancel and confirm deletion buttons but the old listeners 60 00:04:45,360 --> 00:04:46,650 are also still there, 61 00:04:46,650 --> 00:04:50,070 You must not forget that the DOM object, these buttons, 62 00:04:50,070 --> 00:04:52,220 the underlying DOM objects are never removed, 63 00:04:52,230 --> 00:04:55,020 so the event listeners are of course never cleared. 64 00:04:55,170 --> 00:05:00,600 So that means that if we then click confirm on that newly opened modal, all event listeners we executed 65 00:05:00,600 --> 00:05:05,740 in the past will execute, even the ones for the other movie you might have clicked on before 66 00:05:05,880 --> 00:05:11,400 and if we only have one movie and we open and close this confirm modal multiple times, like I can do 67 00:05:11,400 --> 00:05:19,030 it here, then we basically add more and more listeners to the confirm button 68 00:05:19,030 --> 00:05:24,100 and if I then click yes, I get as many error messages here complaining that you can't remove that element 69 00:05:24,100 --> 00:05:25,740 anymore because it's gone already 70 00:05:25,990 --> 00:05:27,080 as you opened this modal. 71 00:05:27,120 --> 00:05:32,920 If I opened the modal five times, I get four error messages here because one time, clicking confirm succeeded 72 00:05:32,920 --> 00:05:33,870 and deleted the item 73 00:05:34,000 --> 00:05:37,320 but the other four event listeners which also were added go into the void, 74 00:05:37,360 --> 00:05:41,830 they executed their function, try to delete the element but the element is gone, with multiple movies 75 00:05:41,830 --> 00:05:46,150 I might have clicked on multiple movies and therefore, all these event listeners are registered 76 00:05:46,150 --> 00:05:53,080 and then if I click yes on some movie, all event listeners execute. So what's the solution here? 77 00:05:53,080 --> 00:05:55,530 Well we need to clear the existing event listeners 78 00:05:55,670 --> 00:06:02,890 but the problem is there is a confirm deletion button and of course also for the other button, remove event listener 79 00:06:02,890 --> 00:06:03,610 function 80 00:06:03,790 --> 00:06:09,220 but this takes the event for which you want to remove a listener and then the function which you executed 81 00:06:09,280 --> 00:06:10,120 on your event listener. 82 00:06:10,120 --> 00:06:14,400 So in this case of the confirm deletion button, this delete movie handler function 83 00:06:14,410 --> 00:06:18,580 but now here since I use bind, this actually returns a new function. 84 00:06:18,580 --> 00:06:23,530 Now you might think no problem, I call bind here again but this will actually return a new function 85 00:06:23,620 --> 00:06:24,580 object 86 00:06:24,580 --> 00:06:30,280 and because as you know, two objects even if they hold the same content which here is not even guaranteed 87 00:06:30,280 --> 00:06:32,200 because the movie ID might be different 88 00:06:32,200 --> 00:06:37,990 but even if it would be the same content, objects and therefore also functions are different. 89 00:06:37,990 --> 00:06:43,390 So this would look for an event listener with this function object which is not the same as this event 90 00:06:43,390 --> 00:06:43,900 listener, 91 00:06:43,900 --> 00:06:48,010 so this would not work for this delete movie handler function. 92 00:06:48,010 --> 00:06:51,370 Now the good news is for cancel deletion, 93 00:06:51,370 --> 00:06:55,270 so for this button, it will work because there I'm not using bind, 94 00:06:55,270 --> 00:07:02,230 so here if I click and then point at close movie deletion modal, we use exactly the same function object 95 00:07:02,260 --> 00:07:03,690 because we don't create a new one, 96 00:07:03,700 --> 00:07:08,860 we point that this global object instead which is created once when the script runs at the beginning 97 00:07:09,340 --> 00:07:10,540 and therefore this will work. 98 00:07:10,540 --> 00:07:12,580 So for the cancel deletion button, we're good, 99 00:07:12,610 --> 00:07:15,940 we clear an existing event listener before we add a new one. 100 00:07:16,060 --> 00:07:23,620 Now for confirm deletion button, as I said this will not work and I can actually show this 101 00:07:23,620 --> 00:07:34,350 to you if we save that and we give it a try and we add a new movie here, now click on this multiple times, 102 00:07:35,820 --> 00:07:37,260 you'll see we still get the same error. 103 00:07:37,530 --> 00:07:38,730 So that didn't work, 104 00:07:38,730 --> 00:07:45,510 so let's comment it out. So for the confirm deletion button, we need a workaround and a workaround 105 00:07:45,510 --> 00:07:51,780 we can use here even though it's a bit hacky for sure but it will work is to simply recreate that 106 00:07:51,780 --> 00:07:58,680 deletion button because if we do that, we get rid of the old DOM object and with that, all existing event 107 00:07:58,680 --> 00:07:59,810 listeners will be removed 108 00:07:59,820 --> 00:08:05,100 if you hold no other references at this button which we don't, we only point at the button here inside 109 00:08:05,100 --> 00:08:05,990 of this function, 110 00:08:06,000 --> 00:08:11,460 so whenever this function execution is done, these constants will go into the void and therefore, garbage 111 00:08:11,460 --> 00:08:17,040 collection can then kick in and actually get rid of these old event listeners. 112 00:08:17,040 --> 00:08:18,410 So what does this mean? 113 00:08:18,420 --> 00:08:24,120 It means that before I add event listeners here, I want to swap that deletion button so that I always 114 00:08:24,120 --> 00:08:30,540 have a brand new button when that function executes again. To do this, I simply say confirm deletion 115 00:08:30,540 --> 00:08:36,550 button and call replace with to replace this with a new node 116 00:08:36,630 --> 00:08:43,520 and I want to replace it with confirm deletion button clone node true to make a deep clone 117 00:08:43,650 --> 00:08:49,600 and with that we clone this confirm deletion button and replace the existing one with it. 118 00:08:49,630 --> 00:08:52,000 So the DOM object is created with a clone 119 00:08:52,120 --> 00:08:57,550 and therefore with a new object, which means all listeners can be deleted and a deep clone is required 120 00:08:57,550 --> 00:08:58,480 here by the way 121 00:08:58,480 --> 00:09:01,330 otherwise the text inside of the button will not be cloned. 122 00:09:01,330 --> 00:09:05,990 So now this will replace that button, a bit hacky for sure 123 00:09:06,010 --> 00:09:12,210 but at least now we have a way of practicing clone node and replace with and since it replaces the button, 124 00:09:12,220 --> 00:09:16,540 this confirm deletion button reference which we have here of course will not work anymore, 125 00:09:16,540 --> 00:09:22,750 that's the old button which we now removed from the DOM, hence I will actually change this to be a variable 126 00:09:23,470 --> 00:09:28,870 and then simply repeat that selection process after I swap this so that I get access to the new button 127 00:09:28,870 --> 00:09:29,590 thereafter 128 00:09:29,650 --> 00:09:33,010 and here I get access so that I attach the listener to the right button. 129 00:09:35,720 --> 00:09:44,350 With that if we go back and we reload this and we try Javascript The Complete Guide here, if we now 130 00:09:44,350 --> 00:09:48,210 click on this a couple of times and cancel and then click yes, 131 00:09:48,490 --> 00:09:50,110 this seems to work without issues. 132 00:09:50,110 --> 00:09:57,980 Now let's also try multiple items here, multiple elements which we can add and click on the first one 133 00:09:57,980 --> 00:10:04,660 cancel, click on the second one and now the first one indeed survived and this now should be a setup 134 00:10:04,670 --> 00:10:10,940 that works and that works just fine no matter how often you click on something and what you do with 135 00:10:10,940 --> 00:10:11,310 it 136 00:10:11,390 --> 00:10:15,300 because now we're attaching this correctly with this little workaround here 137 00:10:15,470 --> 00:10:21,230 but that simply is a nice way of practicing this again and it helps us solve the problem of having too 138 00:10:21,230 --> 00:10:22,310 many event listeners here. 139 00:10:22,310 --> 00:10:28,670 Now needless to say that Javascript of course also holds other ways of solving this but I found it nice 140 00:10:28,670 --> 00:10:34,640 to also again play and work with replace with and clone node and other ways of solving this would actually 141 00:10:34,640 --> 00:10:38,610 involve techniques and features of Javascript we haven't really learned about yet, 142 00:10:38,690 --> 00:10:40,070 hence this approach, 143 00:10:40,070 --> 00:10:45,590 we will however learn more about events and also about functions throughout the course so that we can 144 00:10:45,590 --> 00:10:50,750 handle this entire deletion process or similar cases in a more elegant way in the future. 145 00:10:50,750 --> 00:10:54,280 Nonetheless, this is this finished and working application here, 146 00:10:54,290 --> 00:10:56,550 well almost, one thing is missing, 147 00:10:56,620 --> 00:10:59,570 do you know which? Well it's a minor thing 148 00:10:59,570 --> 00:11:05,380 but if I have no items anymore, I want to bring back this section here at the bottom. 149 00:11:05,600 --> 00:11:11,470 So we have these update UI function where we do perform this check whether we want to show it or not, 150 00:11:11,480 --> 00:11:16,120 so all we need to do is call update UI whenever we deleted a movie. 151 00:11:16,130 --> 00:11:18,700 So here, I want to call update UI 152 00:11:19,010 --> 00:11:21,890 and with that called, let's give it a try, 153 00:11:21,920 --> 00:11:23,780 let's reload, try 154 00:11:23,870 --> 00:11:34,000 Javascript The Complete Guide again, like this, open this, close it, click yes 155 00:11:34,260 --> 00:11:36,330 and our text here is back and 156 00:11:36,420 --> 00:11:40,120 if I add another item, it of course should be gone again, 157 00:11:40,380 --> 00:11:41,640 yes that all works. 158 00:11:41,640 --> 00:11:43,230 So now we're finished with this app.