WEBVTT

0
00:00.410 --> 00:04.280
I told you, I'm going to be sticking with this cup of coffee ☕ through these challenges.

1
00:05.420 --> 00:06.620
So, so fun.

2
00:06.860 --> 00:12.470
Anyway, it's a really fun challenge because as I mentioned in the intro to this challenge, what's

3
00:12.470 --> 00:13.700
really cool, is the skills

4
00:13.700 --> 00:17.780
you're learning about forms you can apply even outside of forms.

5
00:18.110 --> 00:18.950
Very, very cool.

6
00:19.130 --> 00:24.830
But now, because we're going to be dealing a lot with CSS, I do want an external CSS file in this

7
00:24.830 --> 00:25.520
example.

8
00:25.580 --> 00:25.940
Okay.

9
00:25.940 --> 00:28.520
So firstly, let's just set up the HTML.

10
00:29.210 --> 00:33.980
You can see I've got an index, an empty index.html file and an empty styles.css file.

11
00:33.980 --> 00:37.610
So let's set up the basic structure and then we'll start coding the CSS together.

12
00:38.510 --> 00:39.080
Have fun.

13
00:40.370 --> 00:42.980
As always, let's start off with our HTML.

14
00:43.880 --> 00:46.300
Let's have a head. Within the head,

15
00:46.310 --> 00:50.660
we can just do a title saying Color Theme ...

16
00:50.690 --> 00:51.470
how about Picker?

17
00:51.500 --> 00:52.190
There we go.

18
00:53.300 --> 00:57.170
And then of course, as I mentioned, I don't want to write all our CSS inline.

19
00:57.170 --> 00:58.380
It's just going to be a bit messy.

20
00:58.400 --> 01:04.230
So let's just link to our CSS file, called styles.css.

21
01:04.260 --> 01:04.890
There we go.

22
01:04.900 --> 01:06.360
What is the first thing I want to do?

23
01:06.750 --> 01:11.940
Well, the first thing I want to do, is remember in our introduction, we had kind-of that banner at

24
01:11.940 --> 01:15.780
the top that had our background picker and our actual font-color picker.

25
01:16.110 --> 01:21.240
So let's wrap that in a div, with class of wrapper.

26
01:22.210 --> 01:23.140
Very very simple

27
01:24.010 --> 01:27.820
And let's now set up our background picker.

28
01:28.390 --> 01:34.870
And again, what I want to do is I want to wrap this in another div with class picker, and it's very

29
01:34.870 --> 01:42.190
useful to wrap things in containers because then when you apply CSS, it becomes so, so easy and you'll

30
01:42.190 --> 01:46.390
see how in a second within this div I want us to have a label.

31
01:46.480 --> 01:46.720
Okay.

32
01:46.780 --> 01:48.460
Very, very simple.

33
01:48.460 --> 01:53.020
And all I want to say is I want this to be clear that we're dealing now with the background.

34
01:54.670 --> 01:56.380
And how do we create that actual picker?

35
01:57.590 --> 01:59.330
That's right, my dear students.

36
01:59.450 --> 02:02.870
It's input where its type is set to color.

37
02:03.660 --> 02:09.360
We don't need a name or an ID, but what I do want to have is I want to have a class.

38
02:09.390 --> 02:09.690
Okay.

39
02:09.720 --> 02:16.080
Because we're going to be styling this with CSS, and let's just call it "input-color-picker".

40
02:17.360 --> 02:18.340
And what else?

41
02:18.350 --> 02:21.140
I want to also have this data-id, okay.

42
02:21.140 --> 02:23.840
And you're going to see how we use this later.

43
02:23.840 --> 02:32.060
If you don't know this word "data", it's just a "data" attribute in CSS and it's used to style elements using

44
02:32.060 --> 02:33.530
attribute selectors.

45
02:33.560 --> 02:35.630
Whaat? 🙄 What is this data-id?

46
02:35.660 --> 02:36.680
Let me just scroll up here.

47
02:36.680 --> 02:39.290
I think that's above my head.

48
02:39.290 --> 02:43.490
Why am I putting this data-id attribute inside our HTML?

49
02:43.490 --> 02:47.480
Well, you're going to see how we do this a bit later, but we are going to be using JavaScript and

