1
00:00:00,090 --> 00:00:07,110
And completing this part of the course where we've got a model popping up and hope you're able to produce

2
00:00:07,110 --> 00:00:14,130
the same functionality where when you click a button on the page, it triggers JavaScript to show an

3
00:00:14,130 --> 00:00:15,270
element that was hidden.

4
00:00:15,520 --> 00:00:17,840
And then you can see the elements contents.

5
00:00:17,850 --> 00:00:21,810
And then when you're ready to go back to the main page, you can either click the clothes, you can

6
00:00:21,810 --> 00:00:24,870
press outside and the overlay, or you could press escape.

7
00:00:24,990 --> 00:00:26,240
So do try that out.

8
00:00:26,250 --> 00:00:31,440
And usually I do try out all the different applications just to make sure that all the functionality

9
00:00:31,440 --> 00:00:32,940
is there that I was looking for.

10
00:00:33,030 --> 00:00:35,460
And now we're ready to do our code review.

11
00:00:35,640 --> 00:00:38,460
So everything is there functioning as needed.

12
00:00:38,790 --> 00:00:41,130
So first we set up a bunch of success.

13
00:00:41,340 --> 00:00:45,000
We did a whole bunch of styling to make our model look nice.

14
00:00:45,150 --> 00:00:47,850
And of course, you can style the model as needed.

15
00:00:48,000 --> 00:00:51,600
So however you want to style your model, you don't have to style it exactly like mine.

16
00:00:51,720 --> 00:00:53,640
You don't even need all the same elements.

17
00:00:53,880 --> 00:00:58,950
The main part is that you've got one main container element that you can hide and show.

18
00:00:58,950 --> 00:01:03,440
And then also users are usually expecting a way to close that Pop-Up window.

19
00:01:03,600 --> 00:01:06,600
So providing them several options is always a great way to go.

20
00:01:06,810 --> 00:01:11,310
Another part, of course, you need a button to create that interaction so the user has something to

21
00:01:11,310 --> 00:01:14,050
press in order to show our Pop-Up window.

22
00:01:14,370 --> 00:01:17,460
So once we've set that up, we're ready to move into the JavaScript.

23
00:01:17,670 --> 00:01:22,530
And the first thing that I usually like to do is select the elements into JavaScript objects.

24
00:01:22,800 --> 00:01:29,420
This makes it really easy to reference them and then utilize them within the functionality of our code.

25
00:01:29,610 --> 00:01:35,670
So just over here with Button, so we selected all of the elements that we want to be able to be clicked.

26
00:01:35,910 --> 00:01:42,210
They all have a class of model and these are the ones that we want users to be able to click and open

27
00:01:42,210 --> 00:01:43,320
up our model.

28
00:01:43,620 --> 00:01:48,480
So for each one of those elements that have a class or potentially we could have more than one of these

29
00:01:48,480 --> 00:01:52,290
buttons or we could have different elements, they don't have to be all the different buttons.

30
00:01:52,410 --> 00:01:56,010
As long as they have that class, we could potentially have more than one.

31
00:01:56,170 --> 00:01:59,490
And this is where we loop through and we iterate through all of them.

32
00:01:59,640 --> 00:02:04,770
And then we're attaching an event listener to them using a function called Make Click.

33
00:02:04,980 --> 00:02:11,070
And the beauty about doing it this way is that this also allows you to attach it to different elements

34
00:02:11,070 --> 00:02:11,640
as well.

35
00:02:11,820 --> 00:02:14,790
So you don't necessarily only need to use it within this function.

36
00:02:14,940 --> 00:02:18,480
You could use it multiple places within your code if you need to.

37
00:02:18,930 --> 00:02:20,690
So next, we created that function.

38
00:02:20,700 --> 00:02:22,500
So this is the make click function.

39
00:02:22,710 --> 00:02:24,870
It adds in an event listener to the element.

40
00:02:25,440 --> 00:02:30,960
Then we add in to our model wrapper element.

41
00:02:30,970 --> 00:02:33,300
So that's the another one that we selected earlier on.

42
00:02:33,480 --> 00:02:35,960
So that's that element with the class of modal wrapper.

43
00:02:36,210 --> 00:02:40,230
So what that will do is we'll add in the show model to that element.

44
00:02:40,440 --> 00:02:46,080
And we saw it when we're applying our styling that when we're not in a show model class, then it shows

45
00:02:46,080 --> 00:02:49,390
the model and when we remove it, then the model disappears.

46
00:02:49,410 --> 00:02:51,810
So that was all taken care of within our success.

47
00:02:52,020 --> 00:02:56,510
And JavaScript just had to add and remove that class in order to show and hide it.

48
00:02:56,910 --> 00:02:59,850
We also select the element with clothes.

49
00:03:00,010 --> 00:03:02,730
So this is within anywhere within the document.

50
00:03:03,000 --> 00:03:09,280
We select all the elements with class of clothes and then we add an event listener to them.

51
00:03:09,630 --> 00:03:12,600
So in this case, we only have this the one that we're selecting.

52
00:03:12,840 --> 00:03:14,370
So it should actually be all of them.

53
00:03:14,370 --> 00:03:20,280
It's only applying to the first one with a class of clothes within the page and we're playing that Lessner.

54
00:03:20,280 --> 00:03:25,470
So once the button gets clicked, then we're returning modal wrapper and that's going to be returning

55
00:03:25,470 --> 00:03:28,940
our function so that we don't have to do any of the other functionality here.

56
00:03:29,550 --> 00:03:34,020
Next, we've got another event listener and this event listener is within the overlays.

57
00:03:34,020 --> 00:03:39,490
So if the overlay gets clicked, then we also close the model and the last but of course, not least

58
00:03:39,550 --> 00:03:41,520
can get rid of the console message.

59
00:03:41,820 --> 00:03:46,080
And we are listening for the user to press the escape button.

60
00:03:46,290 --> 00:03:52,770
And if they do, then you guessed it, we are returning updating the class list and removing the show

61
00:03:52,770 --> 00:03:58,710
model class from that element and effectively hiding that element once again in the page, and then

62
00:03:58,710 --> 00:04:01,700
the user can click it and show it once again.

63
00:04:01,740 --> 00:04:03,930
So that's what we've done with in the earlier lessons.

64
00:04:03,930 --> 00:04:06,960
And I hope you had an opportunity to try this out.

65
00:04:07,110 --> 00:04:09,660
And remember, all the source code is also included.

66
00:04:09,660 --> 00:04:16,020
And if you do need help or clarification, I'm always happy to help and help you get this application

67
00:04:16,020 --> 00:04:16,410
going.

68
00:04:16,410 --> 00:04:21,210
So try it out for yourself, added into your own projects, extend on it, build on it and make it even

69
00:04:21,210 --> 00:04:21,510
better.