WEBVTT

0
00:00.170 --> 00:01.010
All right.

1
00:01.010 --> 00:04.450
I am super amped [excited] about this challenge.

2
00:04.460 --> 00:09.200
It is a little bit tricky, but as you'll see, as we go through it, it's not that difficult.

3
00:09.200 --> 00:11.300
So it's tricky, but not that difficult.

4
00:11.720 --> 00:16.820
What's cool about this example is that, yes, this is a course about forms.

5
00:16.820 --> 00:20.840
And because it's a course about forms, we're learning about all these different kinds of widgets.

6
00:20.840 --> 00:24.350
And one of the widgets we've already learned about is input where

7
00:24.740 --> 00:27.170
it's type attribute is set to color.

8
00:27.170 --> 00:33.740
But what's super cool, okay, is that once you understand how these widgets work, you don't have to

9
00:33.740 --> 00:35.870
use them with forms.

10
00:36.200 --> 00:43.910
Here is an example where we are using the color widget to allow the user to dynamically change the color

11
00:43.910 --> 00:44.870
of their page.

12
00:44.870 --> 00:52.370
In other words, a user can, you know, basically define the exact color theme that he or she desires.

13
00:52.370 --> 00:53.360
How awesome.

14
00:53.360 --> 00:55.240
And we're using color widgets.

15
00:55.250 --> 00:56.600
In fact, we're using two.

16
00:56.630 --> 01:01.410
You can see in this example we've got our main page and we've got two color widgets.

17
01:01.410 --> 01:07.530
We've got a background color widget, and you guessed it, if the user clicks on it and drags the color

18
01:07.530 --> 01:10.890
around, they can choose whatever color they want.

19
01:11.130 --> 01:14.640
How awesome! And let's say the user wants a nice blue color.

20
01:14.670 --> 01:15.930
That's the background.

21
01:15.930 --> 01:20.850
And then we've also got another color widget which affects the text color.

22
01:21.180 --> 01:22.290
You can click on that.

23
01:22.320 --> 01:27.150
Say the user wants bright red, or maybe maybe a bit of a green color.

24
01:28.900 --> 01:29.410
There we go.

25
01:29.420 --> 01:30.520
That looks pretty cool.

26
01:30.820 --> 01:33.090
So it's a very cool example.

27
01:33.100 --> 01:38.840
The first part of the solution video, I'm going to write up the entire HTML and CSS with you.

28
01:38.860 --> 01:43.780
Then I want you to pause, and think about how we can write the JavaScript because we do need to listen

29
01:43.780 --> 01:44.740
for an event here.

30
01:44.770 --> 01:47.980
We need to listen for the input event on those widgets.

31
01:47.980 --> 01:55.240
When that happens, we need to take that value, and we need to put that into the styling of the page.

32
01:55.270 --> 01:58.330
Don't worry if you don't know too much about JavaScript, I'll show you how it's done.

33
01:58.330 --> 02:03.730
What I'm really trying to show you in this challenge is that a lot of the information you learn about

34
02:03.730 --> 02:07.780
the widgets, you can apply to any part on your website.

35
02:08.050 --> 02:09.340
It's so, so cool.

36
02:09.880 --> 02:12.370
So anyway, don't take what you're learning for granted.

37
02:12.370 --> 02:17.260
And yeah, in the next lecture, let's start building this solution together.

38
02:17.470 --> 02:18.310
I can't wait.