50
02:47.480 --> 02:56.210
in the CSS file I want to set some root variables, color variables, and we're going to have two color

51
02:56.210 --> 02:56.510
pickers.

52
02:56.510 --> 03:01.040
Remember, we're going to have one for the background color, which here I'm calling bgColor and I

53
03:01.040 --> 03:08.320
have to use the same kind of setup, the same word in my CSS file, which I'm going to show you shortly.

54
03:08.330 --> 03:10.970
So we've got bgColor for background color.

55
03:11.000 --> 03:14.720
The second widget we're going to have is for the text color.

56
03:14.720 --> 03:18.930
So I'm going to have textColor as the other data-id attribute.

57
03:18.930 --> 03:24.750
And later on, what we're going to have to do with CSS is whenever the user, let's say the user clicks

58
03:24.750 --> 03:29.760
on the background color widget, we're going to have to see what that color is in the widget, then

59
03:29.790 --> 03:36.420
tell JavaScript to change the color to whatever the user has selected, and that in turn will change

60
03:36.420 --> 03:37.920
the actual background color itself.

61
03:37.920 --> 03:41.880
So what I'm going to be doing is, we're setting up two color widgets, right?

62
03:41.910 --> 03:44.400
One for the background and one for the text color.

63
03:44.430 --> 03:50.970
Here we're dealing with the background, which is why I've set the data attribute in CSS to bgColor.

64
03:50.970 --> 03:56.850
And what I'm going to be doing later with JavaScript is I'm going to target the CSS root variable that

65
03:56.850 --> 04:02.250
I've defined, which I'll call bgColor, and I'm going to then replace its value with whatever the

66
04:02.250 --> 04:02.970
user's picked.

67
04:02.970 --> 04:04.650
So you'll see how we use it shortly.

68
04:04.650 --> 04:07.620
I'm going to be doing something very similar for the text color.

69
04:07.620 --> 04:12.600
I know it can seem quite daunting, but don't worry, we're going to go through it together shortly.

70
04:12.600 --> 04:13.770
Let's get back into it.

71
04:14.770 --> 04:15.490
So there we go.

72
04:15.490 --> 04:16.570
That's our background picker.

73
04:16.570 --> 04:20.650
I want to do something very similar now, but now I want to do our color picker ...

74
04:22.570 --> 04:24.150
actually let me be explicit, our 

75
04:24.160 --> 04:25.780
text color picker. 

76
04:25.810 --> 04:28.660
The one above here is our background color picker.

77
04:29.710 --> 04:31.100
Always good to label your code.

78
04:31.120 --> 04:34.930
Again, I'm going to wrap it in a div with the same class of picker.

79
04:35.920 --> 04:37.810
And then we're going to have a label.

80
04:37.810 --> 04:41.050
This time the label is going to be color.

81
04:42.370 --> 04:43.840
Meaning text color.

82
04:43.960 --> 04:45.500
Then we're going to have an input

83
04:45.520 --> 04:47.600
you guessed it, of type color.

84
04:47.620 --> 04:50.770
We don't need a name and we don't need an ID.

85
04:52.550 --> 04:57.080
What I do want to do, though, is I want to give it a class of input-

86
04:57.080 --> 04:58.610
color-picker.

87
04:58.640 --> 05:02.240
The same class as our background color picker.

88
05:02.840 --> 05:04.760
I want them styled the same.

89
05:05.120 --> 05:07.220
But remember what I just said.

90
05:07.250 --> 05:11.570
We're going to have this data attribute in CSS and it doesn't have to be "id", 

91
05:11.600 --> 05:18.500
I'm just calling it "id". But when you see the data word here with a dash, we are creating a CSS data

92
05:18.500 --> 05:20.660
attribute and we can just target this later.

93
05:20.660 --> 05:24.710
It's pretty neat and I don't want to call it bgColor. Here, 

94
05:24.710 --> 05:26.510
we're going to call it textColor.

95
05:26.540 --> 05:26.810
All right.

96
05:26.810 --> 05:27.650
Pretty straightforward.

97
05:27.680 --> 05:29.510
Should we see what this looks like in the browser?

98
05:29.540 --> 05:30.220
There we go.

99
05:30.230 --> 05:32.150
We've got a background and a color picker.

