WEBVTT

0
00:00.300 --> 00:01.080
Welcome back.

1
00:01.110 --> 00:03.000
Let's keep going, what do I want to do now?

2
00:03.390 --> 00:09.480
We've just done radio buttons, but now I want us to look at an alternative to radio buttons...

3
00:09.690 --> 00:12.670
I want us to move entirely away from the input element.

4
00:12.690 --> 00:17.610
Up until now, we always used the input element to define what kind of form widget we want.

5
00:18.240 --> 00:20.700
But, I think you're ready now to move away from it.

6
00:21.720 --> 00:22.380
Are you ready for it?

7
00:22.920 --> 00:24.930
It's going to be the <select> element.

8
00:24.990 --> 00:29.790
It's kind of a drop-down menu, if you will, and it works similar to a radio button in the sense that

9
00:29.790 --> 00:36.420
it allows the user to select only ONE item in the dropdown ... actually it doesn't have to be that way, which

10
00:36.420 --> 00:37.320
we'll see later in the course. 

11
00:37.720 --> 00:42.250
But for now, just think about it intuitively that way - it's just an alternative to a radio button.

12
00:42.960 --> 00:45.400
So, how does a <select> element work?

13
00:45.420 --> 00:46.230
It's very simple.

14
00:46.410 --> 00:50.610
We just have a select HTML element, and within that we have options.

15
00:51.270 --> 00:53.760
And of course each option is an item in the dropdown.

16
00:54.240 --> 00:58.640
Enough said, let's jump to the console, or let's jump to the text editor, let's start coding. 👩‍💻

17
00:59.550 --> 01:00.930
Let's go to our IDE...

18
01:01.500 --> 01:03.950
and first, we need to type its HTML

19
01:03.990 --> 01:04.430
right?

20
01:05.500 --> 01:06.630
Here we've got our radio button.

21
01:09.070 --> 01:09.890
Let's copy that. 

22
01:10.810 --> 01:13.810
Remember, it's always good to label your code.

23
01:13.870 --> 01:15.220
And now we're adding our...

24
01:17.230 --> 01:17.980
dropdown menu.

25
01:22.100 --> 01:24.170
How do you eat an elephant 🐘? One bite at a time 🤣

26
01:25.450 --> 01:26.450
How do I want to do this?

27
01:26.480 --> 01:32.300
Well, firstly remember how I said we should always wrap whatever widget we're creating, in a wrapper.

28
01:32.480 --> 01:37.490
And if we scroll up, we did our first wrappers in a <div>, with class of "form-row", 

29
01:37.490 --> 01:37.750
"form-row"...

30
01:37.790 --> 01:39.470
so why don't we do exactly the same?

31
01:41.530 --> 01:48.090
We create a <div>, and we have a class of form-row. There we go. Now, the first thing I want to do is I

32
01:48.090 --> 01:49.230
want to give it a label.

33
01:49.800 --> 01:51.680
And this is just going to be a color label.

34
01:52.140 --> 01:56.130
We're going to also user to pick a profile color, for example.

35
01:58.110 --> 02:05.550
We save this, and go to our browser, there we go - "Pick a profile color". And because we've given it the same class

36
02:05.610 --> 02:09.240
as our other input elements, man, it just looks beautiful

37
02:09.240 --> 02:12.690
straight off-the-bat 😍. The styling is automatically applied. How cool. 

38
02:14.530 --> 02:15.160
So there we go.

39
02:15.460 --> 02:20.200
There's our label, and then what, of course, we want to do is we want to include this <select> element.

40
02:20.290 --> 02:26.590
We're moving away from the input element. How cool. The name we can give this select element is color...

41
02:26.890 --> 02:30.810
and of course, the ID has to match the "for" value on the label.

42
02:31.360 --> 02:34.010
So we have to give it an ID of color.

43
02:34.630 --> 02:41.200
Now, within this select element, is where the items in the dropdown happen. If we go to our browser right now, we...

44
02:41.200 --> 02:44.650
can see there's a dropdown, but nothing's in it! Pretty useless 😫.

45
02:44.890 --> 02:46.340
So that's exactly what we need to do now.

46
02:46.600 --> 02:50.610
And in order to do that, we need this <option> element.

47
02:51.890 --> 02:56.750
And as you would expect, these are all the options, so let's do blue. Let's just do a few more. 

48
02:57.970 --> 02:58.870
We can do...

49
03:00.990 --> 03:01.500
green

50
03:03.000 --> 03:03.510
green

51
03:06.350 --> 03:06.860
green...

52
03:07.830 --> 03:09.300
red, red...

53
03:11.000 --> 03:11.600
yellow...

54
03:13.150 --> 03:17.770
yellow. I just want to delete the other one, because I think we've got enough - you've got the point

55
03:17.770 --> 03:22.990
already. And this is literally it. If we got our browser, we now have a dropdown.

56
03:23.410 --> 03:24.180
So there we have it ✨.

57
03:24.190 --> 03:26.080
We've just done our selection...

58
03:26.080 --> 03:26.690
our dropdown.

59
03:26.740 --> 03:27.390
What do you think?

60
03:27.390 --> 03:28.100
Do you think it looks cool?

61
03:28.720 --> 03:29.460
What do you think, Gerald?

62
03:29.650 --> 03:30.530
"Hello, Clyde.

63
03:30.580 --> 03:31.740
I'm not impressed.

64
03:31.780 --> 03:32.650
It looks ugly."

65
03:33.160 --> 03:33.940
Gerald's right...

66
03:34.100 --> 03:35.740
it looks terrible 🤢.

67
03:36.250 --> 03:41.560
If you look at this dropdown, this is default styling applied by the browser and it just looks out...

