1
00:00:00,090 --> 00:00:01,860
Are you ready for JavaScript?

2
00:00:01,890 --> 00:00:07,830
This lesson is where we're going to bring JavaScript into our project to create our interaction of all

3
00:00:07,830 --> 00:00:11,010
of our elements that we created within the earlier lesson.

4
00:00:11,460 --> 00:00:14,160
So now we've got essentially an image gallery.

5
00:00:14,170 --> 00:00:18,840
We've got some nice, colorful images that are sitting there and we want to create some interaction

6
00:00:18,840 --> 00:00:19,860
with those images.

7
00:00:20,220 --> 00:00:28,080
We need to select those images before we add an event listener so we can use document and query selector

8
00:00:28,110 --> 00:00:31,560
all as we want to select a whole bunch of images.

9
00:00:31,860 --> 00:00:36,150
And we might not want to just select all the ones with the image tag.

10
00:00:36,330 --> 00:00:40,260
And of course, for a simple project like this, we're fine to do that.

11
00:00:40,590 --> 00:00:45,420
We might want to be more specific that we want to make sure that we're only selecting images in a particular

12
00:00:45,420 --> 00:00:45,900
class.

13
00:00:46,170 --> 00:00:53,910
So just as we do with success, we can prefect's it with our parent that we want to use, only selecting

14
00:00:53,910 --> 00:00:58,920
the elements that have a class of pop and the images inside of that.

15
00:00:59,190 --> 00:01:04,230
So now if we console logout images, we're going to have a node list.

16
00:01:04,530 --> 00:01:08,700
So taking a look at our node list, we've listed out all of the images.

17
00:01:08,820 --> 00:01:12,630
And of course, if we added in more images are node lists would be bigger.

18
00:01:12,810 --> 00:01:20,040
And these node, these images are referencing each and every one of the available images within our

19
00:01:20,040 --> 00:01:20,480
page.

20
00:01:20,700 --> 00:01:23,430
So we're already to start creating some interaction.

21
00:01:23,430 --> 00:01:26,220
And of course, we don't have any interaction on them.

22
00:01:26,340 --> 00:01:30,200
But there are a few important things to note we're going to be adding in the click event.

23
00:01:30,260 --> 00:01:32,160
So on Click, we're going to be adding in.

24
00:01:32,160 --> 00:01:36,390
And as you can see, there's just a ton of elements that events that are available.

25
00:01:36,750 --> 00:01:43,410
And one of the most important ones here that we want it to for sure look at is s r c so source.

26
00:01:43,540 --> 00:01:49,560
So each one of these has a source, of course, and this is the attribute that we're going to first

27
00:01:49,560 --> 00:01:52,350
be picking up from the image as it gets clicked.

28
00:01:52,860 --> 00:01:57,440
So going back into our images, let's make those clickable.

29
00:01:58,230 --> 00:02:02,310
So the way to make those clickable is we need to iterate through the node list.

30
00:02:02,580 --> 00:02:07,610
Node list is pretty much an array and we can loop through it using for each.

31
00:02:07,890 --> 00:02:14,280
So setting up anonymous function and we've got our elements that we're going to be outputting as we

32
00:02:14,280 --> 00:02:14,830
loop through.

33
00:02:14,850 --> 00:02:20,910
So if we so log out the element value, I'll get rid of that node list.

34
00:02:20,910 --> 00:02:25,500
There you can see that we are actually outputting each one of those elements.

35
00:02:25,630 --> 00:02:31,080
And as I hover over them, we get the output of those elements and you can see that chrome as well as

36
00:02:31,080 --> 00:02:33,350
highlighting them as I'm moving over them.

37
00:02:33,720 --> 00:02:36,630
So we've got those elements within an object format.

38
00:02:36,780 --> 00:02:39,380
And so now it's just a matter of adding an event listener.

39
00:02:39,510 --> 00:02:44,280
So just like the previous lesson, that event listener, once you have it within that element object,

40
00:02:44,370 --> 00:02:51,330
you add in the event listener and event listener that I want to add in is a click and also we're going

41
00:02:51,330 --> 00:02:52,380
to create a function.

42
00:02:52,920 --> 00:02:54,450
So I'm not using an anonymous one.

43
00:02:54,450 --> 00:02:57,080
We're going to have it click out to a function.

44
00:02:57,090 --> 00:02:58,870
So that means that we need to create that function.

45
00:02:59,310 --> 00:03:05,280
So creating a function, call it pop image and we're going to pass in the event object.

46
00:03:07,270 --> 00:03:14,660
And within the console now, we're going to output that event object, so refresh, go into our console,

47
00:03:14,660 --> 00:03:20,020
we can clear that up and now every time we click it, we get that most of that that's initiating the

48
00:03:20,020 --> 00:03:20,380
click.

49
00:03:20,980 --> 00:03:27,310
And we also know which element is being clicked where we can use this in order to select the current

50
00:03:27,310 --> 00:03:29,860
element that invoked the event.

51
00:03:29,860 --> 00:03:30,250
Listener.

52
00:03:31,090 --> 00:03:33,700
So now go ahead and add this into your project.

53
00:03:33,700 --> 00:03:35,590
So select out all of the images.

54
00:03:35,740 --> 00:03:41,200
You can use the console console, log them out as you go along just to make sure that you are selecting

55
00:03:41,200 --> 00:03:41,860
them properly.

56
00:03:42,040 --> 00:03:47,140
And once you've selected it and you've created that node list loop through the values of the node list,

57
00:03:47,320 --> 00:03:53,380
outputting the element or whatever you want to call it, and then selecting that object name and adding

58
00:03:53,380 --> 00:03:59,710
that event list and then attaching a function to that click event and then within the function for now,

59
00:03:59,860 --> 00:04:02,800
you can output just that event object.

60
00:04:03,040 --> 00:04:05,590
You can also output this as well.

61
00:04:05,950 --> 00:04:11,560
And you can see when we output this, when it gets clicked, it's going to output that current element.

62
00:04:11,710 --> 00:04:17,800
And we saw last time as well that we can get the current source of that element that invoked the click.

63
00:04:18,160 --> 00:04:24,730
And that's what we're going to be using in the next lesson in order to output that source into our popup

64
00:04:24,730 --> 00:04:25,220
window.

65
00:04:25,240 --> 00:04:26,920
So that's still to come in the next lesson.