WEBVTT

0
00:07.590 --> 00:07.810
(music)

1
00:14.660 --> 00:15.770
Okay, so here we are.

2
00:15.800 --> 00:17.000
This is where we left off.

3
00:17.000 --> 00:22.220
We've got this range, but we can't see what the user, you know, what the range is.

4
00:22.250 --> 00:23.480
We can't see the value.

5
00:23.480 --> 00:28.180
And it's irritating because you can only see it when it's submitted to the server.

6
00:28.190 --> 00:34.190
So how do we create an output element and display it, or display the value, to the screen?

7
00:34.520 --> 00:39.860
Well, like I mentioned, we can use an output element. So let me show you how we can do that.

8
00:40.040 --> 00:44.660
The first thing we need to do is we need to use JavaScript and in order to do that, we have to put

9
00:44.660 --> 00:46.790
JavaScript within the script tags.

10
00:46.970 --> 00:50.240
Now what we have to do, is we have to do a few things.

11
00:50.240 --> 00:53.600
Firstly, we want to get the price value right.

12
00:53.600 --> 00:58.220
So in order to do that, we need to grab that input of type range.

13
00:58.220 --> 00:59.390
So how do we do that?

14
00:59.390 --> 01:06.680
Well, we can just define a variable called price, and we can get that input with the querySelector.

15
01:06.680 --> 01:08.660
So we access the document. On here, 

16
01:08.660 --> 01:16.490
we've got a method called querySelector(), and you guessed it, we want to target that element that

17
01:16.490 --> 01:19.160
has an ID of price.

18
01:19.190 --> 01:20.330
Very, very simple.

19
01:20.360 --> 01:24.650
The next thing I want to do is I want to create an output element.

20
01:24.650 --> 01:28.510
So within our HTML, you know what ...

21
01:28.520 --> 01:34.220
let's just remove the button for now. Output, and I want to give it a class.

22
01:34.220 --> 01:41.000
Let's give it a class of, I don't know, let's say price-output, because that's exactly what

23
01:41.000 --> 01:41.840
it is.

24
01:41.870 --> 01:44.930
Now, the second step in JavaScript is to grab that output.

25
01:44.930 --> 01:51.650
So again, let's define a variable called output, and let's get it again with the querySelector, 

26
01:51.650 --> 01:58.880
querySelector, and this time we want to query select the element that has a class of price-output.

27
01:59.270 --> 02:02.600
But if we leave it at this, nothing visually has happened.

28
02:02.600 --> 02:05.420
If we go to the browser and we refresh, nothing has happened.

29
02:05.420 --> 02:09.230
So let's set a default ... set default ...

30
02:10.900 --> 02:15.100
value to the output element, right?

31
02:15.100 --> 02:19.810
Because right now we can see the output element has nothing within its tags.

32
02:19.840 --> 02:20.680
It's empty.

33
02:20.680 --> 02:27.640
And in order to do this, all we have to do is grab our output variable we defined in JavaScript above

34
02:27.640 --> 02:32.230
and we can set its textContent property to what?

35
02:33.310 --> 02:34.210
That's right.

36
02:34.210 --> 02:36.100
To the value of the input.

37
02:36.100 --> 02:42.250
And we know we have the input or the price input in that price variable we've defined in JavaScript.

38
02:42.250 --> 02:45.100
And on there we've got the value property, right?

39
02:45.100 --> 02:47.830
And initially we set that to 250,000.

40
02:47.830 --> 02:51.820
If we save this, and we go back to the browser, we should see it.

41
02:51.820 --> 02:52.600
There we go.

42
02:52.600 --> 02:55.240
But obviously now what happens is when we move

43
02:55.690 --> 02:57.060
nothing happens, okay?

44
02:57.070 --> 02:58.510
And we want that to be dynamic.

45
02:58.510 --> 03:00.310
We want it to constantly change.

46
03:00.310 --> 03:08.740
What I didn't mention in the lecture was that every time a change occurs on this range, the input event

47
03:08.740 --> 03:10.180
gets fired by the browser.

48
03:10.180 --> 03:15.470
So what we have to do in JavaScript is we have to listen for that input event and every time that input

49
03:15.470 --> 03:21.340
event is triggered, we want to effectively update that output element's value.

50
03:21.350 --> 03:24.500
So let's quickly, quickly do that and then we'll be done.

51
03:24.950 --> 03:32.660
All we have to do is go back to our coding editor. And as I mentioned, on that input of price, we have

52
03:32.660 --> 03:37.670
to add an event listener and the event we're listening for here is input, right?

53
03:37.670 --> 03:39.890
And I'll just use arrow syntax

54
03:40.870 --> 03:42.850
to define our callback function.

55
03:42.850 --> 03:46.180
What happens when this input event is fired?

56
03:46.270 --> 03:47.620
Very, very easy.

57
03:47.620 --> 03:52.240
All we want to do, is we want to grab our output element we defined above in JavaScript.

58
03:52.270 --> 03:55.210
We want to change its textContent

59
03:55.210 --> 03:56.500
property to what?

60
03:57.650 --> 03:58.340
That's right.

61
03:58.340 --> 04:03.890
We want to assign the value of that input of type range, right.

62
04:03.890 --> 04:09.230
So we can grab our price variable and it has a property of value.

63
04:09.260 --> 04:10.280
That's all we want to do.

64
04:10.280 --> 04:12.590
And this, my dear student, should be enough.

65
04:12.590 --> 04:16.220
Let's go back here, refresh and as we slide

66
04:16.220 --> 04:18.020
the range control

67
04:18.020 --> 04:19.340
we can see the numbers moving.

68
04:20.180 --> 04:22.250
How awesome is this?

69
04:22.760 --> 04:23.990
That is so, so cool.

70
04:24.020 --> 04:24.950
Much, much better.

71
04:24.950 --> 04:28.720
Much more user friendly for the user to see the numbers as they slide it along.

72
04:28.730 --> 04:29.420
So there you go.

73
04:29.420 --> 04:30.110
That's the code.

74
04:30.110 --> 04:31.190
Very, very simple

75
04:31.190 --> 04:31.790
JavaScript.

76
04:31.820 --> 04:37.970
Nothing, nothing crazy going on here and I can't wait to continue on to the next lecture.

77
04:38.000 --> 04:38.570
See you now.