WEBVTT

00:00:07.170 --> 00:00:12.610
Let's save a minus sign that said it's OK.

00:00:12.780 --> 00:00:15.230
So let's save the refresh.

00:00:15.630 --> 00:00:22.050
So now if we don't place any text there I click on the reading wasn't because the error message.

00:00:22.700 --> 00:00:25.440
OK.

00:00:27.660 --> 00:00:30.850
If we were fresh and writes enough text the

00:00:33.480 --> 00:00:36.040
click we don't see the error message.

00:00:36.080 --> 00:00:41.750
OK now destroys the code executes if we have enough text.

00:00:42.210 --> 00:00:42.690
So

00:00:46.350 --> 00:00:49.630
first of all we are going to move to the reading mode.

00:00:49.980 --> 00:00:53.840
So to do this we going to use a variable reading.

00:00:54.200 --> 00:00:56.380
There's going to be a boolean.

00:00:56.550 --> 00:00:59.840
So let's declare this variable at the beginning.

00:01:00.540 --> 00:01:02.560
It's called reading.

00:01:02.880 --> 00:01:07.200
Initially it's going to be set to false or not reading when we at the OP.

00:01:07.260 --> 00:01:19.080
So now as we starting reading we are going to move to the reading mode by setting this variable reading

00:01:19.970 --> 00:01:21.460
to true.

00:01:22.010 --> 00:01:30.860
OK then we are going to show the controls.

00:01:31.860 --> 00:01:39.750
OK we're going to show this slide is also going to show the new and pause and resume buttons.

00:01:39.750 --> 00:01:40.440
OK.

00:01:40.560 --> 00:01:43.760
And also the reading reading walks.

00:01:44.020 --> 00:01:48.920
And we going to hide the text inputs and these reading really matter.

00:01:49.170 --> 00:01:52.500
So let's go ahead and do all this

00:01:55.180 --> 00:01:58.090
.

00:01:58.320 --> 00:02:08.800
So are we going to hide the source MUSSEN the error message the user inputs.

00:02:10.250 --> 00:02:13.450
We're going to show the new button.

00:02:13.590 --> 00:02:22.760
The pause is you and the slides which are inside the controls.

00:02:24.170 --> 00:02:25.480
OK.

00:02:26.520 --> 00:02:27.350
So raise taxes.

00:02:27.360 --> 00:02:32.900
Each of these elements using his ID restarts muslin.

00:02:34.660 --> 00:02:39.680
We're going to hide it.

00:02:39.690 --> 00:02:43.320
We're going to hide the error message.

00:02:43.320 --> 00:02:45.270
Also we're going to hide the user inputs

00:02:52.160 --> 00:02:55.660
and we're going to show you wasn't

00:02:59.880 --> 00:03:08.850
the cause wasn't OK when at the beginning we're not going to show the video wasn't actually on the pause

00:03:08.880 --> 00:03:19.770
button and we're going to show the slides which are inside the div of the controls.

00:03:19.870 --> 00:03:20.780
They just double check

00:03:20.780 --> 00:03:26.480
.

00:03:26.610 --> 00:03:28.510
OK that's good.

00:03:29.340 --> 00:03:34.380
OK fine.

00:03:34.460 --> 00:03:37.100
Now let's save and try this.

00:03:37.680 --> 00:03:39.240
So if we have enough text

00:03:42.650 --> 00:03:44.870
now we can see controls there.

00:03:45.040 --> 00:03:51.530
OK well I can see the new and pause buttons on it.

00:03:52.340 --> 00:04:02.440
Now we will need two sets the maximum of our progress slider using the number of words.

00:04:02.610 --> 00:04:08.700
OK as we have said earlier you know the logic.

00:04:08.700 --> 00:04:13.070
So we get a sense the progress later months.

00:04:13.150 --> 00:04:27.300
So first of all we going to access the slider using his ID which is progress Sladen to change the max

00:04:27.310 --> 00:04:31.970
attributes are we going to use the attributes method which will take two promises.

00:04:32.010 --> 00:04:37.930
So the first one is a string where we place the anti-abuse you would like to change.

00:04:38.160 --> 00:04:40.320
The second problem is going to be the value.

00:04:40.320 --> 00:04:44.210
So we looking here at the number of words minus one.

00:04:44.370 --> 00:04:44.630
OK.

00:04:44.640 --> 00:04:46.310
As we covered earlier.

00:04:46.590 --> 00:04:52.380
So the number of words is the input less than minus one.

