1
00:00:02,090 --> 00:00:04,510
Now that was the first example

2
00:00:04,510 --> 00:00:09,130
where we see one scenario where a for loop could be helpful.

3
00:00:09,130 --> 00:00:12,680
In the next example, we also will need a loop

4
00:00:12,680 --> 00:00:16,190
because I wanna highlight all the elements,

5
00:00:16,190 --> 00:00:18,780
which we have here, all the anchor elements I mean,

6
00:00:18,780 --> 00:00:20,770
which we have in this text here.

7
00:00:20,770 --> 00:00:22,230
We've got three anchor elements

8
00:00:22,230 --> 00:00:24,120
and they might be a bit hard to see.

9
00:00:24,120 --> 00:00:26,620
That's why we have this button, which when clicked,

10
00:00:26,620 --> 00:00:28,660
should highlight them.

11
00:00:28,660 --> 00:00:31,040
Now to highlight them, install CSS.

12
00:00:31,040 --> 00:00:33,440
I got this highlight class,

13
00:00:33,440 --> 00:00:36,350
which when applied to an anchor element,

14
00:00:36,350 --> 00:00:38,350
adds this purple background

15
00:00:38,350 --> 00:00:40,823
and increases the padding a little bit.

16
00:00:41,740 --> 00:00:44,190
And therefore, that's now the next exercise,

17
00:00:44,190 --> 00:00:46,310
which I will work on here.

18
00:00:46,310 --> 00:00:49,863
It's the Highlight links exercise.

19
00:00:50,820 --> 00:00:53,190
Now, if we have a look at index.html

20
00:00:53,190 --> 00:00:56,580
and there at this section that contains all the content

21
00:00:56,580 --> 00:00:58,680
we need for this exercise,

22
00:00:58,680 --> 00:01:00,740
then we see that we will again

23
00:01:00,740 --> 00:01:03,560
need to get access to this button here.

24
00:01:03,560 --> 00:01:05,920
And we also will need to get access

25
00:01:05,920 --> 00:01:09,803
to all the anchor elements which we have in this text.

26
00:01:10,950 --> 00:01:13,630
And therefore, here I'll first of all start

27
00:01:13,630 --> 00:01:16,490
by getting access to my button

28
00:01:16,490 --> 00:01:21,490
by creating a new constant, the highlightLinksButtonElement.

29
00:01:25,160 --> 00:01:29,120
And here, I'll again use document.querySelector

30
00:01:29,120 --> 00:01:32,230
and actually I'll use the same approach as before

31
00:01:32,230 --> 00:01:36,700
and select a button in an element that has a certain ID.

32
00:01:36,700 --> 00:01:39,920
And here, unlike before, we need this approach

33
00:01:39,920 --> 00:01:42,560
because now this of course is not the first button

34
00:01:42,560 --> 00:01:43,703
on the page anymore.

35
00:01:44,720 --> 00:01:48,410
So the wrapping element has an idea of highlight-links.

36
00:01:48,410 --> 00:01:50,670
Hence, we can use this ID here

37
00:01:50,670 --> 00:01:54,420
to select the first button in an element with that ID

38
00:01:54,420 --> 00:01:58,350
by simply using highlight-links as an ID here

39
00:01:58,350 --> 00:02:02,223
in this query selector CSS query parameter.

40
00:02:03,410 --> 00:02:05,510
That should give us access to this button.

41
00:02:06,550 --> 00:02:09,270
Then we'll need a function that should be triggered

42
00:02:09,270 --> 00:02:10,620
when the button is clicked

43
00:02:10,620 --> 00:02:14,603
and I'll name this function highlightLinks like this

44
00:02:18,950 --> 00:02:22,350
and I then, before we add the code in the function,

45
00:02:22,350 --> 00:02:26,460
will reach out to this highlightLinksButtonElement

46
00:02:26,460 --> 00:02:29,880
and add that event listener for the click event

47
00:02:29,880 --> 00:02:34,773
and point at highlightLinks at this function here.

48
00:02:36,090 --> 00:02:37,970
And in highlightLinks,

49
00:02:37,970 --> 00:02:42,970
we now wanna find all the anchor elements in that section

50
00:02:43,270 --> 00:02:46,030
with highlight-links with that ID in the end,

51
00:02:46,030 --> 00:02:50,033
and then add that warning class to all the elements.

