Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,280 --> 00:00:03,160 Let's now actually learn how 2 2 00:00:03,160 --> 00:00:06,223 to manipulate classes with JavaScript. 3 3 00:00:07,630 --> 00:00:09,920 But the first thing that we have to do is 4 4 00:00:09,920 --> 00:00:14,920 to actually react to a click on each of these buttons here. 5 5 00:00:15,460 --> 00:00:18,460 So right now, of course, nothing happens. 6 6 00:00:18,460 --> 00:00:21,110 So now we need to attach an event handler 7 7 00:00:21,110 --> 00:00:22,933 to each of these three buttons. 8 8 00:00:23,890 --> 00:00:25,010 We finished the last video 9 9 00:00:25,010 --> 00:00:27,800 by learning how we can do something for all 10 10 00:00:27,800 --> 00:00:30,270 of these three buttons at the same time. 11 11 00:00:30,270 --> 00:00:31,370 Right. 12 12 00:00:31,370 --> 00:00:35,290 So for that, we used a for loop which loops 13 13 00:00:35,290 --> 00:00:37,230 over this note list, 14 14 00:00:37,230 --> 00:00:40,870 which is basically an array holding all of the buttons. 15 15 00:00:40,870 --> 00:00:43,617 And so, this "btnsOpenModal", 16 16 00:00:45,100 --> 00:00:46,750 at position number "I" 17 17 00:00:46,750 --> 00:00:49,980 is the current button element in each iteration. 18 18 00:00:49,980 --> 00:00:51,860 And then from there we simply write 19 19 00:00:51,860 --> 00:00:53,710 the text content property 20 20 00:00:53,710 --> 00:00:56,623 just like on any other element. 21 21 00:00:57,880 --> 00:01:00,230 But now, let's take it one step further 22 22 00:01:00,230 --> 00:01:04,070 and instead of simply reading the text content property, 23 23 00:01:04,070 --> 00:01:06,870 we will call the add event listener method, 24 24 00:01:06,870 --> 00:01:10,150 just like we learned in the last project. 25 25 00:01:10,150 --> 00:01:10,983 Okay. 26 26 00:01:10,983 --> 00:01:14,700 So remember, in order to respond to a click event, 27 27 00:01:14,700 --> 00:01:19,000 we will attach an event handler function to the element. 28 28 00:01:19,000 --> 00:01:21,300 And event handler and event listener 29 29 00:01:21,300 --> 00:01:23,080 are pretty much the same thing. 30 30 00:01:23,080 --> 00:01:26,360 So that's why this method is called "event listener." 31 31 00:01:26,360 --> 00:01:31,010 So let's say, add event listener, 32 32 00:01:31,010 --> 00:01:34,550 and then the name of the event. 33 33 00:01:34,550 --> 00:01:37,220 And that is, once more, the click event. 34 34 00:01:37,220 --> 00:01:39,780 And then the second argument is the function 35 35 00:01:39,780 --> 00:01:42,950 which will contain the code that should be executed 36 36 00:01:42,950 --> 00:01:44,820 once the button is clicked. 37 37 00:01:44,820 --> 00:01:47,800 So, that will be an anonymous function. 38 38 00:01:47,800 --> 00:01:50,870 Remember, so a function without a name, 39 39 00:01:50,870 --> 00:01:54,370 and it is of course also a function expression. 40 40 00:01:54,370 --> 00:01:56,980 Because it's simply this value here. 41 41 00:01:56,980 --> 00:01:58,710 So this function value. 42 42 00:01:58,710 --> 00:02:01,420 So just as I explained multiple times already, 43 43 00:02:01,420 --> 00:02:04,160 but it's important to keep remembering this stuff 44 44 00:02:04,160 --> 00:02:06,910 as we go here through this section. 45 45 00:02:06,910 --> 00:02:08,610 And to start, let's simply log 46 46 00:02:08,610 --> 00:02:11,530 to the console the text content of the button 47 47 00:02:11,530 --> 00:02:12,810 that was clicked. 48 48 00:02:12,810 --> 00:02:14,690 Now here was actually a mistake, 49 49 00:02:14,690 --> 00:02:16,140 because of course we don't want 50 50 00:02:16,140 --> 00:02:18,910 to log to the console this event listener. 51 51 00:02:18,910 --> 00:02:19,900 Right. 52 52 00:02:19,900 --> 00:02:21,940 It doesn't make any sense. 53 53 00:02:21,940 --> 00:02:24,350 Instead we now want to log something 54 54 00:02:24,350 --> 00:02:28,240 to the console right here, inside this handler function. 55 55 00:02:28,240 --> 00:02:31,440 So that's just "CL" again. 56 56 00:02:31,440 --> 00:02:36,250 And then let's just say, "Button clicked." 57 57 00:02:36,250 --> 00:02:37,760 Give it a save. 58 58 00:02:37,760 --> 00:02:40,340 And now each of these three buttons here 59 59 00:02:40,340 --> 00:02:43,983 has their own event handler function attached to it. 60 60 00:02:44,890 --> 00:02:46,476 So, button clicked 61 61 00:02:46,476 --> 00:02:50,090 and when we click on this one then the same should appear. 62 62 00:02:50,090 --> 00:02:52,070 And indeed, now we have two. 63 63 00:02:52,070 --> 00:02:54,090 So that's what this two means. 64 64 00:02:54,090 --> 00:02:56,270 And as we click here, we get another one, 65 65 00:02:56,270 --> 00:02:58,220 and another, and another. 66 66 00:02:58,220 --> 00:03:01,050 And so, yeah, this worked. 67 67 00:03:01,050 --> 00:03:03,600 So we attached this function here now 68 68 00:03:03,600 --> 00:03:05,670 to all of the three buttons. 69 69 00:03:05,670 --> 00:03:08,720 And again, because we did it here in the loop, 70 70 00:03:08,720 --> 00:03:11,360 while we were looping over this note list, 71 71 00:03:11,360 --> 00:03:14,530 which contains all of these three buttons. 72 72 00:03:14,530 --> 00:03:17,248 Okay, but now of course, this is not the only thing 73 73 00:03:17,248 --> 00:03:19,400 that we want to do. 74 74 00:03:19,400 --> 00:03:21,790 Instead, we want to display the model. 75 75 00:03:21,790 --> 00:03:25,730 And remember that this model is already in the HTML. 76 76 00:03:25,730 --> 00:03:29,280 It is hidden right now because it has the hidden class. 77 77 00:03:29,280 --> 00:03:32,460 If it didn't have this hidden class, it would be visible. 78 78 00:03:32,460 --> 00:03:33,650 Let me actually show that. 79 79 00:03:33,650 --> 00:03:35,954 So I delete it, and if I save it now, 80 80 00:03:35,954 --> 00:03:38,373 then you see here is the modal. 81 81 00:03:41,500 --> 00:03:42,333 Right. 82 82 00:03:42,333 --> 00:03:43,166 Here it is. 83 83 00:03:43,166 --> 00:03:46,402 And that's because the hidden class is now gone. 84 84 00:03:46,402 --> 00:03:50,670 Basically this is exactly what we will do using JavaScript. 85 85 00:03:50,670 --> 00:03:52,913 So, we're moving this class. 86 86 00:03:55,840 --> 00:03:59,270 So, what we want to do is take the modal. 87 87 00:03:59,270 --> 00:04:02,093 So this element that we selected here previously. 88 88 00:04:03,474 --> 00:04:07,770 So we selected it, then stored it into this variable. 89 89 00:04:07,770 --> 00:04:10,387 And so now we take that selected element 90 90 00:04:10,387 --> 00:04:15,370 and on there we can read the class list property. 91 91 00:04:15,370 --> 00:04:18,240 So that's class list. 92 92 00:04:18,240 --> 00:04:20,700 And then this class list property itself 93 93 00:04:20,700 --> 00:04:22,680 has a couple of methods. 94 94 00:04:22,680 --> 00:04:25,627 And the one we're gonna use now is "remove." 95 95 00:04:28,660 --> 00:04:30,790 And as I just explained, the class 96 96 00:04:30,790 --> 00:04:34,810 that we're gonna remove is the class called "hidden." 97 97 00:04:34,810 --> 00:04:36,020 Okay. 98 98 00:04:36,020 --> 00:04:38,790 And we can actually also remove multiple classes. 99 99 00:04:38,790 --> 00:04:41,900 For that we just have to pass them in with commas, 100 100 00:04:41,900 --> 00:04:42,890 like this. 101 101 00:04:42,890 --> 00:04:45,810 So here we then specify more classes. 102 102 00:04:45,810 --> 00:04:49,290 Just keep in mind that we do not use the dot here. 103 103 00:04:49,290 --> 00:04:52,160 So not like this, okay. 104 104 00:04:52,160 --> 00:04:54,657 And I'm telling you that because I used to do 105 105 00:04:54,657 --> 00:04:56,090 that mistake myself. 106 106 00:04:56,090 --> 00:04:57,417 And I remembered that. 107 107 00:04:57,417 --> 00:04:59,910 And so, I want you to avoid it. 108 108 00:04:59,910 --> 00:05:02,750 So the dot is only for the selector. 109 109 00:05:02,750 --> 00:05:06,170 But here we are not anymore selecting anything. 110 110 00:05:06,170 --> 00:05:08,670 We're just passing in the name of the class. 111 111 00:05:08,670 --> 00:05:11,963 And so all we need is a string with that name. 112 112 00:05:13,170 --> 00:05:17,230 Now besides removing classes, we can also add classes 113 113 00:05:17,230 --> 00:05:18,450 and we can even check 114 114 00:05:18,450 --> 00:05:22,210 if an element contains a certain class or not. 115 115 00:05:22,210 --> 00:05:25,980 And we will use all of them in this video and the next one. 116 116 00:05:25,980 --> 00:05:27,200 Okay. 117 117 00:05:27,200 --> 00:05:29,900 And this should actually already do the trick. 118 118 00:05:29,900 --> 00:05:31,860 So when I save this now 119 119 00:05:31,860 --> 00:05:36,020 and let's click here, and it worked. 120 120 00:05:36,020 --> 00:05:37,200 Great. 121 121 00:05:37,200 --> 00:05:38,930 So the hidden class is now gone 122 122 00:05:38,930 --> 00:05:40,850 and I can show that to you here. 123 123 00:05:40,850 --> 00:05:42,110 Using the inspect 124 124 00:05:43,710 --> 00:05:46,090 and then we need to give it some more space back. 125 125 00:05:46,090 --> 00:05:48,000 And then you see here the modal class 126 126 00:05:48,000 --> 00:05:51,470 that used to be here is no longer there. 127 127 00:05:51,470 --> 00:05:52,910 Now we can of course not close it 128 128 00:05:52,910 --> 00:05:55,670 because that functionality is not yet there. 129 129 00:05:55,670 --> 00:05:57,773 But at least now it is open. 130 130 00:05:58,690 --> 00:06:01,470 Now we also have the overlay which is this one, 131 131 00:06:01,470 --> 00:06:03,591 which also has the hidden class. 132 132 00:06:03,591 --> 00:06:06,400 In order to show that overlay, 133 133 00:06:06,400 --> 00:06:08,160 we need to remove the hidden class 134 134 00:06:08,160 --> 00:06:09,873 from this element as well. 135 135 00:06:11,610 --> 00:06:14,430 So that's easy enough. 136 136 00:06:14,430 --> 00:06:16,590 It's just the same thing again. 137 137 00:06:16,590 --> 00:06:21,140 So overlay dot class list, 138 138 00:06:21,140 --> 00:06:22,970 dot remove, 139 139 00:06:22,970 --> 00:06:25,223 and then again, hidden. 140 140 00:06:29,380 --> 00:06:30,253 All right. 141 141 00:06:31,320 --> 00:06:33,850 And, yeah. 142 142 00:06:33,850 --> 00:06:34,890 Beautiful. 143 143 00:06:34,890 --> 00:06:36,650 That's really nice. 144 144 00:06:36,650 --> 00:06:40,120 So using classes like this is a really, really great 145 145 00:06:40,120 --> 00:06:43,310 and handy way of manipulating webpages. 146 146 00:06:43,310 --> 00:06:46,240 And in practice adding and removing classes, 147 147 00:06:46,240 --> 00:06:48,030 like we just did here, 148 148 00:06:48,030 --> 00:06:52,410 is the main way in which we change styles on websites. 149 149 00:06:52,410 --> 00:06:56,170 That's because a class basically aggregates many styles 150 150 00:06:56,170 --> 00:06:58,270 in just one class. 151 151 00:06:58,270 --> 00:06:59,300 Now in this case actually, 152 152 00:06:59,300 --> 00:07:04,040 the hidden class only contains this one style here. 153 153 00:07:04,040 --> 00:07:05,650 So this would've been the same 154 154 00:07:05,650 --> 00:07:10,650 as specifying the display style directly in JavaScript. 155 155 00:07:11,100 --> 00:07:13,940 So like we learned in the last project. 156 156 00:07:13,940 --> 00:07:15,730 So we could've done also, 157 157 00:07:15,730 --> 00:07:20,720 modal, dot style, dot display 158 158 00:07:20,720 --> 00:07:23,690 and then send it to block, 159 159 00:07:23,690 --> 00:07:24,893 I guess, what was it? 160 160 00:07:26,580 --> 00:07:27,413 Yeah, nothing. 161 161 00:07:27,413 --> 00:07:31,770 So basically display none means that it's not visible. 162 162 00:07:31,770 --> 00:07:33,370 And if we want it to be visible, 163 163 00:07:33,370 --> 00:07:35,623 we would set it to display block. 164 164 00:07:37,020 --> 00:07:40,230 Okay, so this would do the exact same thing. 165 165 00:07:40,230 --> 00:07:42,750 But you can see that it's a bit more of a pain. 166 166 00:07:42,750 --> 00:07:44,680 Because then we would have to memorize 167 167 00:07:44,680 --> 00:07:47,500 what exactly we have to write here. 168 168 00:07:47,500 --> 00:07:50,760 So these property name and the exact value. 169 169 00:07:50,760 --> 00:07:52,720 And this is only for one style. 170 170 00:07:52,720 --> 00:07:56,760 Imagine that the hidden class actually had 10 properties. 171 171 00:07:56,760 --> 00:07:58,210 Then we would have to write all 172 172 00:07:58,210 --> 00:07:59,740 of this properties here manually 173 173 00:07:59,740 --> 00:08:01,880 and change all their values. 174 174 00:08:01,880 --> 00:08:04,970 So that's a lot of work and it's not fun. 175 175 00:08:04,970 --> 00:08:07,560 And so instead we can basically aggregate all 176 176 00:08:07,560 --> 00:08:09,780 of this properties in one class, 177 177 00:08:09,780 --> 00:08:12,100 that we identify here in CSS, 178 178 00:08:12,100 --> 00:08:14,980 and then in JavaScript we simply add 179 179 00:08:14,980 --> 00:08:17,420 and remove these classes as we need 180 180 00:08:17,420 --> 00:08:19,980 or don't need these styles. 181 181 00:08:19,980 --> 00:08:23,930 So, usually when you need to manipulate styles on a page, 182 182 00:08:23,930 --> 00:08:27,260 then always just export the styles into a class, 183 183 00:08:27,260 --> 00:08:30,580 and then use the class just like we did here. 184 184 00:08:30,580 --> 00:08:31,680 All right. 185 185 00:08:31,680 --> 00:08:35,520 Now what we just did here is for showing the modal window. 186 186 00:08:35,520 --> 00:08:39,060 But now let's also add the ability of then hiding it 187 187 00:08:39,060 --> 00:08:40,453 by clicking that button. 188 188 00:08:41,330 --> 00:08:43,243 So, this button here. 189 189 00:08:44,570 --> 00:08:45,450 Okay. 190 190 00:08:45,450 --> 00:08:46,680 So right now, as I said, 191 191 00:08:46,680 --> 00:08:48,580 it's not possible to close the window, 192 192 00:08:48,580 --> 00:08:50,753 unless we reload the whole page. 193 193 00:08:51,610 --> 00:08:56,220 So, let's take this button here that we already selected 194 194 00:08:56,220 --> 00:09:00,310 and simply add an event listener to that one as well. 195 195 00:09:00,310 --> 00:09:05,310 So, button close modal, dot add event listener. 196 196 00:09:08,740 --> 00:09:11,793 And again waiting for the click event. 197 197 00:09:12,700 --> 00:09:15,683 And then let's specify or function here again. 198 198 00:09:17,880 --> 00:09:18,940 Okay. 199 199 00:09:18,940 --> 00:09:21,440 So again we are just defining the function here. 200 200 00:09:21,440 --> 00:09:23,540 We are not calling it itself. 201 201 00:09:23,540 --> 00:09:26,600 It is the JavaScript engin who will call this function 202 202 00:09:26,600 --> 00:09:31,600 as soon as the click event happens on exactly this element. 203 203 00:09:31,770 --> 00:09:33,180 All right. 204 204 00:09:33,180 --> 00:09:36,450 Anyway, here we now want to do the opposite. 205 205 00:09:36,450 --> 00:09:40,070 So basically we want to add the class back on. 206 206 00:09:40,070 --> 00:09:45,070 So modal dot class list, dot add, this time. 207 207 00:09:47,150 --> 00:09:50,360 And so, we add the hidden class back on. 208 208 00:09:50,360 --> 00:09:52,550 Which will then hide the modal. 209 209 00:09:52,550 --> 00:09:55,362 And the same actually for the overlay. 210 210 00:09:55,362 --> 00:09:58,612 So let's just duplicate this line here. 211 211 00:09:59,843 --> 00:10:02,790 And change this to overlay 212 212 00:10:02,790 --> 00:10:05,923 and yeah, this should already work. 213 213 00:10:08,740 --> 00:10:10,570 So that already worked before, 214 214 00:10:10,570 --> 00:10:12,510 and now let's check it. 215 215 00:10:12,510 --> 00:10:14,850 And yes, it does. 216 216 00:10:14,850 --> 00:10:17,663 And it should work for all the three buttons of course. 217 217 00:10:18,720 --> 00:10:21,090 And yeah, it does. 218 218 00:10:21,090 --> 00:10:21,980 Great. 219 219 00:10:21,980 --> 00:10:25,350 So again, this is a very common thing to do. 220 220 00:10:25,350 --> 00:10:28,020 We change the appearance of websites 221 221 00:10:28,020 --> 00:10:30,630 and of elements like this all the time, 222 222 00:10:30,630 --> 00:10:33,090 using this class technique. 223 223 00:10:33,090 --> 00:10:37,110 Next up, usually when we click outside of a modal, 224 224 00:10:37,110 --> 00:10:39,880 then the modal window also closes. 225 225 00:10:39,880 --> 00:10:41,750 So that's pretty common, right. 226 226 00:10:41,750 --> 00:10:44,780 So what I mean is, clicking this area here outside, 227 227 00:10:44,780 --> 00:10:47,110 should also close this window. 228 228 00:10:47,110 --> 00:10:49,550 So basically we want this in a code here 229 229 00:10:49,550 --> 00:10:53,450 to also be executed when we click on the modal. 230 230 00:10:53,450 --> 00:10:54,853 Or actually on the overlay. 231 231 00:10:55,750 --> 00:10:56,783 So let's do that. 232 232 00:10:58,350 --> 00:11:00,923 So overlay, dot add, 233 233 00:11:02,680 --> 00:11:04,373 event listener, 234 234 00:11:06,520 --> 00:11:09,390 click, and now what should I do? 235 235 00:11:09,390 --> 00:11:13,740 Well, just to make it work, I can copy this code here. 236 236 00:11:13,740 --> 00:11:17,933 But you already know that this is not a good idea, probably. 237 237 00:11:20,340 --> 00:11:23,510 But let's just for now see if it works. 238 238 00:11:23,510 --> 00:11:25,350 So if we click outside, 239 239 00:11:25,350 --> 00:11:27,084 so this is the overlay. 240 240 00:11:27,084 --> 00:11:29,300 So as we click it now, then indeed, 241 241 00:11:29,300 --> 00:11:33,120 the modal and the overlay are both hidden again. 242 242 00:11:33,120 --> 00:11:34,050 Great. 243 243 00:11:34,050 --> 00:11:35,440 So this works now. 244 244 00:11:35,440 --> 00:11:38,920 But again, we do not want the same code here 245 245 00:11:38,920 --> 00:11:40,720 in these two places. 246 246 00:11:40,720 --> 00:11:44,160 We want actually the exact same function to be executed, 247 247 00:11:44,160 --> 00:11:46,410 no matter if we click the close button 248 248 00:11:46,410 --> 00:11:48,660 or if we click the overlay. 249 249 00:11:48,660 --> 00:11:50,937 So, how should we do that? 250 250 00:11:50,937 --> 00:11:53,700 We can simply export this function 251 251 00:11:53,700 --> 00:11:57,050 into a more real named function. 252 252 00:11:57,050 --> 00:11:58,980 So let me cut the code from here 253 253 00:11:59,900 --> 00:12:04,900 and then I will create a function called, "close modal". 254 254 00:12:05,110 --> 00:12:10,110 So const, close modal, equals this function value. 255 255 00:12:12,450 --> 00:12:13,430 Okay. 256 256 00:12:13,430 --> 00:12:15,510 And so now, this variable here is 257 257 00:12:15,510 --> 00:12:17,780 what holds the function value. 258 258 00:12:17,780 --> 00:12:21,210 So what I can do now is to here specify 259 259 00:12:21,210 --> 00:12:24,029 that close modal function. 260 260 00:12:24,029 --> 00:12:25,250 And that's it. 261 261 00:12:25,250 --> 00:12:26,740 That's the function right here. 262 262 00:12:26,740 --> 00:12:29,120 So this what we have here, 263 263 00:12:29,120 --> 00:12:31,253 is exactly the same as this. 264 264 00:12:32,090 --> 00:12:35,380 And again, notice that we are not calling the function. 265 265 00:12:35,380 --> 00:12:37,273 We are not doing this. 266 266 00:12:37,273 --> 00:12:39,660 This would not work at all, 267 267 00:12:39,660 --> 00:12:42,550 because it will immediately called a function, 268 268 00:12:42,550 --> 00:12:45,980 as soon as JavaScript executes this line. 269 269 00:12:45,980 --> 00:12:47,940 But that's not what we want to happen. 270 270 00:12:47,940 --> 00:12:50,960 We want to close modal function to be executed 271 271 00:12:50,960 --> 00:12:53,890 only as soon as the click event happens 272 272 00:12:53,890 --> 00:12:56,173 on the close modal button. 273 273 00:12:59,240 --> 00:13:01,860 And now, here we can just do the same thing. 274 274 00:13:01,860 --> 00:13:03,863 So again, close modal. 275 275 00:13:04,750 --> 00:13:06,930 And that's it, that's so much better 276 276 00:13:06,930 --> 00:13:08,650 than what we had before. 277 277 00:13:08,650 --> 00:13:11,240 Not only did we make our code more dry. 278 278 00:13:11,240 --> 00:13:13,470 But we also made it more readable. 279 279 00:13:13,470 --> 00:13:16,870 More expressive, and more declarative. 280 280 00:13:16,870 --> 00:13:19,570 So right now, when we read this code here, 281 281 00:13:19,570 --> 00:13:21,810 it's a lot easier to understand. 282 282 00:13:21,810 --> 00:13:25,620 So, we just read, button close modal, 283 283 00:13:25,620 --> 00:13:28,940 add the event listener of close the modal. 284 284 00:13:28,940 --> 00:13:30,320 Okay, that makes sense. 285 285 00:13:30,320 --> 00:13:33,030 So, just by looking at this line we see 286 286 00:13:33,030 --> 00:13:35,960 that when this element is clicked, 287 287 00:13:35,960 --> 00:13:37,610 then we want to close the modal. 288 288 00:13:37,610 --> 00:13:40,050 The same when the overlay is clicked, 289 289 00:13:40,050 --> 00:13:41,827 we want to close the modal. 290 290 00:13:41,827 --> 00:13:42,660 All right. 291 291 00:13:42,660 --> 00:13:45,000 And so, we know exactly what's gonna happen 292 292 00:13:45,000 --> 00:13:47,130 when we read this code. 293 293 00:13:47,130 --> 00:13:49,010 And so for that advantage alone, 294 294 00:13:49,010 --> 00:13:52,760 let's do the same thing here with this function. 295 295 00:13:52,760 --> 00:13:55,470 So the one that opens the modal. 296 296 00:13:55,470 --> 00:13:56,470 So let me grab this one, 297 297 00:13:56,470 --> 00:13:59,543 just put him up here. 298 298 00:14:00,460 --> 00:14:02,653 Can also get rid of this console dot log. 299 299 00:14:03,540 --> 00:14:07,260 So let's put the two functions here together. 300 300 00:14:07,260 --> 00:14:08,543 So open modal. 301 301 00:14:10,120 --> 00:14:14,073 And now this function will be just this. 302 302 00:14:15,380 --> 00:14:16,213 Right? 303 303 00:14:16,213 --> 00:14:18,003 So I'll just cut it again. 304 304 00:14:19,180 --> 00:14:20,890 And paste it here. 305 305 00:14:20,890 --> 00:14:24,230 And so now we assigned this function here 306 306 00:14:24,230 --> 00:14:26,760 to this open modal variable. 307 307 00:14:26,760 --> 00:14:30,150 So once more a nice function expression. 308 308 00:14:30,150 --> 00:14:31,780 And now we'll just take that 309 309 00:14:31,780 --> 00:14:32,920 and put it here. 310 310 00:14:32,920 --> 00:14:35,030 Open modal. 311 311 00:14:35,030 --> 00:14:37,550 And of course again, we don't call it. 312 312 00:14:37,550 --> 00:14:40,630 We simply declare or we define it here. 313 313 00:14:40,630 --> 00:14:43,697 And tell JavaScript, "Hey, whenever a click happens 314 314 00:14:43,697 --> 00:14:45,537 "on one of these buttons, 315 315 00:14:45,537 --> 00:14:47,410 "then please call this function 316 316 00:14:47,410 --> 00:14:49,397 "that we just specified here." 317 317 00:14:50,750 --> 00:14:51,583 All right. 318 318 00:14:52,530 --> 00:14:54,600 And so, this is our code. 319 319 00:14:54,600 --> 00:14:56,043 And it's a lot better. 320 320 00:14:56,930 --> 00:15:00,120 So actually we just did some refactoring here. 321 321 00:15:00,120 --> 00:15:02,810 And so, restructuring our code 322 322 00:15:02,810 --> 00:15:05,040 without changing the functionality. 323 323 00:15:05,040 --> 00:15:08,600 And so that means that our code should still work the same. 324 324 00:15:08,600 --> 00:15:10,223 And indeed it does. 325 325 00:15:11,380 --> 00:15:13,390 We can open and close in two ways 326 326 00:15:13,390 --> 00:15:17,780 and we can open it on all of the three buttons. 327 327 00:15:17,780 --> 00:15:18,640 Beautiful. 328 328 00:15:18,640 --> 00:15:20,890 That's really, really great. 329 329 00:15:20,890 --> 00:15:24,240 So to recap, if you want to use the same function 330 330 00:15:24,240 --> 00:15:26,640 in multiple event listeners, 331 331 00:15:26,640 --> 00:15:29,830 then you need to specify that function 332 332 00:15:29,830 --> 00:15:32,710 as a separate function, like this one here. 333 333 00:15:32,710 --> 00:15:34,440 And then you can pass that function 334 334 00:15:34,440 --> 00:15:38,670 as an argument to multiple "add event listener" methods. 335 335 00:15:38,670 --> 00:15:40,920 So just like we did it here. 336 336 00:15:40,920 --> 00:15:41,830 Right. 337 337 00:15:41,830 --> 00:15:44,450 So that's one of the takeaways of this video. 338 338 00:15:44,450 --> 00:15:47,510 And the other one is that we really, in practice, 339 339 00:15:47,510 --> 00:15:48,850 use the functionality 340 340 00:15:48,850 --> 00:15:51,960 of adding and removing classes all the time 341 341 00:15:51,960 --> 00:15:56,040 in order to change the appearance of elements on our page. 342 342 00:15:56,040 --> 00:15:57,850 And that's because classes allow us 343 343 00:15:57,850 --> 00:16:02,850 to basically aggregate multiple CSS properties in just one, 344 344 00:16:02,870 --> 00:16:03,920 like a container. 345 345 00:16:03,920 --> 00:16:06,890 So each class functions a bit like a container 346 346 00:16:06,890 --> 00:16:09,000 with a lot of properties in it. 347 347 00:16:09,000 --> 00:16:12,660 And then here, by adding and removing them, 348 348 00:16:12,660 --> 00:16:16,860 we basically can activate and deactivate certain styles, 349 349 00:16:16,860 --> 00:16:18,490 all at the same time. 350 350 00:16:18,490 --> 00:16:20,590 Okay, so keep that in mind. 351 351 00:16:20,590 --> 00:16:23,680 And even better, actually write notes maybe 352 352 00:16:23,680 --> 00:16:25,040 with what I'm saying, 353 353 00:16:25,040 --> 00:16:27,390 because this is really important stuff. 354 354 00:16:27,390 --> 00:16:29,440 So working with classes is something 355 355 00:16:29,440 --> 00:16:31,440 that we do all the time. 356 356 00:16:31,440 --> 00:16:34,850 And there is a third thing that we do with classes, 357 357 00:16:34,850 --> 00:16:38,160 which is to check if a class is actually present 358 358 00:16:38,160 --> 00:16:39,770 on a certain element. 359 359 00:16:39,770 --> 00:16:42,670 And that's gonna be the topic of the next video, 360 360 00:16:42,670 --> 00:16:45,870 along with a learning how to actually deal 361 361 00:16:45,870 --> 00:16:48,030 with a key press event. 362 362 00:16:48,030 --> 00:16:51,070 So that's yet another really exciting video. 363 363 00:16:51,070 --> 00:16:53,053 So, let's now check that out. 30153