68
03:41.560 --> 03:42.040
of place.

69
03:42.040 --> 03:43.990
It doesn't look attractive at all.

70
03:44.320 --> 03:46.090
And that's a point I want to make...

71
03:46.090 --> 03:51.270
that dropdowns are notoriously difficult to style. And there's good reason for that.

72
03:51.280 --> 03:54.330
It's quite a complex UI component in the browser.

73
03:54.670 --> 04:01.990
For example, when a user approaches a dropdown, a select element, on their phone 📱, each phone manufacturer

74
04:01.990 --> 04:05.470
has a different way of displaying the selection types in that dropdown.

75
04:05.770 --> 04:10.060
You know, with an iPhone 📱, with my iPhone for example, whenever a select element is encountered,

76
04:10.690 --> 04:16.620
the phone brings up a unique UI scrolling element that allows me to navigate through each item.

77
04:17.260 --> 04:19.660
But that's not to say we can't style this.

78
04:19.660 --> 04:21.280
We are going to style it now...

79
04:21.280 --> 04:23.400
it's just a bit more difficult than usual.

80
04:23.560 --> 04:26.080
So, let's start styling this very quickly.

81
04:26.800 --> 04:29.920
Let's go back to our text editor. Let's go to 

82
04:30.210 --> 04:30.980
styles.css file...

83
04:31.390 --> 04:32.770
let's starts styling this now. 

84
04:35.310 --> 04:40.370
This is radio button styling, so let's copy that heading, scroll down...

85
04:45.880 --> 04:48.910
and this is not radio button anymore, this is...

86
04:51.900 --> 04:59.340
dropdown menu styling. Like I mentioned, it's always good to label your code. Now, for the reasons I just mentioned, it's always

87
04:59.340 --> 05:03.850
a good idea to let the browser device determine the best way to present a select element.

88
05:04.410 --> 05:05.300
So I'm going to keep our...

89
05:05.700 --> 05:08.090
CSS very, very simple.

90
05:08.850 --> 05:12.600
Unfortunately, even the simplest things are surprisingly hard.

91
05:12.610 --> 05:14.740
But, you know, this won't be that difficult...

92
05:14.760 --> 05:15.210
you'll see...

93
05:15.210 --> 05:15.890
you'll see what happens nw.

94
05:15.900 --> 05:21.020
Um, all we want to do is we want to target our select element.

95
05:21.630 --> 05:26.190
We know we gave our entire wrapper a class of form-row, and we want our select element.

96
05:28.410 --> 05:34.350
And all we're wanting to do, is give it some padding, and we want to change the font-size. Let's change it to

97
05:34.380 --> 05:39.080
font-size of 14px. Let's go to our browser, and already that looks better.

98
05:39.090 --> 05:40.860
And I'm keeping it very simple...

99
05:40.870 --> 05:46.260
I don't want to get complicated with more things because like I mentioned, even simple changes to this...

100
05:46.710 --> 05:48.180
requires a lot of hard work.

101
05:48.300 --> 05:51.750
We haven't done hard work, but we haven't really changed the styling much, have we?

102
05:52.410 --> 05:53.780
That's the one thing I wanted to do.

103
05:53.790 --> 05:57.240
The other thing I want to do, is I want to increase the width, right.

104
05:57.540 --> 06:01.120
If you look at the name and email, it's a certain width. I want to do the same with this dropdown.

105
06:01.650 --> 06:03.200
How do you do that?

106
06:03.900 --> 06:06.180
Very simple. I'm going to scroll up here...

107
06:07.390 --> 06:12.210
and we've defined, you know what I'm going to do...

108
06:12.800 --> 06:17.030
let me not go up. Let me keep all our styling for the menu within its own little section here.

109
06:17.530 --> 06:20.920
So all we have to do, is we have to then again start at the...

110
06:22.110 --> 06:31.000
actually you know what, all I have to do, let me do it right here. I'm just gonna ... I think this will work... 250px, let's see...

111
06:31.000 --> 06:31.570
if that works.

112
06:33.190 --> 06:34.090
Oh, perfect 💯.

113
06:36.160 --> 06:40.120
That was actually the most simple solution. I was making it more complicated than it had to be.

114
06:40.150 --> 06:40.710
So there we go...

115
06:40.720 --> 06:43.420
there is our first dropdown menu that we've created together.

116
06:43.810 --> 06:45.320
We've got a lot more coming in this course.

117
06:45.700 --> 06:46.700
Hope you're learning a ton.

118
06:46.870 --> 06:47.760
Stay motivated...

119
06:47.770 --> 06:49.820
grab a coffee ☕ and I'll see you in the next lecture.
(swoosh)

120
06:50.290 --> 06:51.340
Actually, you know what?

121
06:52.540 --> 06:57.100
"You are silly". 
What's that Gerald? 
"Don't hard-code the size". 
Gerald is right. 

122
06:57.250 --> 06:58.360
I did something very silly.

123
06:58.810 --> 06:59.770
If we go to our code here...

124
07:01.150 --> 07:05.250
I defined the width as 250px, but we've defined a variable at the top.

125
07:05.740 --> 07:07.900
So I think we defined it as --widget-width. 

126
07:08.440 --> 07:10.660
And if we save that, and go to our browser...

127
07:10.680 --> 07:11.440
it's the same thing.

128
07:11.770 --> 07:19.390
But at least now, if we change our variable width in one place, all our widgets will be exactly the same. 

129
07:20.650 --> 07:22.370
So, now this is for real...

130
07:22.390 --> 07:23.640
now. I'll see you later. 

131
07:23.650 --> 07:24.520
Stay motivated.

132
07:24.790 --> 07:25.690
I'll see you in the next lecture.