00:04:53.110 --> 00:05:03.540
OK then we're going to need to start showing these words and we know that we're going to use the index

00:05:03.550 --> 00:05:04.360
.

00:05:05.700 --> 00:05:12.840
Ok to get these words from the right and we say that we're going to show every time the word or the

00:05:12.840 --> 00:05:14.840
elements of index counts.

00:05:15.270 --> 00:05:16.740
So we can use our counter

00:05:20.680 --> 00:05:23.380
to start we can assess the counter to zero.

00:05:23.550 --> 00:05:25.450
So let's define a variable count in

00:05:29.820 --> 00:05:31.120
they're going to set it to zero

00:05:34.040 --> 00:05:39.600
stars the counter zero.

00:05:41.380 --> 00:05:43.450
All right.

00:05:43.960 --> 00:05:46.510
And then we're going to show the first word.

00:05:46.750 --> 00:05:47.570
OK.

00:05:47.740 --> 00:05:48.070
So

00:05:52.330 --> 00:05:56.500
we haven't shown the reading books there but we're going to show it here.

00:05:56.740 --> 00:05:57.820
OK so we're going to show

00:06:00.550 --> 00:06:03.810
the reading books or the results.

00:06:04.050 --> 00:06:04.310
OK.

00:06:04.330 --> 00:06:07.480
With the first word.

00:06:09.160 --> 00:06:18.340
So first this show the books by using the ID of the books which is results you know case you just have

00:06:18.340 --> 00:06:18.920
to check

00:06:24.950 --> 00:06:33.100
those results and we're going to use the show method to show it's going to be an empty box if you like

00:06:33.100 --> 00:06:39.050
but now we need to show the first word inside the results.

00:06:39.200 --> 00:06:43.060
Dave we're going to change the

00:06:45.730 --> 00:06:52.120
text of this div using the first word.

00:06:52.120 --> 00:06:58.150
So the first word is going to be the elements inside our array.

00:06:59.200 --> 00:06:59.530
OK.

00:06:59.530 --> 00:07:03.780
Of index 0 or index count.

00:07:04.030 --> 00:07:09.390
OK so you get to go to the array and then get the elements of index cards.

00:07:10.090 --> 00:07:11.290
All right.

00:07:11.880 --> 00:07:15.670
So now let's save try this

00:07:20.620 --> 00:07:23.590
here and now we can see our first word.

00:07:24.100 --> 00:07:25.180
OK.

00:07:26.100 --> 00:07:27.010
All right.

00:07:27.280 --> 00:07:29.220
Now we are going to start reading.

00:07:29.520 --> 00:07:29.900
OK.

00:07:30.040 --> 00:07:35.020
As we said earlier to read we are going to show one word at a time.

00:07:35.340 --> 00:07:35.800
OK.

00:07:36.000 --> 00:07:43.330
And we're going to use a time to give hints here because we are doing a loop every will run as we're

00:07:43.330 --> 00:07:47.220
executing code every two seconds initially.

00:07:47.380 --> 00:07:48.060
OK.

00:07:48.630 --> 00:07:48.930
So

00:07:57.460 --> 00:07:58.130
OK

00:08:01.470 --> 00:08:04.070
so we're going to be using the set interval function.

00:08:04.440 --> 00:08:04.710
OK.

00:08:04.720 --> 00:08:10.130
So here we starting reading from the first with.

00:08:11.080 --> 00:08:19.000
So to use these the set interval function as we've done in previous projects we can find a variable

00:08:19.150 --> 00:08:24.280
where we live where we saw the outputs of the interval function and it's called the variable action

00:08:24.280 --> 00:08:25.950
.

00:08:26.290 --> 00:08:35.400
So we're going to set the action variable to the outputs of this function which takes two promises.

00:08:35.560 --> 00:08:40.030
OK so the first barometer is going to be a function.

00:08:40.060 --> 00:08:47.020
So I'm going to call this function read and then we can define this function later on in the function

00:08:47.020 --> 00:08:48.790
section.

00:08:48.820 --> 00:08:53.540
The second barometer is the number of milliseconds for our frequency.

00:08:53.920 --> 00:08:54.510
OK.

00:08:54.940 --> 00:08:57.250
So we're going to start with 280 seconds

00:08:59.980 --> 00:09:08.800
otherwise we can say we just need a number that so turn seconds we can use a variable frequency ones

00:09:10.150 --> 00:09:12.080
because this is going to change later.

00:09:12.640 --> 00:09:17.070
So it is defined as variable at the beginning.