100
05:32.150 --> 05:35.030
We can already see it's starting to take shape.

101
05:35.030 --> 05:37.160
So that's kind of the banner. We've dealt with

102
05:37.160 --> 05:37.850
the banner.

103
05:37.880 --> 05:40.460
Now, what I want to do is I want to deal with our content.

104
05:40.490 --> 05:46.340
Again, what I want to do is I want to wrap everything within a div, this time with class of "main". 

105
05:46.340 --> 05:48.020
Then we have a few sections within this.

106
05:48.050 --> 05:52.190
We can create another wrapper, this time with class of content, because that's where our content is

107
05:52.290 --> 05:52.890
going to go.

108
05:52.890 --> 05:55.970
And let's wrap this in an element called <main>.

109
05:55.980 --> 05:56.880
Why not?

110
05:57.180 --> 06:04.170
Just so you know, my dear students, this <main> element basically depicts or demarcates the main dominant

111
06:04.170 --> 06:05.570
content on your page.

112
06:05.580 --> 06:09.270
It's just semantically providing meaning to whatever it is we're doing.

113
06:09.270 --> 06:11.580
So here I want an H1 tag.

114
06:11.580 --> 06:15.330
This is your main page.

115
06:16.480 --> 06:22.480
Uh, then let's have a paragraph, and we can say this is a great example of using

116
06:22.720 --> 06:25.240
and here I want a code element,

117
06:26.110 --> 06:26.470
okay.

118
06:26.470 --> 06:31.780
Now what I want to do, is within this code element, I want to type the input of type color, right?

119
06:31.780 --> 06:40.360
But I cannot use the less-than and greater-than signs directly like this, because HTML will interpret

120
06:40.360 --> 06:41.980
this as meaning it's an element.

121
06:42.010 --> 06:43.870
In other words, they are reserved characters.

122
06:43.870 --> 06:49.030
So we need to use a character reference entity, which we've learned about in this course ages ago,

123
06:49.030 --> 06:53.190
and the character reference entity for less-than is "lt"

124
06:53.560 --> 06:54.670
believe it or not.

125
06:55.270 --> 06:56.200
So there we go.

126
06:56.230 --> 06:56.800
Less than.

127
06:56.800 --> 07:00.790
And then I want to type the words "input of type color".

128
07:01.660 --> 07:02.680
Pretty straightforward.

129
07:02.680 --> 07:04.390
And then I can't do greater-than,

130
07:04.390 --> 07:08.320
so we're using the & symbol and then "gt" for greater than.

131
07:08.590 --> 07:10.810
This should work. If we have a look at our browser.

132
07:11.800 --> 07:12.530
There we go.

133
07:12.550 --> 07:15.090
Let's put the proper syntax in there.

134
07:15.100 --> 07:15.970
How cool is that?

135
07:16.670 --> 07:18.950
All right, let's continue with this.

136
07:18.980 --> 07:24.170
This is a great example of using input of type color outside of a form.

137
07:24.980 --> 07:26.540
And then I'll just emphasize.

138
07:27.270 --> 07:28.350
Cool, right?

139
07:28.500 --> 07:31.230
And then let's just have another paragraph element here.

140
07:31.230 --> 07:32.760
And in here we can just type,

141
07:32.760 --> 07:38.640
although this course is all about forms and hence,

142
07:39.330 --> 07:42.990
and hence we're learning

143
07:43.800 --> 07:45.870
about form widgets, 

144
07:47.890 --> 07:57.970
the skills you learn will give you the ability to use these widgets in many different applications.

145
07:58.640 --> 08:00.500
There is our paragraph.

146
08:00.770 --> 08:01.670
What else can we do?

147
08:01.700 --> 08:03.080
We can set a footer.

148
08:05.560 --> 08:10.750
And we can say a cool, tiny project by me,

149
08:10.930 --> 08:11.620
Clyde.

150
08:12.770 --> 08:17.030
If we go to our browser, we can see it's starting to take shape.

151
08:17.030 --> 08:17.720
Right?

152
08:17.990 --> 08:19.160
How cool is this?

153
08:19.640 --> 08:25.100
The next step, my dear students, is to style this nicely with CSS and you'll see,

154
08:25.130 --> 08:28.760
now, surprisingly, the CSS is very simple.

