1
00:00:02,210 --> 00:00:04,270
So it's time to, again,

2
00:00:04,270 --> 00:00:05,810
practice what you learned

3
00:00:05,810 --> 00:00:07,310
and therefore attached,

4
00:00:07,310 --> 00:00:10,870
You find this exercise-2 zip file,

5
00:00:10,870 --> 00:00:12,941
which contains three files,

6
00:00:12,941 --> 00:00:14,680
which you can simply add

7
00:00:14,680 --> 00:00:17,200
in a subfolder to your project

8
00:00:17,200 --> 00:00:18,663
as I did it here.

9
00:00:19,670 --> 00:00:22,530
So simply add that extracted folder

10
00:00:22,530 --> 00:00:24,150
to your project folder

11
00:00:24,150 --> 00:00:24,983
for example,

12
00:00:24,983 --> 00:00:26,950
by simply dragging and dropping it here

13
00:00:26,950 --> 00:00:28,670
into visual studio code,

14
00:00:28,670 --> 00:00:31,640
or by opening this project in the windows Explorer

15
00:00:31,640 --> 00:00:32,890
or a Mac finder

16
00:00:32,890 --> 00:00:35,443
and adding the extracted folder there.

17
00:00:36,370 --> 00:00:37,860
And now in that folder,

18
00:00:37,860 --> 00:00:38,800
as you can see,

19
00:00:38,800 --> 00:00:39,950
I got an HTML,

20
00:00:39,950 --> 00:00:40,783
a JavaScript,

21
00:00:40,783 --> 00:00:42,590
and a CSS file.

22
00:00:42,590 --> 00:00:45,590
The CSS file just has some basic styles

23
00:00:45,590 --> 00:00:46,540
for a button

24
00:00:46,540 --> 00:00:47,930
or a section.

25
00:00:47,930 --> 00:00:49,610
And the index HTML file

26
00:00:49,610 --> 00:00:51,840
just has a basic skeleton.

27
00:00:51,840 --> 00:00:54,420
And then a bit of text,

28
00:00:54,420 --> 00:00:55,720
a couple of paragraphs

29
00:00:55,720 --> 00:00:57,603
and a couple of buttons in there.

30
00:00:58,840 --> 00:01:01,430
Now you can simply open this

31
00:01:01,430 --> 00:01:04,230
with the live server extension again.

32
00:01:04,230 --> 00:01:05,840
And once you did that,

33
00:01:05,840 --> 00:01:09,005
you will see this here on the page.

34
00:01:09,005 --> 00:01:12,900
That's the content I prepared for you.

35
00:01:12,900 --> 00:01:14,120
And out of the box,

36
00:01:14,120 --> 00:01:16,620
these buttons don't do anything by the way,

37
00:01:16,620 --> 00:01:17,740
they just sit there,

38
00:01:17,740 --> 00:01:19,203
but they don't do anything.

39
00:01:20,280 --> 00:01:24,240
Please note that these buttons are also not part of a form

40
00:01:24,240 --> 00:01:27,930
because here we will not use them for submitting

41
00:01:27,930 --> 00:01:30,430
or validating any user input.

42
00:01:30,430 --> 00:01:31,263
But instead,

43
00:01:31,263 --> 00:01:32,490
I want to use these buttons

44
00:01:32,490 --> 00:01:36,740
to trigger some non form related actions.

45
00:01:36,740 --> 00:01:38,880
Now, which actions should be triggered

46
00:01:38,880 --> 00:01:41,540
is actually described in this text,

47
00:01:41,540 --> 00:01:45,863
but also in the exercise.js file.

48
00:01:47,080 --> 00:01:50,910
In there, you won't see any JavaScript code yet.

49
00:01:50,910 --> 00:01:55,200
Instead you only find a written instructions.

50
00:01:55,200 --> 00:01:57,304
And here's what I want you to do

51
00:01:57,304 --> 00:01:59,020
in the next minutes.

52
00:01:59,020 --> 00:02:01,120
And in the lecture thereafter,