00:09:19.660 --> 00:09:19.990
OK

00:09:19.990 --> 00:09:30.850
.

00:09:30.850 --> 00:09:35.590
Now let's create our reading function so we're going to go to the functions section.

00:09:36.220 --> 00:09:40.630
OK so this creates a function there

00:09:45.010 --> 00:09:49.630
.

00:09:49.870 --> 00:09:50.170
OK.

00:09:50.170 --> 00:09:57.520
So first of all we are going to check if we hit the last word.

00:09:57.760 --> 00:09:58.800
OK.

00:09:58.810 --> 00:10:03.800
So to check that is we are going to check the value of our counter.

00:10:04.360 --> 00:10:18.250
So he says the last word means that the counter is going to hit the last number which is the index length

00:10:18.430 --> 00:10:20.180
of the array minus 1.

00:10:20.200 --> 00:10:23.130
So if our array has got 10 elements.

00:10:23.170 --> 00:10:28.050
OK the last elements is going to have an index 9.

00:10:28.310 --> 00:10:30.040
OK so if the counter

00:10:33.010 --> 00:10:37.840
is the last index which is the length of our array minus 1.

00:10:38.170 --> 00:10:40.930
So this means that we are the final word.

00:10:41.170 --> 00:10:42.010
OK.

00:10:42.670 --> 00:10:44.200
That's means lost weight

00:10:49.130 --> 00:10:50.530
now we going to do a few things.

00:10:50.540 --> 00:10:52.830
So first of all we stop reading.

00:10:53.180 --> 00:11:00.480
So we know that we initiated the reading using this line of code or using the set of all functions so

00:11:00.480 --> 00:11:06.650
to stop the set interval function we're going to use the clear interval function that we apply to the

00:11:06.680 --> 00:11:07.720
action variable.

00:11:07.930 --> 00:11:08.540
OK.

00:11:08.870 --> 00:11:14.470
So a clear interval applied to the action variable.

00:11:14.720 --> 00:11:15.810
So that's the first thing.

00:11:16.120 --> 00:11:17.090
OK.

00:11:17.560 --> 00:11:24.000
And now as we start reading our reading mode is going to become false.

00:11:24.050 --> 00:11:31.380
Ok so now we're going to move to the non-reading mode by setting the reading variable to false.

00:11:32.090 --> 00:11:38.030
Ok move to non-reading word.

00:11:39.460 --> 00:11:40.970
OK.

00:11:42.140 --> 00:11:49.300
Also once we get the last word you will notice that we keep only the New button.

00:11:49.330 --> 00:11:50.320
OK.

00:11:50.480 --> 00:11:56.290
And the other of us must know which is the pause button is going to disappear.

00:11:56.960 --> 00:12:04.840
OK so let's hide this button.

00:12:06.560 --> 00:12:09.710
All right.

00:12:10.010 --> 00:12:23.900
Now if we haven't hit the last word yet we are going to show one word OK to show that word we are going

00:12:23.900 --> 00:12:27.690
to use the index of the word inside the array.

00:12:28.530 --> 00:12:29.190
OK.

00:12:29.420 --> 00:12:33.860
So you don't have an else statement

00:12:35.400 --> 00:12:39.420
.

00:12:41.310 --> 00:12:41.920
OK.

00:12:42.110 --> 00:12:42.530
So

00:12:46.040 --> 00:12:50.300
if we don't change our counter we're going to be showing all the time the same way.

00:12:50.600 --> 00:12:57.380
So first let's increase our counter by 1.

00:12:58.670 --> 00:13:01.070
OK.

00:13:04.940 --> 00:13:10.410
And then let's show it.

00:13:11.270 --> 00:13:18.140
So we're going to access the reading box which is the elements of ID results and then we're going to

00:13:18.140 --> 00:13:25.990
change the text of the elements using the index counter.

00:13:26.300 --> 00:13:31.550
OK so going to access the array because of the array and then we are looking at the elements of index

00:13:31.610 --> 00:13:33.650
count.

00:13:34.340 --> 00:13:41.130
All right now we're going to do something else we're going to look at our progress like Slade.

00:13:41.140 --> 00:13:41.870
OK.

00:13:42.200 --> 00:13:45.450
So we need to change the value of this later.

00:13:45.500 --> 00:13:50.770
So as we said earlier the value of the slide equerries bonds to the value of the count.

00:13:51.200 --> 00:13:55.820
So we can access the slider and sets its value to the value of the card.

00:13:56.480 --> 00:13:57.310
OK.