155
08:28.790 --> 08:32.470
The kind of thought aspect of this comes when we write JavaScript.

156
08:32.480 --> 08:38.810
So first let's jump over to our styles.css page and let's start now typing up the CSS together.

157
08:38.840 --> 08:41.690
Then we'll get on to the harder aspect of JavaScript.

158
08:42.290 --> 08:44.810
Let's expand this and let's scroll to the top.

159
08:44.810 --> 08:45.710
What did we call it?

160
08:45.740 --> 08:48.240
We called it styles.css. 

161
08:48.260 --> 08:51.710
So let's open this up and let's start styling CSS.

162
08:51.740 --> 08:56.120
What I'll do is I'll have the browser displayed to the right so you can see the effects as we go on.

163
08:56.330 --> 09:01.180
As I mentioned earlier, I want to define some root CSS variables, right?

164
09:01.190 --> 09:03.890
And again, there are many ways to do things when it comes to programming.

165
09:03.890 --> 09:05.300
This is just how I'm doing it.

166
09:05.300 --> 09:10.310
The first thing I want to do, is define our primary bgColor.

167
09:10.340 --> 09:13.770
This bgColor is very specific.

168
09:13.800 --> 09:20.040
It has to match what we set on this data-id attribute, bgColor. 

169
09:20.070 --> 09:21.330
They have to be the same

170
09:21.330 --> 09:21.580
okay.

171
09:21.600 --> 09:22.350
You'll see shortly

172
09:22.350 --> 09:22.620
why.

173
09:22.650 --> 09:24.330
Because I'm going to be using JavaScript.

174
09:24.870 --> 09:27.990
And let's just pick a very easy color.

175
09:29.890 --> 09:31.480
Just like a gray.

176
09:32.320 --> 09:34.510
And then I want to do the same thing,

177
09:34.510 --> 09:37.810
but we're going to be doing our primary textColor.

178
09:38.820 --> 09:42.080
And here we can just do one, two, three, four, five, six.

179
09:42.080 --> 09:43.680
How's that? White and gray.

180
09:44.980 --> 09:45.920
Pretty straightforward.

181
09:45.940 --> 09:48.760
Okay, let's affect the styling of our body quickly.

182
09:49.570 --> 09:51.660
Font size 20 pixels.

183
09:51.670 --> 09:52.690
Padding,

184
09:53.410 --> 09:56.950
I always like removing padding on the body because then we can be more explicit.

185
09:58.280 --> 09:59.300
Margin zero.

186
09:59.330 --> 10:00.080
There we go.

187
10:01.140 --> 10:09.760
And the background of the entire body can be ... 🥁 drumroll 🥁 ... you guessed it, our --primary-bgColor.

188
10:09.760 --> 10:12.270
And if we save this, there we go.

189
10:12.280 --> 10:14.740
It's kind of this gray looking color.

190
10:15.350 --> 10:18.500
The next thing I want to style is the wrapper.

191
10:18.530 --> 10:22.520
If we go to the index page, I want to style this wrapper.

192
10:23.680 --> 10:25.030
Kind of call it the banner.

193
10:25.180 --> 10:25.780
Okay.

194
10:26.110 --> 10:27.370
Very, very easy to style.

195
10:27.370 --> 10:29.560
All we need to do is target the class of wrapper.

196
10:29.710 --> 10:32.740
We can define its width as being 100%.

197
10:32.950 --> 10:37.240
We can change its background color because I don't want it to be the same

198
10:37.240 --> 10:38.500
dark gray.

199
10:38.920 --> 10:42.070
224, 224, 224. 

200
10:43.470 --> 10:44.040
There we go.

201
10:44.070 --> 10:45.120
It's like a light gray.

202
10:45.150 --> 10:46.080
It's looking nice.

203
10:46.110 --> 10:47.460
Let's give it some padding.

204
10:48.540 --> 10:49.280
There we go.

205
10:49.290 --> 10:53.740
And you can see now on the banner, the background picker and the color picker are below each other.

206
10:53.760 --> 10:59.070
The reason it's below each other is because they are displayed by block, or they're displayed as block

207
10:59.070 --> 11:00.160
by default.

208
11:00.180 --> 11:01.830
So let's just quickly change that.

209
11:01.830 --> 11:04.980
And remember, we gave them the same class name.

