WEBVTT

00:00:08.960 --> 00:00:14.790
In this video we are going to learn how to use the query you are to create a progress bar.

00:00:15.420 --> 00:00:24.800
So first of all we're going to create a date and we're going to give you an idea OK this let's call

00:00:24.800 --> 00:00:26.460
it progress

00:00:29.430 --> 00:00:41.850
then to use the query you a method we are going to access the div using its ID and the method is progress

00:00:43.230 --> 00:00:45.070
pretty straightforward.

00:00:45.860 --> 00:00:46.100
OK

00:00:53.280 --> 00:01:00.740
so you can see our progress bar there but we haven't since we haven't used any properties yet.

00:01:00.780 --> 00:01:04.770
We don't see any anything inside the bar.

00:01:04.920 --> 00:01:11.970
So one property is the value so we can choose a value between 0 and 100.

00:01:12.150 --> 00:01:22.630
So if we say that to 25 for example we can see that we've got 25 percent progress.

00:01:22.670 --> 00:01:23.920
All right.

00:01:24.690 --> 00:01:27.480
OK so now we to write some code.

00:01:27.510 --> 00:01:35.880
So as we click on a button and our progress bar will just get filled from zero to a hundred percent

00:01:35.890 --> 00:01:36.520
.

00:01:37.140 --> 00:01:39.770
So it creates a button right.

00:01:39.810 --> 00:01:42.380
Absolutely Dave.

00:01:44.150 --> 00:01:46.610
OK.

00:01:47.130 --> 00:01:54.550
Let's put some to run OK.

00:01:56.830 --> 00:01:57.280
OK.

00:01:57.390 --> 00:02:02.310
So our value at the beginning is going to be zero.

00:02:02.760 --> 00:02:03.590
Right.

00:02:04.130 --> 00:02:12.760
And now we get to write some code so that we can go from zero to a hundred.

00:02:13.170 --> 00:02:16.440
So first we get to use a variable.

00:02:16.440 --> 00:02:22.600
So when we declare a variable x that we need we are going to set to zero.

00:02:22.920 --> 00:02:23.330
OK.

00:02:23.490 --> 00:02:27.900
And then we can access the button

00:02:31.140 --> 00:02:37.500
all you want but since Are you going to use the past and select the right records and

00:02:42.550 --> 00:02:50.790
get to use the click method then we're going to define the function we need to run in the so

00:02:54.510 --> 00:02:56.760
we can have a label in there.

00:02:56.940 --> 00:03:02.890
So when you click on the button we can have a label showing in progress for example.

00:03:03.330 --> 00:03:10.440
And then after that we can start filling in the bar from 0 to 100.

00:03:10.650 --> 00:03:14.110
So let's create a label inside the diff.

00:03:15.240 --> 00:03:19.320
OK so it just creates another div inside a div

00:03:23.370 --> 00:03:28.650
and give it an ID label.

00:03:28.650 --> 00:03:34.510
So when we click on the button we are going to add some text label.

00:03:34.760 --> 00:03:43.840
OK so we're going to access our label Dave using its ID begin to use the text method.

00:03:44.150 --> 00:03:44.420
OK.

00:03:44.440 --> 00:03:48.670
And we are going to add some text.

00:03:48.690 --> 00:03:51.600
So we're going to say in progress

00:03:54.320 --> 00:03:57.970
for example.

00:03:58.560 --> 00:04:01.620
OK so let's try make sure it's.

00:04:01.620 --> 00:04:09.250
So if we click on run you can see the label showing in progress we can style the label if you want to

00:04:11.550 --> 00:04:17.160
we can have the label in the middle there.

00:04:19.350 --> 00:04:21.100
OK.

00:04:22.290 --> 00:04:22.550
OK.

00:04:22.560 --> 00:04:23.790
So let's go for

00:04:27.450 --> 00:04:27.670
it.

00:04:28.600 --> 00:04:41.730
You said the position property to absolute and we can send city property to 45 percent for example it

00:04:41.880 --> 00:04:44.300
is good or it

00:04:48.490 --> 00:04:51.990
so if you click on the button the label is there.

00:04:52.240 --> 00:04:54.480
OK.

00:04:56.980 --> 00:04:57.400
Now

00:05:00.130 --> 00:05:16.450
we are going to use the set interval function so that we keep increasing x and setting the value of

00:05:16.480 --> 00:05:18.040
the progress bar to x.

00:05:18.040 --> 00:05:19.430
So at the beginning is zero.

00:05:19.690 --> 00:05:27.040
And then we're going to go to one and we set the value to one and so on until we get to a hundred.

00:05:27.610 --> 00:05:28.330
OK.