00:13:57.710 --> 00:14:06.130
So we are changing the progress the value.

00:14:07.370 --> 00:14:17.210
Also once we change the value of a slider indecorum immobile we need to refresh that slide so we can

00:14:17.300 --> 00:14:19.970
refresh it as well.

00:14:21.770 --> 00:14:26.730
So if you change the value we can access the slide using its ID.

00:14:28.490 --> 00:14:28.790
OK

00:14:29.190 --> 00:14:34.600
.

00:14:34.590 --> 00:14:43.880
And then we're going to change the value using the Voll method to the value of the card.

00:14:44.720 --> 00:14:52.760
And after that we are going to refresh this slider by using the slider method which will take one promiser

00:14:52.760 --> 00:15:01.640
here to refresh OK which is refresh like this if you want to combine both these lines in one line you

00:15:01.640 --> 00:15:02.420
can do that.

00:15:02.570 --> 00:15:14.080
So at the end of this line you can just odd dot slider refresh OK rather than writing two lines.

00:15:14.740 --> 00:15:20.050
It is completely fine to do it like this.

00:15:22.730 --> 00:15:23.660
OK so let's save

00:15:26.480 --> 00:15:27.960
let's have a look.

00:15:28.790 --> 00:15:30.170
So if we place some stakes there

00:15:34.610 --> 00:15:41.780
and click on the source winning wasn't OK so we can see it as we are reading one way to the time.

00:15:41.780 --> 00:15:45.550
But it looks like the speed is too high.

00:15:46.640 --> 00:15:54.800
So just check our frequency.

00:15:54.860 --> 00:16:02.870
OK so we haven't defined any value for the frequency so let's set this to 200 milliseconds initially

00:16:03.690 --> 00:16:08.410
save and it's right again

00:16:11.530 --> 00:16:12.940
.

00:16:13.070 --> 00:16:14.590
So you can see that it is working.

00:16:14.840 --> 00:16:17.240
So if we it to 1000 seconds

00:16:24.350 --> 00:16:27.110
we're going to read one word every second.

00:16:28.210 --> 00:16:29.660
Okay perfect.

00:16:29.680 --> 00:16:34.620
It's working on it now.

00:16:37.370 --> 00:16:38.540
We need to

00:16:41.240 --> 00:16:44.080
calculate the progress percentage.

00:16:44.140 --> 00:16:45.690
OK.

00:16:45.890 --> 00:16:49.420
Change the value of outspanned.

00:16:49.880 --> 00:16:53.690
So it's not that common.

00:16:53.720 --> 00:17:00.010
So change the text of percentage.

00:17:00.740 --> 00:17:06.590
OK so this person had an ID so we click

00:17:13.070 --> 00:17:15.540
that's Aspern and the ID is percentage.

00:17:15.820 --> 00:17:18.410
OK.

00:17:18.560 --> 00:17:21.530
So we get to access despite using his ID

00:17:24.290 --> 00:17:30.480
which is percentage are going to change its text.

00:17:31.760 --> 00:17:32.580
OK.

00:17:32.990 --> 00:17:43.100
So as we said earlier the value of the progress percentage is going to be calculated by taking the counter

00:17:43.250 --> 00:17:51.120
value and dividing by the number of words inside our array minus 1.

00:17:51.170 --> 00:17:54.030
And then we multiply everything by 100.

00:17:54.080 --> 00:18:09.860
So it do this so that's going to be counter divided by the length of the array minus what they are then

00:18:09.860 --> 00:18:12.760
we multiply by 100.

00:18:13.940 --> 00:18:19.850
OK so let's save and try this

00:18:27.760 --> 00:18:32.010
because here is it's working.

00:18:32.360 --> 00:18:35.770
All right so we want to keep only

00:18:39.850 --> 00:18:41.000
two that is there.

00:18:41.060 --> 00:18:41.510
OK.

00:18:41.570 --> 00:18:47.000
So we want an integer so we can place the whole

00:18:49.550 --> 00:18:55.060
formula inside math floor.

00:18:56.180 --> 00:18:56.390
OK

00:18:59.530 --> 00:19:01.190
let's do this and say

00:19:10.960 --> 00:19:15.550
hey let's try again.

00:19:16.310 --> 00:19:16.690
OK.

00:19:16.700 --> 00:19:17.800
And that's best.

00:19:18.670 --> 00:19:22.880
All right.

00:19:25.670 --> 00:19:33.400
So in the next video we can write code corresponding to clicking on the buttons resume new and boss