210
11:05.970 --> 11:06.510
What was it?

211
11:06.510 --> 11:08.190
Actually, let's go to our index file.

212
11:10.090 --> 11:11.230
Let's just have a look here.

213
11:11.770 --> 11:14.050
We gave it a class of "picker".

214
11:15.150 --> 11:18.590
We've wrapped them in a div, with class of picker.

215
11:19.710 --> 11:25.080
So it actually makes it very, very simple for us because all we have to do is target the picker class.

216
11:25.670 --> 11:31.100
And we can set its display property not to block, which is by default, but to inline.

217
11:31.100 --> 11:32.420
And now it's really cool.

218
11:32.420 --> 11:34.100
Now they're displaying next to each other.

219
11:34.100 --> 11:35.480
And what about the main content?

220
11:35.480 --> 11:41.780
Obviously with the dark gray background, it doesn't look nice having a black so we can target our main

221
11:41.780 --> 11:43.880
class, which is the main content, right?

222
11:43.880 --> 11:52.340
And we can change its text color to, you guessed it, our variable, but this time our textColor variable.

223
11:52.490 --> 11:53.540
There we go.

224
11:53.540 --> 11:59.930
Now, my dear students, when the user clicks on this, call it, the color picker, for example, and they

225
11:59.930 --> 12:07.640
start now picking red, I want the text color to change to red, but I want it to transition nicely.

226
12:07.640 --> 12:15.110
So let's add a transition property to this and we can apply this transition to all CSS that's changed

227
12:15.110 --> 12:16.100
on this element.

228
12:16.700 --> 12:19.370
And I don't know, 0.16 seconds.

229
12:19.370 --> 12:21.680
And how about ease-in, and ease-out?

230
12:22.780 --> 12:23.670
Very very simple.

231
12:24.240 --> 12:25.970
Obviously nothing happens now, right?

232
12:25.980 --> 12:29.670
Because we haven't done any JavaScript, but you'll see how it fits in nicely later.

233
12:30.630 --> 12:32.100
Let's just give this some padding.

234
12:32.690 --> 12:34.340
Yeah, I think that looks nice.

235
12:35.150 --> 12:37.210
Um, what else can we do?

236
12:37.220 --> 12:44.120
We can target the content class, and here we can give it a width of 50%.

237
12:44.120 --> 12:45.140
I think that'll look better.

238
12:45.260 --> 12:46.730
And then we can center it.

239
12:46.760 --> 12:48.650
Margin zero auto.

240
12:48.800 --> 12:50.750
How does that look? Let's expand the browser,

241
12:50.930 --> 12:52.340
I think this looks pretty neat.

242
12:53.060 --> 12:53.780
I really do.

243
12:54.230 --> 12:54.770
Woo hoo!

244
12:54.800 --> 12:55.870
So we're getting there.

245
12:55.880 --> 12:57.560
We're coming along very, very nicely.

246
12:57.560 --> 12:58.670
I'm super excited.

247
12:58.880 --> 13:04.850
We've set everything up now, but we've got the hard bit and that is writing JavaScript.

248
13:04.880 --> 13:09.770
Don't worry though, it is intuitive once you understand it, but I'm going to pause the video here.

249
13:09.770 --> 13:14.030
Actually, I'm going to stop this lecture and I want you to just think about don't think about how to

250
13:14.030 --> 13:18.650
write the code because you know, you might not understand how to write the JavaScript, but think about

251
13:18.650 --> 13:20.780
the steps that we need to create.

252
13:20.810 --> 13:27.290
We need to somehow get the CSS variables that we've defined.

253
13:27.410 --> 13:28.460
Let me go to the file.

254
13:30.320 --> 13:30.650
Right.

255
13:30.650 --> 13:37.110
We need to somehow target the primary bgColor and we need to make that dynamic.

256
13:37.110 --> 13:43.050
So when the user toggles that widget, opens that background widget, that color widget, and changes

257
13:43.050 --> 13:46.050
the color, we need to somehow change this.

258
13:46.080 --> 13:47.310
We need to do it dynamically.

259
13:47.310 --> 13:52.460
So in the next lecture, let me write up the JavaScript for you and show you how it's done.

260
13:52.470 --> 13:54.270
I'm super, super excited.