1 00:00:02,330 --> 00:00:07,580 So that was a lot of talking about selecting elements but of course it is an important part of working 2 00:00:07,580 --> 00:00:13,410 with the DOM and I want to be sure that you really know how that works and which options you have there. 3 00:00:13,610 --> 00:00:19,580 Now with that all selected though, let's add an event listener to the start add movie button because 4 00:00:19,610 --> 00:00:21,270 that's what we all came here for, 5 00:00:21,350 --> 00:00:25,730 we want to make sure that we can open that add movie modal and that should happen when we click that 6 00:00:25,730 --> 00:00:26,630 button. 7 00:00:26,630 --> 00:00:31,610 So here we can use good old add event listener which we didn't have a closer look at in this module 8 00:00:31,670 --> 00:00:36,590 but we already saw this earlier in the course and I will have a closer look at events and how you can 9 00:00:36,590 --> 00:00:41,300 handle them in a separate module because there's a lot you can say about events and it's just not the 10 00:00:41,300 --> 00:00:46,160 focus of this module. Adding an event listener like this is something we saw before though, so we can 11 00:00:46,160 --> 00:00:51,740 easily add a click event listener like that with this line here and now we want to add a function. We 12 00:00:51,740 --> 00:00:53,350 could use an anonymous function here 13 00:00:53,360 --> 00:00:59,870 but I will actually create a standalone function here, simply for readability so that this is clearly 14 00:01:00,050 --> 00:01:05,180 readable and easy to see so that our code is also very understandable. For that, 15 00:01:05,180 --> 00:01:10,100 you can define a function whichever way you want with the function keyword and the declaration approach, 16 00:01:10,310 --> 00:01:15,140 with the expression approach where you stored a function in a constant or with the expression approach 17 00:01:15,140 --> 00:01:16,970 where you use an arrow function. 18 00:01:16,970 --> 00:01:18,590 That's the approach I will use here 19 00:01:18,680 --> 00:01:20,210 but you don't have to follow that, 20 00:01:20,240 --> 00:01:24,040 you can use either of the three ways of creating a function you learned. 21 00:01:24,230 --> 00:01:29,440 So here, I will name this toggleMovieModal because that's what I want to do, 22 00:01:29,480 --> 00:01:34,790 when this function gets called, I want to open the modal if it is open and I want to close it if it is 23 00:01:34,790 --> 00:01:35,890 not open. 24 00:01:35,900 --> 00:01:40,820 Alternatively of course, we add separate functions for opening and closing but I think we can combine 25 00:01:40,820 --> 00:01:42,380 this quite nicely here in this app, 26 00:01:42,380 --> 00:01:47,930 so let's do it like this. Then as I mentioned here, I add my arrow function, alternative would be to use 27 00:01:47,930 --> 00:01:55,190 a regular function here or even a function declaration as I mentioned, let me move that up here and now 28 00:01:55,190 --> 00:02:01,670 inside of that function, we can use the add movie modal constant, so this one which points at this div 29 00:02:01,700 --> 00:02:09,610 which has that add modal ID and there in the index.html file, there on this add movie modal, we're 30 00:02:09,620 --> 00:02:10,410 selecting this div, 31 00:02:10,410 --> 00:02:15,530 right so there we have that modal class andin app.css, we see that if we add a visible class to these 32 00:02:15,530 --> 00:02:19,840 same element where we have the modal class, we'll actually set display to block, 33 00:02:19,850 --> 00:02:25,170 so we need to add or remove this visible class to show or hide the modal. 34 00:02:25,220 --> 00:02:30,910 So here in toggleMovieModal, we can do that in two different ways - 35 00:02:30,950 --> 00:02:36,170 we can set the class name property here but then we manually have to keep track of which classes we 36 00:02:36,170 --> 00:02:40,880 have and we have to make sure we don't accidentally drop a class which should always be present, like 37 00:02:40,880 --> 00:02:43,700 modal and card, 38 00:02:43,700 --> 00:02:45,260 these classes should always be there 39 00:02:45,290 --> 00:02:50,240 so we have to make sure we don't accidentally remove them by setting class name here to something else 40 00:02:50,570 --> 00:02:56,630 which is not supported by CSS or which misses crucial classes and therefore the better approach actually 41 00:02:56,660 --> 00:03:02,780 is to use the class list object which you learned about and there, the toggle method because this does 42 00:03:02,780 --> 00:03:04,040 exactly what we want, 43 00:03:04,130 --> 00:03:08,400 it checks whether a class is already on the element and if it is, it removes it 44 00:03:08,480 --> 00:03:09,620 and otherwise it adds it and 45 00:03:10,010 --> 00:03:12,120 we want to toggle the visible class. 46 00:03:12,290 --> 00:03:17,780 So this will always keep all other classes on the element but add or remove this class based on its 47 00:03:18,020 --> 00:03:19,480 current state, 48 00:03:19,490 --> 00:03:24,350 so based on the question whether this class already is part of the element or not. 49 00:03:24,350 --> 00:03:28,150 So this will actually hopefully show our modal, 50 00:03:28,160 --> 00:03:34,220 we just have to connect it to the click listener by pointing at toggleMovieModal without parentheses 51 00:03:34,220 --> 00:03:38,980 here of course because we don't want to execute it immediately, we just want to point at this function. 52 00:03:39,380 --> 00:03:44,510 And with that if we now save this and we reload this page and we click this button, indeed this modal opens 53 00:03:44,510 --> 00:03:49,580 up. Now currently we got no real way of closing it other than clicking this button again, clicking cancel 54 00:03:49,580 --> 00:03:52,810 for example won't close it, clicking anywhere else won't close it 55 00:03:53,150 --> 00:03:59,750 and I would also argue it's a bit hard to see. It would be nice if the background would darken, if we 56 00:03:59,750 --> 00:04:06,920 had some black or grayish overlay over the background, also so that we can't click anything else whilst 57 00:04:06,920 --> 00:04:09,390 we are interacting with that overlay. 58 00:04:09,500 --> 00:04:15,980 So that will be the next task, it will be to select this backdrop because that will be exactly what we need 59 00:04:15,980 --> 00:04:23,420 here if we check the CSS code, there if we search for backdrop, you see this in the end is this styling 60 00:04:23,420 --> 00:04:30,260 here which sets the background to a transparent blackish color and positions this as a fixed overlay 61 00:04:30,260 --> 00:04:31,570 behind the modal. 62 00:04:31,580 --> 00:04:39,070 So our goal will be to also toggle the visible class on the backdrop when we show the modal. We could 63 00:04:39,070 --> 00:04:43,940 therefore do it in this toggleMovieModal function but actually I want to create a new function because 64 00:04:43,940 --> 00:04:49,460 we will need to reuse this backdrop, also in another place of this application later 65 00:04:49,460 --> 00:04:51,990 so I don't want to tie it to this function. 66 00:04:52,220 --> 00:04:58,100 Now this again is a great challenge for you, try it on your own first and in the next lecture, we'll implement 67 00:04:58,100 --> 00:04:58,730 this together.