WEBVTT

0
00:00.170 --> 00:02.990
Welcome back to yet another challenge.

1
00:02.990 --> 00:05.930
And I know this ... you know, this course is filled with challenges.

2
00:05.930 --> 00:10.160
I mean, we've done already a few challenges in previous sections, so it's not all in one place because

3
00:10.160 --> 00:13.670
sometimes it's more relevant to do a challenge in other areas.

4
00:13.880 --> 00:18.050
But this is a fun little section, you know, and I'm really, really having a lot of fun.

5
00:18.050 --> 00:18.860
I hope you are too.

6
00:18.890 --> 00:24.140
This is going to be a little bit tricky again when it comes to CSS, you know, but this course isn't

7
00:24.140 --> 00:24.830
about CSS.

8
00:24.860 --> 00:30.080
It's about teaching you the skills you need to build form widgets.

9
00:30.350 --> 00:35.410
And once you master CSS, for you to manipulate these widgets will become second nature.

10
00:35.420 --> 00:36.260
So here we are.

11
00:36.260 --> 00:41.720
We're dealing with the input of type range and we've custom designed this.

12
00:41.930 --> 00:42.650
How cool.

13
00:42.800 --> 00:48.710
You can see it's a different color. When a user focuses on this widget, do you notice the colors change?

14
00:48.710 --> 00:57.680
It's slightly darker. And when the user moves this range, we've got this output element with numbers and

15
00:57.680 --> 01:02.370
it follows the actual range button.

16
01:04.470 --> 01:05.520
How awesome.

17
01:05.970 --> 01:07.020
Pretty cool, right?

18
01:07.980 --> 01:09.270
So yes, give it a go.

19
01:09.270 --> 01:09.990
Give it a try.

20
01:10.020 --> 01:12.090
Just remember, you know, a few hints.

21
01:12.090 --> 01:16.620
What I did was obviously wrap everything in a div, so we can style things nicely.

22
01:16.620 --> 01:19.410
That's why I've put this entire range in the center of the viewport.

23
01:19.410 --> 01:24.360
And remember, when we're dealing with the range, we don't see the value automatically.

24
01:24.360 --> 01:27.510
The browser only shows us that value when the user submits the form.

25
01:27.510 --> 01:29.580
So it's pretty, pretty useless.

26
01:29.700 --> 01:33.690
Which is why I then created an output element.

27
01:33.690 --> 01:39.270
And within that output element I dynamically added a span element to put that number.

28
01:39.270 --> 01:44.190
Right now it's showing us 310. I put that number in that span dynamically with JavaScript.

29
01:44.490 --> 01:52.260
And then I basically can you see that little triangle on the 310, I styled that with CSS and I targeted

30
01:52.260 --> 01:56.200
the ::before pseudo element in order to create it.

31
01:56.700 --> 01:57.600
That's another hint.

32
01:57.930 --> 02:04.070
And then obviously we need to think about how it can follow the actual form widget itself.

33
02:04.700 --> 02:05.780
That was a bit tricky.

34
02:05.780 --> 02:09.980
It's a bit "mathy", but don't worry, I'll explain to you exactly how I got to the numbers.

35
02:10.010 --> 02:14.360
Give it a go, see how far you can go alone, and then follow me along in the solution videos.

36
02:14.390 --> 02:15.050
See you now.