53
00:02:01,120 --> 00:02:02,320
we are, of course,

54
00:02:02,320 --> 00:02:04,430
going to solve this together.

55
00:02:04,430 --> 00:02:06,450
So that you also see my solution

56
00:02:06,450 --> 00:02:08,833
and you can compare yours to mine.

57
00:02:09,840 --> 00:02:11,430
Now, what I want you to do,

58
00:02:11,430 --> 00:02:14,403
is I want you to select the two button elements,

59
00:02:14,403 --> 00:02:18,060
which you find in this index HTML file.

60
00:02:18,060 --> 00:02:19,992
So these two buttons,

61
00:02:19,992 --> 00:02:21,750
you should select them

62
00:02:21,750 --> 00:02:24,990
and store them in two different variables.

63
00:02:24,990 --> 00:02:27,309
And I'm calling it variables here.

64
00:02:27,309 --> 00:02:30,750
But of course you can also consider using constants here

65
00:02:30,750 --> 00:02:32,943
if the values never change.

66
00:02:33,970 --> 00:02:37,080
Now, you should actually select the first button

67
00:02:37,080 --> 00:02:41,330
without adding or using any ID to it.

68
00:02:41,330 --> 00:02:43,290
So you will need to find a different way

69
00:02:43,290 --> 00:02:44,490
of selecting the button.

70
00:02:45,390 --> 00:02:47,480
And you should select the second button

71
00:02:47,480 --> 00:02:49,450
by using an ID.

72
00:02:49,450 --> 00:02:53,060
So by adding some ID to this button,

73
00:02:53,060 --> 00:02:54,380
it doesn't have one yet,

74
00:02:54,380 --> 00:02:55,903
you will have to add one.

75
00:02:57,100 --> 00:02:58,870
And then you should select that button

76
00:02:58,870 --> 00:03:00,970
with help of that ID.

77
00:03:00,970 --> 00:03:03,140
And then store it in a variable.

78
00:03:03,140 --> 00:03:05,103
That's task number one.

79
00:03:07,140 --> 00:03:09,170
Now in task, number two,

80
00:03:09,170 --> 00:03:11,120
you should use these buttons

81
00:03:11,120 --> 00:03:13,430
to add click event listeners

82
00:03:13,430 --> 00:03:15,190
to the buttons.

83
00:03:15,190 --> 00:03:18,120
And those two click event listeners,

84
00:03:18,120 --> 00:03:22,410
which you add should trigger two different functions.

85
00:03:22,410 --> 00:03:24,020
So you'll need two functions,

86
00:03:24,020 --> 00:03:27,416
two different functions that should be triggered.

87
00:03:27,416 --> 00:03:29,260
And, for the moment,

88
00:03:29,260 --> 00:03:32,900
both functions should output console.dir,

89
00:03:32,900 --> 00:03:35,270
the clicked button elements,

90
00:03:35,270 --> 00:03:38,870
but the first function for the first button,

91
00:03:38,870 --> 00:03:40,580
to which you added a listener,

92
00:03:40,580 --> 00:03:43,050
should actually output that button

93
00:03:43,050 --> 00:03:44,790
with help of the variable,

94
00:03:44,790 --> 00:03:47,483
which you created in one in task one.

95
00:03:48,380 --> 00:03:49,780
The second button

96
00:03:49,780 --> 00:03:50,930
and the event listener

97
00:03:50,930 --> 00:03:52,470
attached to that button

98
00:03:52,470 --> 00:03:54,560
should actually output that button

99
00:03:54,560 --> 00:03:57,610
without using that variable.

100
00:03:57,610 --> 00:03:59,310
So you'll have to find a different way

101
00:03:59,310 --> 00:04:01,673
of getting access to the clicked button.

102
00:04:03,170 --> 00:04:05,133
In task number three,

103
00:04:05,133 --> 00:04:06,080
I then want you

104
00:04:06,080 --> 00:04:08,020
to also select and store

105
00:04:08,020 --> 00:04:11,030
the paragraphs mentioned in the text.

