1
00:00:00,150 --> 00:00:07,500
In the previous lesson, we set up our success as well as our TML and we've got nice output of five

2
00:00:07,500 --> 00:00:10,540
stars and a message area, but it doesn't do anything.

3
00:00:10,560 --> 00:00:15,520
So this is where JavaScript comes in and it's going to make all of that content interactive.

4
00:00:15,870 --> 00:00:21,990
So first of all, with JavaScript, let's open up within our script area and set up an object called

5
00:00:21,990 --> 00:00:22,590
stars.

6
00:00:22,830 --> 00:00:26,600
And within this object, we're using documents, query selector.

7
00:00:26,940 --> 00:00:30,680
We're going to select all of the elements with the class of stars.

8
00:00:30,730 --> 00:00:36,570
Let's all of those elements that we created earlier and with class, don't forget to add in the dot

9
00:00:36,600 --> 00:00:40,660
there to prefix it and then also selecting our output area.

10
00:00:40,920 --> 00:00:48,300
So using our documents and this one, we only have one so we can use query selector selecting our element

11
00:00:48,300 --> 00:00:49,720
with the class of output.

12
00:00:50,610 --> 00:00:53,340
Next, let's loop through all of the stars.

13
00:00:53,590 --> 00:00:57,200
So we've got a number of stars so we can do it in a number of different ways.

14
00:00:57,780 --> 00:00:59,870
So this case, let's do a for loop.

15
00:00:59,880 --> 00:01:02,980
So setting up our X and with stars.

16
00:01:03,000 --> 00:01:05,460
So now we're going to have a node list that contains stars.

17
00:01:05,580 --> 00:01:09,280
And if you actually want to see the node list, you can output into the console.

18
00:01:09,280 --> 00:01:10,230
I'll show you how to do that.

19
00:01:10,470 --> 00:01:11,670
So we're going to loop through.

20
00:01:11,670 --> 00:01:15,480
And while X is less than the length of stars.

21
00:01:16,690 --> 00:01:25,330
Because each node, just like an will have a listing of all of the elements and so we can also output

22
00:01:25,330 --> 00:01:29,290
each one, we can also output each one as we loop through it.

23
00:01:29,320 --> 00:01:35,740
So if we got stars and we can give it an index value of whatever is contained within X, so see how

24
00:01:35,740 --> 00:01:36,220
that looks.

25
00:01:37,510 --> 00:01:41,670
So refresh and you see that we're able to select each one of these stars.

26
00:01:42,040 --> 00:01:45,270
So there's one thing that we do need to do and we need to add in a number.

27
00:01:45,370 --> 00:01:51,580
So the order that they're being represented on the page, we want to add in an object value within that

28
00:01:51,580 --> 00:01:54,430
star object of the value that it's showing up.

29
00:01:54,460 --> 00:01:57,820
So the first star would be one, two, three, four and so on.

30
00:01:58,000 --> 00:02:02,440
So we can pick up that value and we can use it whenever the mouse event is applied.

31
00:02:03,500 --> 00:02:10,910
So looping through, we are putting all of those stars elements, and now that we've got those elements

32
00:02:10,910 --> 00:02:20,180
so we can take our stars and X and we can apply some values to it, so we can call it star value and

33
00:02:20,180 --> 00:02:23,640
we'll add in the value of X plus one into it.

34
00:02:24,860 --> 00:02:25,960
So refresh.

35
00:02:25,970 --> 00:02:29,400
And now we've got a hidden data value for each one of those.

36
00:02:29,870 --> 00:02:32,990
Next, we need to apply some event listeners to that.

37
00:02:33,380 --> 00:02:38,750
And there's a number of event listeners that we wanted to add in so we can add in event listeners like

38
00:02:38,930 --> 00:02:41,740
stars and selecting out that object.

39
00:02:42,170 --> 00:02:43,720
So adding in our event listener.

40
00:02:43,940 --> 00:02:46,070
So adding an event listener of click.

41
00:02:47,110 --> 00:02:52,980
And when we click the element, we want to invoke a function called Starret, its creator functions

42
00:02:52,980 --> 00:02:54,820
so star right.

43
00:02:55,240 --> 00:03:02,620
It's going to pass in the E value and we can console log out that evalu so see how that works.

44
00:03:02,950 --> 00:03:10,270
So now when I click the stars, we get a value being passed in and we can also get a value of this.

45
00:03:10,430 --> 00:03:15,250
And what that does is it outputs that element object from the page.

46
00:03:15,820 --> 00:03:21,930
And because we've attached a star value to each one of those elements, we can use this.

47
00:03:21,940 --> 00:03:25,780
And now when we click it, we get the star value that's contained within there.

48
00:03:25,990 --> 00:03:30,910
So go ahead and add this into your project and you could be ready to move on to the next part of the

49
00:03:30,910 --> 00:03:37,510
lesson where whatever it gets clicked, we can track what value got clicked of the different elements

50
00:03:37,510 --> 00:03:39,120
of the different stars that are on the page.