52
00:02:51,010 --> 00:02:54,440
And one way of solving this problem, and by the way,

53
00:02:54,440 --> 00:02:57,310
I'm saying one way because in programming,

54
00:02:57,310 --> 00:03:01,960
you will always have multiple of achieving a certain result

55
00:03:01,960 --> 00:03:04,060
and solving a certain problem,

56
00:03:04,060 --> 00:03:08,300
but one way of doing it is by using a for of loop.

57
00:03:08,300 --> 00:03:11,220
And specifically, we can, first of all, get access

58
00:03:11,220 --> 00:03:13,510
to all the anchor elements

59
00:03:13,510 --> 00:03:17,330
and store them in a constant named anchorElements,

60
00:03:17,330 --> 00:03:22,040
for example, by using document.querySelectorAll.

61
00:03:24,630 --> 00:03:28,680
Now, we haven't used this method too much up 'til now,

62
00:03:28,680 --> 00:03:31,308
but I did mention it before.

63
00:03:31,308 --> 00:03:34,370
QuerySelectorAll works like querySelector,

64
00:03:34,370 --> 00:03:38,940
but where querySelector selects the first matching element,

65
00:03:38,940 --> 00:03:42,540
querySelectorAll will, as the name implies,

66
00:03:42,540 --> 00:03:45,393
return all matching elements.

67
00:03:46,250 --> 00:03:51,250
So here, we still add a CSS query as a string parameter,

68
00:03:51,690 --> 00:03:54,380
but here, I'm now looking for anchor elements

69
00:03:54,380 --> 00:03:57,020
in this highlight-links section,

70
00:03:57,020 --> 00:03:58,740
so we'll actually copy that code

71
00:03:58,740 --> 00:04:03,220
from the first querySelector, but replace button with A

72
00:04:03,220 --> 00:04:05,433
to select like all the anchor elements.

73
00:04:06,290 --> 00:04:10,369
And since it selects all elements and not just one,

74
00:04:10,369 --> 00:04:13,623
querySelectorAll in the end returns an array.

75
00:04:14,800 --> 00:04:16,149
And since we have an array,

76
00:04:16,149 --> 00:04:18,750
we can use the for of loop as we learned

77
00:04:18,750 --> 00:04:22,320
to loop through all the elements in that array.

78
00:04:22,320 --> 00:04:25,830
So for that, we can write this for of loop here.

79
00:04:25,830 --> 00:04:29,210
And we learned that here we can create a helper constant,

80
00:04:29,210 --> 00:04:32,340
which will be recreated for every loop iteration,

81
00:04:32,340 --> 00:04:35,563
which will point at the individual array elements.

82
00:04:36,640 --> 00:04:39,160
And here, I'll name that anchorElement

83
00:04:39,160 --> 00:04:42,400
because we'll have access to the single anchor elements

84
00:04:42,400 --> 00:04:44,480
through that constant here.

85
00:04:44,480 --> 00:04:46,490
And then we need the of keyword

86
00:04:46,490 --> 00:04:49,120
and then we point at a certain array,

87
00:04:49,120 --> 00:04:54,033
which in my case is anchorElements, this array of elements.

88
00:04:55,260 --> 00:04:56,750
And now inside of the loop,

89
00:04:56,750 --> 00:05:00,290
we can do something with every array element,

90
00:05:00,290 --> 00:05:03,970
so with every anchorElement in this case.

91
00:05:03,970 --> 00:05:07,280
And here, I then wanna use my anchorElement

92
00:05:07,280 --> 00:05:11,180
to access to class list object we learned about earlier

93
00:05:11,180 --> 00:05:15,890
and add the highlight class like this

94
00:05:15,890 --> 00:05:19,203
to make sure that the element is highlighted.

95
00:05:20,490 --> 00:05:23,230
And that should be all we need here.

96
00:05:23,230 --> 00:05:27,110
If we now save this, if I click this button,

97
00:05:27,110 --> 00:05:29,420
then the elements get highlighted

98
00:05:29,420 --> 00:05:32,480
because of course if I select this here,

99
00:05:32,480 --> 00:05:35,423
they do have this highlight class here.

100
00:05:37,320 --> 00:05:40,740
And that's this example here implemented,

101
00:05:40,740 --> 00:05:43,020
that's this use case here implemented,

102
00:05:43,020 --> 00:05:46,293
in this case with help of a for of loop.