106
00:04:11,030 --> 00:04:12,380
So if you read the text,

107
00:04:12,380 --> 00:04:14,870
you see that that will be this paragraph.

108
00:04:14,870 --> 00:04:17,320
And the first paragraph,

109
00:04:17,320 --> 00:04:18,959
I also repeated here,

110
00:04:18,959 --> 00:04:20,910
you should select these two paragraphs

111
00:04:20,910 --> 00:04:23,380
and store them in variables as well.

112
00:04:23,380 --> 00:04:26,830
But here I want you to select both paragraphs

113
00:04:26,830 --> 00:04:29,240
by drilling into the document.

114
00:04:29,240 --> 00:04:32,267
So not with query selector or anything like that,

115
00:04:32,267 --> 00:04:34,320
but with help of drilling.

116
00:04:34,320 --> 00:04:36,660
And you should then simply find a way

117
00:04:36,660 --> 00:04:38,970
of selecting these two different paragraphs

118
00:04:38,970 --> 00:04:41,950
and storing them in variables.

119
00:04:41,950 --> 00:04:43,710
And if you struggle with that,

120
00:04:43,710 --> 00:04:46,940
then you can fall back to using these utility methods,

121
00:04:46,940 --> 00:04:50,093
but definitely try to select them with drilling.

122
00:04:51,330 --> 00:04:53,490
Once you completed task three,

123
00:04:53,490 --> 00:04:54,530
in task four,

124
00:04:54,530 --> 00:04:57,540
I want you to change the functions

125
00:04:57,540 --> 00:05:00,090
that you created that in task two,

126
00:05:00,090 --> 00:05:02,648
which currently only outputs to click buttons,

127
00:05:02,648 --> 00:05:05,080
such that the first button,

128
00:05:05,080 --> 00:05:07,490
so this button here,

129
00:05:07,490 --> 00:05:09,990
actually removes this paragraph

130
00:05:09,990 --> 00:05:11,500
when it's clicked.

131
00:05:11,500 --> 00:05:13,980
So you should find a way of doing that.

132
00:05:13,980 --> 00:05:16,560
And the second button,

133
00:05:16,560 --> 00:05:18,190
so this here, of course,

134
00:05:18,190 --> 00:05:21,360
should actually change this first paragraph,

135
00:05:21,360 --> 00:05:25,173
such that it adds a blue background color to it.

136
00:05:26,040 --> 00:05:28,020
That's what these buttons should do,

137
00:05:28,020 --> 00:05:30,403
once task four is completed.

138
00:05:31,730 --> 00:05:33,500
Now in task number five,

139
00:05:33,500 --> 00:05:36,930
I want you to repeat four

140
00:05:36,930 --> 00:05:39,450
or this second part of four,

141
00:05:39,450 --> 00:05:40,690
to be precise,

142
00:05:40,690 --> 00:05:44,420
but instead of changing the inline styles

143
00:05:44,420 --> 00:05:45,800
of that paragraph,

144
00:05:45,800 --> 00:05:49,810
you should now try to add a blue background

145
00:05:49,810 --> 00:05:53,330
by adding a CSS class to that paragraph

146
00:05:53,330 --> 00:05:54,993
once the button is clicked.

147
00:05:55,850 --> 00:05:57,600
Now here's an important note.

148
00:05:57,600 --> 00:06:00,720
You'll have to add the CSS class two,

149
00:06:00,720 --> 00:06:02,370
because installed CSS,

150
00:06:02,370 --> 00:06:05,350
there currently is no predefined clause

151
00:06:05,350 --> 00:06:06,493
that would do that.

152
00:06:07,910 --> 00:06:09,090
And that's it.

153
00:06:09,090 --> 00:06:10,720
These are my tasks for you.

154
00:06:10,720 --> 00:06:12,760
Definitely try them on your own, first.

155
00:06:12,760 --> 00:06:13,730
In the next lecture,

156
00:06:13,730 --> 00:06:15,003
we'll do them together.