WEBVTT 0 00:00.570 --> 00:01.410 Welcome back. 1 00:01.410 --> 00:02.400 Welcome back. 2 00:02.580 --> 00:03.740 I took a bit of a stretch. 3 00:03.750 --> 00:04.640 I'm feeling amped [excited]. 4 00:04.650 --> 00:05.700 I'm ready to go. 5 00:05.850 --> 00:07.320 And let's get into it. 6 00:07.320 --> 00:09.150 Let's start writing the JavaScript together. 7 00:09.390 --> 00:12.810 So let's define here, "add javascript". 8 00:14.700 --> 00:19.170 And you know, by now all our JavaScript has to be inserted within script tags. 9 00:19.200 --> 00:25.290 The first thing I want to do is I want to grab the input of type range. 10 00:25.290 --> 00:28.620 So let's define a variable called range. 11 00:28.620 --> 00:31.400 Let's assign this the value of that input, right? 12 00:31.410 --> 00:37.350 And we can do that by accessing the document object, and we can use a method called getElementById(), 13 00:37.350 --> 00:40.560 and we gave it an ID of range. 14 00:41.920 --> 00:42.400 Great. 15 00:42.400 --> 00:44.080 So now we've got that input, right? 16 00:44.590 --> 00:46.590 I also want to grab our output. 17 00:46.600 --> 00:51.070 So let's define a variable called rangeOutput. 18 00:52.740 --> 00:55.350 And of course same logic applies. 19 00:55.350 --> 01:00.540 We can use getElementById(), and we gave it an ID of rangeValue. 20 01:03.190 --> 01:07.360 Let's grab our input and output elements. 21 01:07.930 --> 01:09.070 That's what we've just done. 22 01:10.490 --> 01:11.900 So far, so good, right? 23 01:11.900 --> 01:13.490 So far so good. 24 01:14.000 --> 01:17.300 Next, my dear students, I want to define a function. 25 01:17.300 --> 01:22.400 And this function is going to display that output onto the viewport. 26 01:22.580 --> 01:25.880 So let's call it function show, 27 01:27.010 --> 01:28.090 showValue(). 28 01:29.440 --> 01:30.880 And what do we want to do here? 29 01:30.910 --> 01:33.050 Well, very, very easy. 30 01:33.070 --> 01:38.290 All we want to do, is we want to grab our rangeOutput variable we've defined above, 31 01:38.620 --> 01:41.650 we want to set its innerHTML value 32 01:41.650 --> 01:42.400 to what? 33 01:42.520 --> 01:46.120 Well, we could set it to the actual value of the range. 34 01:46.120 --> 01:49.330 But remember how I said I want to put it into a span element? 35 01:49.390 --> 01:52.510 I just want to show you that there are many different ways of doing things when it comes to coding, 36 01:52.510 --> 01:53.350 which is pretty cool. 37 01:53.380 --> 01:59.770 So here we can actually define an HTML span element and then we can include a variable by the dollar 38 01:59.770 --> 02:02.440 sign and two curly braces. Inside that span, 39 02:02.440 --> 02:06.490 I want to access our range, basically the input element. 40 02:06.490 --> 02:11.800 And on that input element, there's a property called value, which is the value of the range. 41 02:11.800 --> 02:13.990 And I want to insert that into the span. 42 02:13.990 --> 02:19.000 And of course we need a closing span tag. Very, very simple. 43 02:19.000 --> 02:22.930 So we've defined our function, but now we need to actually execute it. 44 02:22.930 --> 02:26.800 So I want to set the initial value when page loads. 45 02:27.190 --> 02:32.090 And to do that we can access the document directly, add an event listener. 46 02:32.240 --> 02:39.320 Now, when the page loads, certain events are fired and one of them is called the DOMContentLoaded 47 02:39.320 --> 02:39.740 event. 48 02:39.740 --> 02:46.910 This just happens by the browser when your page renders to the screen. And then when that event fires, 49 02:46.910 --> 02:51.590 I want to execute our function. To execute the function, we just have to type it out. 50 02:51.620 --> 02:52.850 It's very, very simple. 51 02:53.090 --> 02:55.460 So that sets the initial value 52 02:55.460 --> 02:59.990 when the page loads. Let me go to the browser and show you. If we refresh the page, we can see that 53 02:59.990 --> 03:01.070 we've got the 500. 54 03:01.070 --> 03:02.360 Don't worry about the styling. 55 03:02.360 --> 03:05.180 We're going to do that shortly, but at least it's showing. 56 03:05.480 --> 03:11.150 But you'll notice as I drag, nothing happens because we've never called that function again, have 57 03:11.150 --> 03:11.510 we. 58 03:11.540 --> 03:14.330 We've only called it once when the page loads. 59 03:14.480 --> 03:22.070 So of course we have to call the function every time an input 60 03:23.570 --> 03:24.200 event 61 03:25.270 --> 03:26.350 is fired. 62 03:28.190 --> 03:29.780 And this is very, very easy. 63 03:29.780 --> 03:33.410 We grab our input, which we defined in a variable called range. 64 03:33.440 --> 03:35.240 We add an event listener, 65 03:35.270 --> 03:37.490 and the event we want to listen to is the input event. 66 03:37.490 --> 03:42.620 And every time that fires, we want to execute our showValue function. 67 03:42.830 --> 03:44.030 Let's go to the browser now. 68 03:45.520 --> 03:46.930 And let's move that widget. 69 03:46.960 --> 03:47.720 How awesome! 70 03:47.740 --> 03:52.900 We set the min to 0, the max to 100 and we set the starting value to 500. 71 03:53.150 --> 03:53.650 Woohoo! 72 03:53.830 --> 03:55.600 Okay, this is the first step. 73 03:55.630 --> 04:00.510 There's a few things we've got to do here, but let's, you know, tackle one thing at a time. 74 04:00.520 --> 04:03.730 They say in Africa, how do you eat an elephant 🐘? 75 04:03.730 --> 04:06.790 And the answer is ... one fork at a time. 76 04:06.970 --> 04:07.900 So that's it. 77 04:07.930 --> 04:12.250 We've done the first step, but now I want to add some styling and then there's a bit more JavaScript 78 04:12.250 --> 04:15.160 we're going to add here, but I'll show you shortly what I mean. 79 04:15.160 --> 04:19.660 So let's hop into our CSS file and let's start styling this bad boy. 80 04:20.110 --> 04:24.610 All right, let me display it side-by-side so you can see what we're doing as we go on. 81 04:24.610 --> 04:25.870 Let's go to our styles. 82 04:27.130 --> 04:28.410 And let's start styling this. 83 04:28.480 --> 04:31.270 Let's access our rangeValue class, 84 04:31.270 --> 04:33.480 but in here we've got a span now, right? 85 04:33.490 --> 04:35.020 It's added dynamically. 86 04:35.260 --> 04:39.010 We can set its width to 40 pixels. 87 04:39.130 --> 04:44.170 You know what I'm actually going to do before I do this? Let me add a background and I want the background 88 04:44.170 --> 04:46.570 to actually be the same as the one previously. 89 04:46.600 --> 04:48.280 See, the IDE is so useful 90 04:49.340 --> 04:50.450 because I don't have to remember what it was. 91 04:50.450 --> 04:50.900 So there we go. 92 04:50.900 --> 04:52.040 We've added a background. 93 04:53.910 --> 04:55.620 I want the line height, 94 04:57.630 --> 04:59.210 to be bit more, 24 pixels. 95 04:59.230 --> 04:59.800 How's that? 96 04:59.820 --> 05:00.390 Yep. 97 05:02.140 --> 05:04.540 Text-align, center. 98 05:04.670 --> 05:06.760 I don't want that color being black either. 99 05:06.910 --> 05:07.810 It doesn't look that nice. 100 05:07.810 --> 05:09.760 So let's set the color to white. 101 05:09.820 --> 05:10.630 It's a bit better. 102 05:11.020 --> 05:18.280 I want the position property to be absolute, because we want to be very specific where this is shown. 103 05:18.520 --> 05:23.530 I don't like the square borders either, so let's give it a border-radius, 104 05:24.550 --> 05:24.990 I don't know, 105 05:25.000 --> 05:25.780 15% 106 05:25.780 --> 05:26.490 does that look nice? 107 05:26.500 --> 05:26.930 Yep. 108 05:26.950 --> 05:29.440 Now I want to use the transform property. 109 05:29.470 --> 05:33.790 Let's just say here, you want the center of the element, 110 05:33.790 --> 05:41.170 I'm talking about the span element, to line up with the center of its parent element. 111 05:41.740 --> 05:44.410 Right now, it's not, which is why it's shoved to the right. 112 05:44.410 --> 05:47.260 So I want to access the transform property. 113 05:47.530 --> 05:51.010 And on here, I want to translate this, right, 114 05:51.010 --> 05:54.970 I want to shift it left 50% to be in line with its parent. 115 05:55.180 --> 05:55.900 There we go. 116 05:56.560 --> 05:57.610 Starting to take shape. 117 05:57.610 --> 06:00.390 It's starting to take shape. And we're not quite done. 118 06:00.400 --> 06:04.400 I want to add that little triangular kind-of design to it. 119 06:04.400 --> 06:07.610 So it almost looks like, you know, speech bubble kind of thing. 120 06:08.300 --> 06:09.110 How do we do that? 121 06:09.110 --> 06:13.520 Well, again, I want to target the class of rangeValue, that output element, 122 06:13.520 --> 06:20.030 we are targeting the span, but now I want to target the ::before pseudo element. 123 06:20.360 --> 06:24.380 The content, of course, can be nothing, but I want the position. 124 06:24.740 --> 06:31.190 Let me say set position absolute to the output element. 125 06:31.190 --> 06:31.730 Right. 126 06:32.740 --> 06:33.820 That's all I want to do here. 127 06:33.820 --> 06:37.120 So I want to change the position to absolute. 128 06:38.990 --> 06:39.500 It's starting ... 129 06:39.500 --> 06:40.640 it's starting to get better. 130 06:40.760 --> 06:43.190 Width we define as 0. 131 06:44.520 --> 06:45.560 Height 0. 132 06:45.570 --> 06:49.470 And now I want to kind of draw that little pointy piece at the bottom of this. 133 06:49.500 --> 06:50.580 How do we do it? 134 06:50.610 --> 06:53.520 One way is to use borders. 135 06:54.150 --> 06:55.120 Let me show you what I mean. 136 06:55.170 --> 06:55.440 All right. 137 06:55.440 --> 07:00.660 Let's define border-top as 10px solid blue. 138 07:01.020 --> 07:02.250 And then we do ... 139 07:02.430 --> 07:04.890 and let's duplicate this a few times. 140 07:05.590 --> 07:09.370 Of course, it's not going to be called "top" only. It's going to be border left, 141 07:09.460 --> 07:11.200 border-right, 142 07:11.810 --> 07:13.220 and border-bottom. 143 07:13.310 --> 07:14.410 This is just kind of what I want to show you, right, 144 07:14.420 --> 07:16.120 if we do this, we just get a square. 145 07:16.130 --> 07:22.790 But what's interesting here, is if your left and right is red, just so you can see how this works, 146 07:23.210 --> 07:23.900 red, 147 07:24.860 --> 07:27.500 can you see we get, like those little triangular pieces. 148 07:28.550 --> 07:29.570 Pretty cool, right? 149 07:29.570 --> 07:32.420 So all I want to do is I want to remove the bottom border entirely. 150 07:32.420 --> 07:33.440 So let's get rid of that, 151 07:33.480 --> 07:34.100 right? 152 07:34.100 --> 07:37.250 So now we've got only top, left and right. 153 07:37.370 --> 07:41.750 The top, I want the color to be consistent with what we've defined above. 154 07:41.780 --> 07:42.530 There we go. 155 07:42.560 --> 07:45.830 It's consistent with the actual output widget itself. 156 07:46.660 --> 07:49.750 The border-left, if we make it 5 pixels, 157 07:49.780 --> 07:50.400 okay. 158 07:50.410 --> 07:52.600 And we do the same with the right. 159 07:53.020 --> 07:54.190 You can see the blue. 160 07:54.190 --> 07:58.090 That's kind of the size I want, but I don't want to see the red. 161 07:58.090 --> 08:01.510 So instead of red, all we need to do is make it transparent. 162 08:01.660 --> 08:03.850 How awesome is this? 163 08:04.300 --> 08:08.860 And now that triangular piece is just randomly at the top of that entire widget. 164 08:08.860 --> 08:14.290 So all we have to do, is we have to push it down. 165 08:14.440 --> 08:15.280 Okay, there we go. 166 08:15.280 --> 08:18.900 So we've defined the top 100%, so we've pushed it all the way to the bottom. 167 08:18.910 --> 08:21.610 We can also push it into the center. 168 08:22.870 --> 08:25.600 And then give it some margin, 169 08:25.600 --> 08:26.530 the left property 170 08:26.560 --> 08:28.030 5 pixels. 171 08:29.300 --> 08:30.570 There we go. 172 08:30.590 --> 08:32.750 If we zoom out, this is what it looks like. 173 08:32.850 --> 08:36.320 Oh, but you'll notice, my dear students that it's pushed too far down. 174 08:36.320 --> 08:38.750 So, I think we defined ... 175 08:38.750 --> 08:40.700 yes, you see the rangeValue, 176 08:40.730 --> 08:42.620 we've got position absolute. 177 08:43.500 --> 08:46.650 The rangeValue is this entire output element. 178 08:46.680 --> 08:53.430 Well, I want to push that entire output element up so we can access its top property and push it up 179 08:53.430 --> 08:54.450 by 50%. 180 08:54.450 --> 08:55.650 And I think that'll do it. 181 08:55.650 --> 08:56.490 I think that looks cool. 182 08:56.490 --> 08:57.990 At least now it's the right height. 183 08:57.990 --> 09:01.140 But you'll notice as we move this widget. 184 09:02.100 --> 09:04.500 That output does not move. 185 09:04.530 --> 09:05.340 But how, 186 09:05.370 --> 09:06.000 my students? 187 09:06.000 --> 09:07.410 How do we make it move? 188 09:07.740 --> 09:10.020 Well, again, there are many ways in programming. 189 09:10.020 --> 09:16.940 The way I want to do it here is I want to access the left property and change it dynamically. 190 09:16.950 --> 09:23.790 So just remember, I want to access the left property and this needs to move in line with wherever this 191 09:23.790 --> 09:26.190 range widget is. 192 09:26.520 --> 09:29.850 And whenever you hear the word dynamic, you must think JavaScript. 193 09:29.850 --> 09:36.750 So let's go to our JavaScript here, and let's start coding this. In our function showValue() before we even 194 09:36.750 --> 09:45.810 get to changing the innerHTML, let's grab the value as a percent. 195 09:46.950 --> 09:48.630 And you'll see why we use this shortly. 196 09:48.850 --> 09:51.990 Okay, so let's define a new variable called newValue. 197 09:52.770 --> 09:54.090 What should this be? 198 09:54.120 --> 09:58.470 Well, I want it to be the current value of our range, 199 09:58.510 --> 09:58.770 right. 200 09:58.770 --> 10:00.840 And we've defined the range variable above. 201 10:00.870 --> 10:03.390 It's just that input of type range. 202 10:03.390 --> 10:09.330 So whatever that value is, I want to deduct the minimum, which we know is zero, 203 10:09.600 --> 10:14.190 then what I want to do is I want to, like I mentioned, I want this to be a percentage. 204 10:14.580 --> 10:18.180 So we need the entire range itself to get a percent. 205 10:18.180 --> 10:22.290 So we know it's going to be a range.max minus range.min. 206 10:23.050 --> 10:27.460 And of course, to get it into percentage terms, I want to multiply by 100. 207 10:27.490 --> 10:28.930 Let's just console log this out, 208 10:29.350 --> 10:31.610 newValue, then you can see what I mean. 209 10:31.630 --> 10:32.650 Let's go to the browser. 210 10:33.130 --> 10:34.600 Let's inspect the console. 211 10:36.230 --> 10:42.260 And here you can see when the page loads, it's 50 and it's 50 because it's in the middle. If we go to 212 10:42.260 --> 10:42.920 zero, 213 10:44.100 --> 10:44.820 it's zero. 214 10:45.030 --> 10:45.900 If we go to 100. 215 10:45.930 --> 10:47.280 It's going to be 100%. 216 10:47.310 --> 10:48.780 I'm just trying to get a percentage. 217 10:48.780 --> 10:49.530 Where are we, 218 10:49.560 --> 10:50.820 you know, in this whole thing. 219 10:51.060 --> 10:51.870 That's all I've done. 220 10:52.750 --> 10:55.330 Very simple. Let's refresh, and we are back at 50. 221 10:55.570 --> 11:01.510 Okay, let's go back to our coding editor and let's continue. (swoosh) Because we have this this range value as 222 11:01.510 --> 11:02.470 a percent, 223 11:02.500 --> 11:09.760 why don't we just try, off the cuff, to assign the value of the left property to that percent and see 224 11:09.760 --> 11:10.490 what happens? 225 11:10.510 --> 11:11.740 Let's, let's give it a go. 226 11:11.950 --> 11:22.420 So here, um, we are changing the output value and position of the output element. 227 11:22.510 --> 11:23.470 That's what we're trying to do. 228 11:23.500 --> 11:24.730 So we've done the value. 229 11:24.760 --> 11:28.840 Let's now try and change the position. In order to change the position, 230 11:28.840 --> 11:32.830 I want to grab that range output variable we defined above, 231 11:33.250 --> 11:38.050 I want to access its style property and we're going to change its left property. 232 11:38.690 --> 11:44.150 And if we just go and assign that to newValue, you'll see a problem with this. 233 11:44.240 --> 11:45.980 Let me first show you. 234 11:46.160 --> 11:48.890 Oh, the other thing is, let's put this in temperate literals. 235 11:50.520 --> 11:51.570 Dollar sign, 236 11:52.110 --> 11:53.250 curly brackets, 237 11:54.430 --> 11:55.330 newValue. 238 11:56.420 --> 12:00.380 Because I want a percentage sign afterwards. 239 12:00.410 --> 12:00.920 Okay. 240 12:01.490 --> 12:03.830 If we now look at this in the browser. 241 12:03.950 --> 12:05.210 Oh, man, that looks perfect. 242 12:05.280 --> 12:05.470 Right. 243 12:05.480 --> 12:06.620 It looks perfect. 244 12:06.650 --> 12:07.670 What are you talking about? 245 12:07.760 --> 12:09.200 We need to change anything. 246 12:09.620 --> 12:10.820 Well, just wait. 247 12:10.850 --> 12:11.990 Let me scroll. 248 12:12.950 --> 12:13.940 Look at what happens. 249 12:14.210 --> 12:15.560 It's going off center 🙈. 250 12:16.470 --> 12:17.610 It's going off center. 251 12:18.640 --> 12:23.170 So we know it starts off correctly, right? 252 12:24.190 --> 12:26.260 But as we go along. 253 12:27.060 --> 12:28.530 It's off center. 254 12:28.530 --> 12:35.790 So we need to dynamically push this right when we're at the very left and when we're at the very far 255 12:35.790 --> 12:38.880 right, we need to push this output element to the left. 256 12:39.480 --> 12:39.810 Okay. 257 12:39.810 --> 12:42.090 Well, how do we know how much to push it? 258 12:42.630 --> 12:48.870 Let's define a new variable here called adjustPosition and let's define it as 10. 259 12:49.050 --> 12:49.290 Okay. 260 12:49.290 --> 12:51.430 We're just going to move it 10 pixels and see what happens. 261 12:51.450 --> 12:58.920 Then all I want to do in this value here, I want to access the calc() method. 262 12:58.920 --> 13:00.090 Put that in brackets. 263 13:01.050 --> 13:07.800 And what I want to calc? Well, I want to use this left position we've just calculated, but I want to 264 13:07.800 --> 13:08.820 add now, right. 265 13:09.000 --> 13:10.470 And what do I want to add? 266 13:11.580 --> 13:12.600 Let's put new brackets. 267 13:12.600 --> 13:20.310 Well, I want to add the adjustPosition variable we've just created, but it's going to be in pixels. 268 13:20.940 --> 13:23.340 Like I said, I just want to push it right by 10 pixels. 269 13:23.670 --> 13:25.740 Let's now save this, go to the browser. 270 13:27.390 --> 13:29.970 And let's now scroll all the way to the left. 271 13:31.340 --> 13:33.080 Oh, it's not quite right. 272 13:33.080 --> 13:34.490 I think 10 pixels is too much. 273 13:34.490 --> 13:35.240 Can you see? 274 13:35.990 --> 13:39.410 So let's try 7. 275 13:42.780 --> 13:44.430 And that looks bang on. 276 13:44.430 --> 13:46.770 So when it's to the left, we want 7. 277 13:46.800 --> 13:49.470 When it's to the center, we want nothing. 278 13:49.470 --> 13:52.710 And when it's to the right, we actually need to push it the other way. 279 13:52.710 --> 13:56.690 So our adjustPosition formula needs to be dynamic. 280 13:56.700 --> 14:00.240 Put it this way, when it's to the very left, it needs to be 7. 281 14:00.240 --> 14:02.330 So we know, right, 282 14:02.340 --> 14:05.970 the newValue will be 0 times a percentage, 283 14:05.970 --> 14:08.030 and I'll show you why it's 14% now, 284 14:08.070 --> 14:08.600 okay. 285 14:08.640 --> 14:10.830 Think about why I've done this 286 14:10.830 --> 14:16.020 my dear students. The new value ranges from 0 to 100, remember? 287 14:16.020 --> 14:22.920 So when it's in the middle, we know the new value is 50. 50 multiplied by 14% is 7. 288 14:22.920 --> 14:25.170 7 minus 7 will be 0. 289 14:25.260 --> 14:28.680 So when we start off the page, this is not going to be adjusted. 290 14:28.680 --> 14:37.140 The output element will be dead on the center. When we at the very far left of the range, that newValue 291 14:37.140 --> 14:39.990 is going to be zero and anything multiplied by zero is zero. 292 14:39.990 --> 14:43.270 So we're going to adjust the position by 7 pixels. 293 14:43.950 --> 14:47.160 When we are at the very far right, we know 294 14:47.700 --> 14:53.040 the newRange value is 100, 100 times 14% is 14. 295 14:53.070 --> 14:58.290 7-14 is -7, which pushes it left by 7. 296 14:58.290 --> 15:00.420 And this is how it works. 297 15:00.720 --> 15:05.040 I know it's a bit "mathy", but I hope you can understand how we got to that number. 298 15:05.920 --> 15:06.640 So there we go. 299 15:06.670 --> 15:09.250 This is a custom range widget. 300 15:09.400 --> 15:11.490 Hope you're having a lot of fun, my dear students. 301 15:12.640 --> 15:17.320 And the next challenge is also going to be quite fun because there, I want to create an entire form. 302 15:17.320 --> 15:19.540 It's going to be really, really fun. 303 15:19.570 --> 15:20.020 See you now.