WEBVTT 0 00:00.980 --> 00:01.730 All right. 1 00:01.730 --> 00:04.020 We have just finished looking at progress bars. 2 00:04.040 --> 00:05.210 Very exciting. 3 00:05.480 --> 00:09.410 But now I want to look at a different type of bar. 4 00:09.410 --> 00:12.620 And this is known as a meter bar. 5 00:12.650 --> 00:18.740 The meter element is visually similar to the progress element, but it has a very different purpose. 6 00:18.770 --> 00:26.300 The meter bar represents a fixed value in a range that is defined by a min and max value. 7 00:26.660 --> 00:27.350 Yeah, I know. 8 00:27.350 --> 00:32.720 But you might be thinking like that's the same as the progress bar ... kind of. 9 00:32.720 --> 00:33.680 Kind of. 10 00:33.710 --> 00:35.140 But it serves a different purpose. 11 00:35.150 --> 00:43.130 You typically use the meter attribute for fixed values like disk usage, or the relevance of a query result 12 00:43.130 --> 00:47.930 or the fraction of a voting population that have selected a particular candidate or option. 13 00:47.930 --> 00:51.050 So you can kind of view the meter as a gauge. 14 00:51.140 --> 00:55.560 And in order to create the meter element, you need both a starting tag and an ending tag, 15 00:55.580 --> 01:01.500 again, similar to the progress element. And the reason we insert information in between the tags is 16 01:01.500 --> 01:07.230 to have a robust fallback technique for older browsers that do not support the meter element. 17 01:07.230 --> 01:13.470 But unlike the progress element, the meter element has three important attributes to consider. 18 01:13.470 --> 01:14.400 What are they? 19 01:14.730 --> 01:16.410 Well, it's low, 20 01:16.440 --> 01:19.440 it's high, and it's optimum. 21 01:19.680 --> 01:20.790 What? ⁉ 22 01:20.790 --> 01:21.870 I know, I know. 23 01:21.900 --> 01:26.520 Let me just explain a little bit more detail how these work. 24 01:26.550 --> 01:30.000 Let's just create a meter element like this, right? 25 01:30.000 --> 01:31.380 Opening tag, closing tag. 26 01:31.380 --> 01:33.420 And we've got various attributes on here. 27 01:33.420 --> 01:35.070 And this is how the meter looks. 28 01:35.070 --> 01:36.840 Yes, it's very similar to the progress element. 29 01:38.010 --> 01:41.280 Firstly, let's look at the min and max. 30 01:41.280 --> 01:47.280 The min and max values represents the range, the entire range of your meter. 31 01:47.370 --> 01:47.670 Okay. 32 01:47.670 --> 01:52.770 The next thing, remember I said there are three important attributes, are low and high. And the low and high 33 01:52.800 --> 01:56.490 values divide this range into three parts, as you can see. 34 01:56.520 --> 01:56.940 Right? 35 01:56.940 --> 02:00.870 The lower part of the range is between min and low inclusive. 36 02:00.900 --> 02:04.440 The medium part of the range is between low and high. 37 02:04.470 --> 02:08.160 This is in our example also the optimum range. 38 02:08.160 --> 02:10.410 And then you've got the high part of the range. 39 02:11.290 --> 02:19.750 And that is between high and max. And this optimum value, that defines the optimum value of the meter 40 02:19.750 --> 02:21.040 element itself. 41 02:21.040 --> 02:23.290 And don't worry, it can be quite confusing. 42 02:23.290 --> 02:24.760 I'm going to hop over to the console. 43 02:24.760 --> 02:30.040 I'm going to code some things up with you shortly, and I'll explain how this optimum attribute works. 44 02:30.040 --> 02:34.990 What's very cool about this meter element is that three different colors are shown. 45 02:34.990 --> 02:38.680 We've got green, which you saw in the previous example. 46 02:39.610 --> 02:45.520 And green is just whether the values in the current preferred range of the meter. If the current value 47 02:45.520 --> 02:49.880 is in the average part of the range, the bar is yellow. 48 02:49.900 --> 02:55.180 Here our value is nine, which is less than ten, which means it's not ideal. 49 02:55.180 --> 02:57.490 And this is why yellow is shown. 50 02:57.490 --> 03:01.810 If the current value is in the worst part of the range though, the bar is red. 51 03:02.050 --> 03:09.160 Don't worry, I'm going to show you green, orange and red shortly when we are coding up the meter bar in 52 03:09.160 --> 03:11.320 the text editor. Okay, so there we go. 53 03:11.320 --> 03:11.830 Let's move on. 54 03:11.830 --> 03:12.670 Let's move on. 55 03:12.700 --> 03:13.810 Actually, you know what? 56 03:13.810 --> 03:17.560 Instead of me telling you, I'm going to keep showing you examples, let me just hop over to the text 57 03:17.560 --> 03:21.880 editor right now and let me start showing you how this meter works in more detail.