00:05:28.690 --> 00:05:29.020
So

00:05:31.980 --> 00:05:37.070
let's do that.

00:05:41.830 --> 00:05:52.880
So we are going to have we can declare a variable called progress if we say that two sets interval OK

00:05:54.250 --> 00:05:55.240
.

00:05:55.980 --> 00:05:58.940
And as we have seen earlier.

00:05:59.140 --> 00:06:03.580
So we need a function

00:06:08.310 --> 00:06:10.570
and a second parameter

00:06:13.630 --> 00:06:14.980
in milliseconds.

00:06:15.100 --> 00:06:20.530
So every hundred milliseconds we can run the code inside this function.

00:06:24.340 --> 00:06:24.670
So

00:06:27.460 --> 00:06:35.980
first we get to increase X by 1 and then we can access the

00:06:40.570 --> 00:06:41.370
progress Bober.

00:06:41.410 --> 00:06:44.080
But before we do that let's change the label as well.

00:06:44.080 --> 00:06:55.770
So at least X is the label and put some text there with text this time is going to be X..

00:06:56.620 --> 00:07:00.560
OK let's add a percentage as well.

00:07:00.730 --> 00:07:05.670
So he's going to add a string to show a percentage.

00:07:07.030 --> 00:07:07.290
OK

00:07:10.000 --> 00:07:14.410
then now let's access our progress bar using its ID

00:07:17.320 --> 00:07:23.510
and we get to use the progress bar method.

00:07:24.420 --> 00:07:25.360
OK.

00:07:25.360 --> 00:07:29.200
By this time we going to use it to change the value of an option.

00:07:29.320 --> 00:07:31.540
So we need three properties.

00:07:31.620 --> 00:07:34.750
The first one is option.

00:07:36.000 --> 00:07:38.400
OK.

00:07:38.440 --> 00:07:47.320
The second barometer is value because we are changing the value of the progress bar and the last barometer

00:07:47.350 --> 00:07:53.750
is going to be at X because we think the value of the progress bar to X.

00:07:53.980 --> 00:07:55.070
OK.

00:07:55.900 --> 00:07:56.760
OK fine.

00:07:57.130 --> 00:08:05.650
Now we need to add a condition to see when we get to stop the interval function using the clear interval

00:08:06.340 --> 00:08:07.210
function.

00:08:07.240 --> 00:08:16.770
So if x is greater than 99 then we are sure that's the progress bar is filled.

00:08:16.900 --> 00:08:17.470
OK.

00:08:17.470 --> 00:08:18.070
So we can just

00:08:21.340 --> 00:08:35.010
say if x is greater than 99 then we're going to use the function clear interval of progress.

00:08:36.990 --> 00:08:39.760
OK.

00:08:40.180 --> 00:08:41.120
Right.

00:08:41.500 --> 00:08:48.710
So let's try this and make sure it's working so if we click on the button so we have seen the in-progress

00:08:49.630 --> 00:08:55.610
text and know is make sure it's working ok.

00:08:56.800 --> 00:09:05.820
We can add some delay between showing the progress in the progress bar and showing the levels because

00:09:05.820 --> 00:09:07.300
it goes so quick at the beginning.

00:09:07.300 --> 00:09:12.120
So if we do it again you will see the the label showing in progress.

00:09:12.310 --> 00:09:16.350
But then right after that quickly we can see the counter going.

00:09:16.660 --> 00:09:18.840
So we can either delay there.

00:09:19.120 --> 00:09:23.160
So to do that we'll take all this code.

00:09:23.870 --> 00:09:25.960
OK.

00:09:26.320 --> 00:09:31.470
And we get a pussy inside another function so we have a delay.

00:09:31.750 --> 00:09:40.030
If you remember we need set time outs and again we going to have two priorities.

00:09:40.040 --> 00:09:41.790
The first one is a function.

00:09:41.830 --> 00:09:47.440
The second one is going to be the right duration in milliseconds.

00:09:47.500 --> 00:09:53.980
So we're going to have a function and we will put our code inside this function and then let's say we

00:09:53.980 --> 00:09:59.670
wait for one second and then restarts then we execute the code inside the function.

00:09:59.720 --> 00:10:03.780
There is going to base our code in there.

00:10:03.990 --> 00:10:06.460
OK so we're just trying to make sure it's working.

00:10:06.460 --> 00:10:10.740
So if you click on the button so that we can see in progress.

00:10:10.740 --> 00:10:19.260
So it stayed there for a second and then we can see the progress bar getting filled.

00:10:19.270 --> 00:10:21.050
OK.

00:10:21.240 --> 00:10:25.580
All right so the next video will have look at selects menu