1
00:00:00,690 --> 00:00:04,920
This is a challenge lesson to take what we've learned in the earlier lessons and apply it.

2
00:00:05,460 --> 00:00:11,940
So the objective of this challenge is to have some images on your page and make these images clickable,

3
00:00:12,300 --> 00:00:15,490
adding event listeners and then also popping up.

4
00:00:15,510 --> 00:00:21,870
So getting the image, source attribute and then showing that on the large screen, in order to do that,

5
00:00:21,870 --> 00:00:28,170
you can do a window open using the source and then the image name and then you can set these parameters

6
00:00:28,290 --> 00:00:30,750
for the pop up window that's going to open up.

7
00:00:30,930 --> 00:00:35,320
So you can pause the video, try this out and I'll walk you through the solution.

8
00:00:35,340 --> 00:00:41,640
Coming up, I've added three images into our indexed HTML and you can see there's three different images.

9
00:00:41,640 --> 00:00:43,610
They all have a source value.

10
00:00:43,830 --> 00:00:48,510
So that's the attribute that we're going to use in order to select and create our Pop-Up window.

11
00:00:48,780 --> 00:00:52,280
So first thing we need to do is select all of the images on the page.

12
00:00:52,290 --> 00:00:54,080
We've got three of them being displayed there.

13
00:00:54,090 --> 00:00:57,750
Let's set up a variable in order to hold that object information.

14
00:00:58,080 --> 00:01:04,020
We can call it image list and then using the document object using query selector.

15
00:01:04,230 --> 00:01:11,100
Let's select all of the images from the page and we can refresh and then type in image list just to

16
00:01:11,100 --> 00:01:14,010
make sure that we've got our node list of elements there.

17
00:01:14,280 --> 00:01:16,800
Next, we need to loop through that list.

18
00:01:17,100 --> 00:01:25,140
So using a for loop setting eye to zero, we're going to loop through while I is less than image list

19
00:01:25,140 --> 00:01:27,640
length and then increment I by one.

20
00:01:27,660 --> 00:01:30,800
And this is where we're going to add the event listener on the inside here.

21
00:01:31,140 --> 00:01:37,350
So as we loop through each one of the elements with an index value of AI, we're going to add an event

22
00:01:37,350 --> 00:01:39,080
listener on that element.

23
00:01:39,090 --> 00:01:42,960
So adding event, listener and event that we're listening for is a click.

24
00:01:42,960 --> 00:01:48,570
And when it gets clicked so we can create an anonymous function or we can just we can create a function

25
00:01:48,570 --> 00:01:50,370
name or we could just use the anonymous one.

26
00:01:50,670 --> 00:01:54,050
And in this case, there's not a whole bunch of information that we need to do.

27
00:01:54,570 --> 00:01:57,360
We can select the current element.

28
00:01:57,540 --> 00:02:03,120
So whenever it gets clicked, you can see we get the image options there and the image value is there.

29
00:02:03,120 --> 00:02:09,210
So you can use source and that will give you the path to where the source, because this is just a regular

30
00:02:09,210 --> 00:02:15,360
object and it'll give you the path to where the image is located and you can use that within the window

31
00:02:15,690 --> 00:02:18,840
open method in order to create the popup.

32
00:02:19,110 --> 00:02:25,380
So using this source as the path and then specifying my image, that's just a name for it.

33
00:02:25,590 --> 00:02:28,410
And then there's a bunch of parameters that you can add in here.

34
00:02:28,440 --> 00:02:30,180
So sizable equals.

35
00:02:30,180 --> 00:02:30,780
Yes.

36
00:02:30,790 --> 00:02:32,820
And let's let's just get a width for that.

37
00:02:32,850 --> 00:02:35,420
So five hundred and this should be equal signs actually.

38
00:02:35,490 --> 00:02:38,560
And these are just regular parameters for the pop up window.

39
00:02:38,730 --> 00:02:40,710
And now we can try to make this big.

40
00:02:40,740 --> 00:02:44,460
So now when I click up image, it opens up a new window.

41
00:02:44,760 --> 00:02:50,280
What the image content and it opens up the image on full size using the path that's contained within

42
00:02:50,280 --> 00:02:51,310
the images themselves.

43
00:02:51,450 --> 00:02:57,930
There's also another example within the event listeners that you might have seen when we are looking

44
00:02:57,930 --> 00:02:59,220
at the different event listeners.

45
00:02:59,670 --> 00:03:01,650
So you can also do the unclick.

46
00:03:01,770 --> 00:03:07,560
So this is going to do the same thing where this is directly applying that that listener to the element.

47
00:03:08,070 --> 00:03:14,010
And we don't use these by default because it doesn't work across all of the different browsers.

48
00:03:14,010 --> 00:03:20,070
Some of the older browsers might not take on click as well as you can't as easily remove out this type

49
00:03:20,070 --> 00:03:24,260
of event listener as you can with when you add the event listener.

50
00:03:24,570 --> 00:03:25,800
So that's what the difference is.

51
00:03:25,920 --> 00:03:27,720
And at the end of the day, it is the same thing.

52
00:03:27,720 --> 00:03:29,310
The functionality is the same.

53
00:03:29,460 --> 00:03:35,100
But most of the time I do prefer using the ADD event listener and I'll show you that they do work the

54
00:03:35,100 --> 00:03:35,690
same way.

55
00:03:35,880 --> 00:03:38,280
So even if we were to comment this one out.

56
00:03:38,430 --> 00:03:41,590
So just do a block comment instead of add that listener.

57
00:03:41,610 --> 00:03:47,010
We can do the on click, set that up and it's expecting a function on the other side so it'll work the

58
00:03:47,010 --> 00:03:49,140
same way where it's got the function.

59
00:03:49,350 --> 00:03:52,260
But we don't need that other wrapping line.

60
00:03:52,500 --> 00:03:55,260
And when we refresh it, the results are the same thing.

61
00:03:55,260 --> 00:03:56,340
It's going to work the same way.

62
00:03:56,550 --> 00:03:59,430
And there are, of course, some disadvantages here as well.

63
00:03:59,670 --> 00:04:03,510
So the odd event listener is a much more flexible method of doing it.

64
00:04:03,720 --> 00:04:07,380
But you will see developers using the unclick as well.

65
00:04:07,860 --> 00:04:12,720
And for each one of these and as we saw within the element, there's all these different event listener

66
00:04:12,870 --> 00:04:19,110
letters on Click on Mouse and a whole bunch of different ones that we saw within the document directory.