1
00:00:03,200 --> 00:00:05,090
Hey, all right, welcome back.

2
00:00:05,750 --> 00:00:06,870
Glad to see you back.

3
00:00:07,640 --> 00:00:09,170
You know that I would be back.

4
00:00:09,950 --> 00:00:14,060
So in this video, I'm going to take you through the solution of the quiz that I prepared in the previous

5
00:00:14,060 --> 00:00:14,530
video.

6
00:00:15,410 --> 00:00:18,110
So you saw that I prepared a to do list.

7
00:00:19,830 --> 00:00:21,570
And I put you out.

8
00:00:22,730 --> 00:00:26,060
And then I place the list items inside.

9
00:00:27,810 --> 00:00:30,630
I also added a class called to do item.

10
00:00:32,440 --> 00:00:39,790
So first of all, what I need to do is to choose the elements that have the to do item class.

11
00:00:40,680 --> 00:00:46,110
So say Vare first to do item document that query selecter.

12
00:00:47,060 --> 00:00:52,610
To reach this, I call here to do item to choose the first list item.

13
00:00:56,020 --> 00:00:57,550
So this is how I get to the first one.

14
00:00:59,050 --> 00:01:05,040
I want to use the mouse over and mouse out events to create a Hober effect here.

15
00:01:09,590 --> 00:01:16,820
And you know that now the cover of NCIS has been added, but now I want to show you how to do it in

16
00:01:16,820 --> 00:01:17,600
JavaScript.

17
00:01:19,710 --> 00:01:25,280
So now, after selecting the first to do item, I want to add an event to it.

18
00:01:27,330 --> 00:01:29,640
So I say document at event listener.

19
00:01:31,240 --> 00:01:33,640
And I'm adding the mouseover event here.

20
00:01:37,500 --> 00:01:39,240
I want to call this function when.

21
00:01:40,280 --> 00:01:41,810
It's moused over.

22
00:01:44,340 --> 00:01:51,180
And I want to make the background color of the item blue when the mouseover event occurs.

23
00:01:53,110 --> 00:01:57,220
So over this say style DOD background, color equals blue.

24
00:02:00,710 --> 00:02:07,760
Now, when it was mouse over here, I made the background color of the to do item blue.

25
00:02:09,520 --> 00:02:12,760
So let's go to the browser and refresh the page.

26
00:02:14,490 --> 00:02:17,760
And I'm bringing the mouse over the first to do item.

27
00:02:18,770 --> 00:02:20,210
Now the background is blue.

28
00:02:21,740 --> 00:02:28,550
So if we want just below here, we can just say style color white.

29
00:02:31,320 --> 00:02:32,910
So let's say this and go to the browser.

30
00:02:35,540 --> 00:02:38,450
And when I arrive on it, it's color became white.

31
00:02:41,050 --> 00:02:43,000
Now I change the color, the first element.

32
00:02:44,280 --> 00:02:51,300
So now when we go to the second list item, I want it to take its old color back and change the background

33
00:02:51,300 --> 00:02:52,020
and color.

34
00:02:53,240 --> 00:02:59,900
And this time, I want to call an event when it is mapped out, not mouseover.

35
00:03:01,890 --> 00:03:03,690
So, again, I'll say first to do item.

36
00:03:04,860 --> 00:03:07,020
I'll say add event listener.

37
00:03:08,990 --> 00:03:11,270
This time, I'm saying mouse out of mouse over.

38
00:03:13,780 --> 00:03:20,050
And here again, I'll call a function, and this function will be called When I Mouse Out.

39
00:03:23,530 --> 00:03:30,160
So when it is mouse out this time, I want the background color to be white and the color to be black

40
00:03:30,220 --> 00:03:30,670
again.

41
00:03:32,050 --> 00:03:36,430
So say first to do item, not style, not background, color is white.

42
00:03:38,790 --> 00:03:43,020
And first, to do item [REMOVED] color is black.

43
00:03:46,300 --> 00:03:48,970
Now, let's save it and check it again in the browser.

44
00:03:53,100 --> 00:04:00,690
Yeah, so I'm bringing the mouse on it, it becomes blue, and when I do the mouse out again, it gets

45
00:04:00,690 --> 00:04:01,170
restored.

46
00:04:02,840 --> 00:04:03,290
Very cool.

47
00:04:03,470 --> 00:04:08,150
So now I want to apply all of this to all the elements in the list.

48
00:04:10,920 --> 00:04:18,300
So I'll just make these lines come out now, this time I'm saying vare to do list items.

49
00:04:19,680 --> 00:04:23,340
And I'll say document, not query, selecter all.

50
00:04:24,730 --> 00:04:26,470
I call it to do item.

51
00:04:28,260 --> 00:04:31,560
This will return a. node list to me.

52
00:04:32,930 --> 00:04:39,380
And we have assigned all values of the to do item to this list, to this to do list items variable.

53
00:04:39,560 --> 00:04:39,890
Right.

54
00:04:41,410 --> 00:04:43,990
Then I can use a for loop here.

55
00:04:45,060 --> 00:04:46,050
So say for.

56
00:04:47,230 --> 00:04:49,900
I say var I equals zero.

57
00:04:51,960 --> 00:04:55,170
I is small, I say to do list dot length.

58
00:04:57,690 --> 00:05:01,590
That's increase I by one each cycle.

59
00:05:03,680 --> 00:05:07,760
So here, I'll access every element of the to do list item.

60
00:05:09,430 --> 00:05:12,700
So I say to do list item square brackets and I.

61
00:05:15,110 --> 00:05:16,450
Now, add a.

62
00:05:17,330 --> 00:05:18,800
Add event listeners to it.

63
00:05:20,620 --> 00:05:22,840
I'll say that at event listener.

64
00:05:25,160 --> 00:05:29,210
And when mouseover, this function will be called.

65
00:05:32,150 --> 00:05:36,200
And then here, I'll say this dot style, dot background, color blue.

66
00:05:38,240 --> 00:05:41,150
And this dot style color white.

67
00:05:43,670 --> 00:05:50,630
Then I want to add a new event to each to do list item right below.

68
00:05:52,020 --> 00:06:00,750
So I'll say to do list items dot at event listener and this time call Mount's out event.

69
00:06:02,980 --> 00:06:06,930
I want this function to be called When the Mouse Out happens.

70
00:06:09,170 --> 00:06:13,790
And here I'll say this Dotts dialogue background color equals white.

71
00:06:17,550 --> 00:06:23,210
And here, I'll say this dance style doesn't color equals black again.

72
00:06:25,930 --> 00:06:29,320
OK, then let's save all this, go to the browser.

73
00:06:32,430 --> 00:06:33,840
Here, I'll refresh the page.

74
00:06:35,070 --> 00:06:42,540
And there it is, when each member is moused over, its background becomes blue and it returns to default

75
00:06:42,540 --> 00:06:46,010
again when the mouse out happens.

76
00:06:48,820 --> 00:06:54,790
OK, so after seeing that as well, I, I, I really do want to show the unclick event.

77
00:06:55,800 --> 00:07:03,750
So I'll say to do list item square brackets, I just select all items and then not add event listener.

78
00:07:05,220 --> 00:07:08,790
And this time, I want to call the event listener with the click event.

79
00:07:11,550 --> 00:07:15,540
So I'm writing my function that should be called when collect.

80
00:07:17,560 --> 00:07:22,450
And inside that function, I call this not class list dot at.

81
00:07:24,380 --> 00:07:29,210
And I want to wear the OK class to the class list.

82
00:07:34,100 --> 00:07:38,930
So now let's go to the index HTML page and add this class.

83
00:07:41,040 --> 00:07:47,550
I'll say, OK, and I want text decoration line through.

84
00:07:48,870 --> 00:07:51,030
Color to be great inside.

85
00:07:53,000 --> 00:07:54,770
So I'll save all that and go to the browser.

86
00:07:56,510 --> 00:07:58,040
And let's refresh the page.

87
00:08:00,000 --> 00:08:03,030
All right, so right now we have a hover effect.

88
00:08:04,650 --> 00:08:08,550
And when I click it, I'll add the OK class.

89
00:08:10,540 --> 00:08:15,310
And yeah, so when I click on it, the line through event was added again.

90
00:08:18,080 --> 00:08:24,140
OK, so I took you through a lot really fast, but we saw different events and that was cool.

91
00:08:25,240 --> 00:08:30,820
We've seen how to use the this keyword here when used with a for loop.

92
00:08:32,620 --> 00:08:36,660
Now, yes, we could do this in a different way.

93
00:08:38,060 --> 00:08:38,750
So.

94
00:08:40,230 --> 00:08:46,860
When a mouseover event occurs, we could create a class list and add these classes.

95
00:08:48,570 --> 00:08:50,580
And again, we could do the same with the mouse out.

96
00:08:52,500 --> 00:08:58,110
So, yes, my friends, we have accomplished that to do this solution that we wanted to in this video.

97
00:08:59,810 --> 00:09:02,750
So why don't we take a break here and come back in the next lesson?