WEBVTT

00:00:07.410 --> 00:00:09.150
Now let's move to the buttons.

00:00:09.270 --> 00:00:10.180
OK.

00:00:10.650 --> 00:00:19.370
Let's add a comment just before the six area first saying takes inputs.

00:00:21.080 --> 00:00:21.920
OK.

00:00:21.970 --> 00:00:24.180
Now let's move to the buttons

00:00:26.100 --> 00:00:28.540
.

00:00:32.040 --> 00:00:38.070
So we're going to have four buttons.

00:00:38.070 --> 00:00:46.890
So the first one is going to be the start reading button and this gives us an idea you can use these

00:00:46.890 --> 00:00:51.680
ideas later in the day queery code to show and hide elements.

00:00:52.770 --> 00:01:00.560
So the second MUSSEN is going to be the new button.

00:01:04.100 --> 00:01:05.420
OK.

00:01:05.500 --> 00:01:05.700
So

00:01:09.420 --> 00:01:19.920
then this gives a lady of that are going to have the Resume button or the pause button first

00:01:23.070 --> 00:01:24.350
and then the resumes and

00:01:31.530 --> 00:01:37.360
so they save and refresh.

00:01:38.220 --> 00:01:43.860
OK I can see all our there.

00:01:44.310 --> 00:01:47.160
All right.

00:01:47.160 --> 00:01:51.670
Now let's move to the box showing the word that we are reading.

00:01:51.800 --> 00:01:52.370
OK.

00:01:52.470 --> 00:02:04.920
So we're going to create this box to blow all the buttons so I can just place it just before the error

00:02:04.920 --> 00:02:06.370
message.

00:02:07.430 --> 00:02:07.970
OK.

00:02:08.100 --> 00:02:09.690
It is odd a comment there

00:02:13.110 --> 00:02:17.330
and say this is the red white.

00:02:18.310 --> 00:02:27.350
OK so going to create a div and give it an ID results.

00:02:27.750 --> 00:02:34.510
So for now let's just play some text there to see books.

00:02:34.560 --> 00:02:35.610
So if we

00:02:38.450 --> 00:02:40.170
as what we see.

00:02:40.280 --> 00:02:46.410
All right so now let's tile this box so that it looks like this.

00:02:46.410 --> 00:02:47.400
So first of all

00:02:51.940 --> 00:02:54.010
this goes outside in sheets.

00:02:54.360 --> 00:02:59.470
And because they convert the read word.

00:02:59.580 --> 00:03:05.610
So you get to access the books using its ID which is results and

00:03:10.000 --> 00:03:17.420
less just the initial font size to 50 pixels.

00:03:18.450 --> 00:03:27.340
So when we saw it's the default font size is going to be 50 pixels so it is going to be font size 50

00:03:27.480 --> 00:03:30.880
pixels.

00:03:34.810 --> 00:03:35.730
OK.

00:03:36.240 --> 00:03:48.570
Also we are going to make the background color white with some transparency so we use the background

00:03:48.630 --> 00:03:55.890
color property and set that to R-Ga..

00:03:56.490 --> 00:03:58.490
So were using white.

00:03:59.240 --> 00:04:02.310
So all the various bodies are going to be 2.5

00:04:05.190 --> 00:04:09.110
and then this go for transparency of 0.2.

00:04:10.330 --> 00:04:10.830
OK.

00:04:11.350 --> 00:04:12.640
Good.

00:04:13.260 --> 00:04:15.110
Known as somebody.

00:04:15.810 --> 00:04:22.220
So again two sets the padding using a percentage which is relative to the containing elements.

00:04:22.250 --> 00:04:23.850
All right.

00:04:25.380 --> 00:04:30.800
We can increase that to 10 percent or 5 percent.

00:04:30.990 --> 00:04:31.550
Okay.

00:04:31.700 --> 00:04:37.050
And just to avoid having padding on the left hand side and right on side we can just use two values

00:04:37.070 --> 00:04:37.540
.

00:04:37.710 --> 00:04:43.530
The first value is for the top and bottom sides and we have zero padding for the left side and the right

00:04:43.530 --> 00:04:44.010
side.

00:04:44.210 --> 00:04:45.290
OK.

00:04:45.730 --> 00:04:46.740
So to save this

00:04:51.390 --> 00:04:52.760
.

00:04:53.710 --> 00:04:55.710
Now let's move to the slightest.

00:04:55.960 --> 00:04:58.290
So we going to have three slides.

00:04:58.590 --> 00:05:02.840
So for the first two slides we're going to use a great layout.

00:05:02.890 --> 00:05:09.040
So we're going to be using grid A to cut our screen to two halves and then right after that we're going

00:05:09.040 --> 00:05:11.610
to create our third slide.

00:05:12.000 --> 00:05:13.930
OK.

00:05:14.020 --> 00:05:25.260
So to create a slider like this we can do go to the decoder immobile Deimos page and then go to Slide

00:05:25.670 --> 00:05:27.390
the Inform widgets

00:05:30.290 --> 00:05:34.940
and let's look for the one we'd like to have.

00:05:36.340 --> 00:05:40.190
So we're looking for a fall with Slider just like this.

00:05:40.490 --> 00:05:47.270
OK so you get the code you can do is click on View Source and get the code from that right.

00:05:47.530 --> 00:05:55.310
So let's go back to our app and this goes to the next those of file.

00:05:55.330 --> 00:06:01.360
So first of all we're going to create a grid layouts.

00:06:01.570 --> 00:06:04.150
That's right after the title.

00:06:04.630 --> 00:06:08.900
OK.

00:06:10.990 --> 00:06:12.550
So it's a comment

00:06:16.570 --> 00:06:24.130
saying font size and speed of it.

00:06:25.490 --> 00:06:27.550
So you get to be using a grid a

00:06:32.550 --> 00:06:36.760
two hour device is going to be of class you are a great way.

00:06:37.630 --> 00:06:40.760
And then inside they we going to have two divs

00:06:45.760 --> 00:06:48.430
one day of class UI.

00:06:48.550 --> 00:06:49.380
BLOCK A

00:06:55.940 --> 00:06:56.970
day of class

00:07:00.840 --> 00:07:02.620
.

00:07:02.770 --> 00:07:06.320
BLOCK B OK.

00:07:07.030 --> 00:07:14.790
So let's get the code for our slider.

00:07:22.250 --> 00:07:25.420
And this copy that began in the second day.

00:07:25.800 --> 00:07:26.410
OK.

00:07:26.710 --> 00:07:34.660
So it's save and refresh.

00:07:35.890 --> 00:07:36.400
OK.

00:07:36.520 --> 00:07:39.540
So now we can see our two sliders then.

00:07:39.580 --> 00:07:40.550
OK.

00:07:40.730 --> 00:07:46.770
Now we want to write these two boxes.

00:07:46.840 --> 00:07:47.260
OK.

00:07:47.260 --> 00:07:48.500
Show me the number.

00:07:49.030 --> 00:07:54.550
So if you look at these sets elements we can see how we can do that.

00:07:55.090 --> 00:07:59.180
So he's going to use the first bit

00:08:03.400 --> 00:08:07.930
copy to the index for a single file in dissociatives file

00:08:11.560 --> 00:08:21.820
and we're going to add something there to override the equerry stunning and it's going to be exclamation

00:08:21.820 --> 00:08:23.700
mark important.

00:08:24.510 --> 00:08:25.320
OK.

00:08:26.080 --> 00:08:30.440
Now let's save and refresh the page

00:08:35.240 --> 00:08:37.650
and our boxes are still there.

00:08:37.690 --> 00:08:40.830
So just one thing if you copy anything from there.

00:08:40.900 --> 00:08:46.730
Just make sure you go back to the code and you take out any space at the beginning of the sideling code

00:08:46.740 --> 00:08:46.840
.

00:08:46.930 --> 00:08:48.140
OK.

00:08:48.650 --> 00:08:52.200
And then it's supposed to work OK.

00:08:52.640 --> 00:08:56.920
Now it'll save and go back to our index of a shaman file.

00:08:57.320 --> 00:09:06.160
So if you look at the slider you've got a label just before the input and is called A-class you I an

00:09:06.160 --> 00:09:07.340
accessible.

00:09:07.390 --> 00:09:11.440
So if we take out that clause OK

00:09:15.080 --> 00:09:22.330
then if we save and refresh we supposed to see our label there.

00:09:22.420 --> 00:09:23.160
OK.

00:09:23.170 --> 00:09:26.870
So let's do the same thing for the other inputs.

00:09:26.920 --> 00:09:28.850
OK.

00:09:34.880 --> 00:09:43.000
Refresh you'll get no less copy text from a file up.

00:09:44.420 --> 00:09:47.210
And let's face it the labels

00:09:50.190 --> 00:09:52.490
all right

00:09:55.140 --> 00:10:07.220
now let's save if we reduce the width of our screen we'll see that at some points the two text elements

00:10:08.270 --> 00:10:12.940
we are referring to to the two labels they end up with different heights.

00:10:13.240 --> 00:10:13.890
OK.

00:10:14.250 --> 00:10:15.740
So you just avoid this.

00:10:15.810 --> 00:10:22.670
Are we going to do we are going to create a grid layouts for the text elements and a grid layouts for

00:10:22.830 --> 00:10:24.790
the slightest.

00:10:25.090 --> 00:10:25.790
OK.

00:10:26.420 --> 00:10:27.720
So that's the text elements.

00:10:27.740 --> 00:10:30.290
They keep the same height in all of them.

00:10:30.620 --> 00:10:31.800
OK.

00:10:32.300 --> 00:10:38.650
So let's take out the labels.

00:10:42.020 --> 00:10:49.370
OK let's create another grid a layout

00:10:52.180 --> 00:10:55.020
.

00:10:55.860 --> 00:10:58.650
This time we're going to place

00:11:01.700 --> 00:11:03.400
some text inside this.

00:11:03.580 --> 00:11:05.020
OK.

00:11:05.500 --> 00:11:16.660
Or let's have a div inside then have some text inside.

00:11:22.080 --> 00:11:29.430
OK so the first Dave is going to have this text

00:11:32.400 --> 00:11:38.210
so it will need the font size value to change.

00:11:38.280 --> 00:11:43.930
So going to places inside a span.

00:11:48.750 --> 00:11:58.820
Give outspan an ID font size so that we can use this ID in the J query code later to change this value

00:11:58.840 --> 00:11:59.520
.

00:12:00.360 --> 00:12:03.330
And we're going to do the same thing for the other six elements

00:12:05.920 --> 00:12:15.220
that are going to place the number inside a span.

00:12:18.250 --> 00:12:26.230
And this gives a an ID speed OK.

00:12:26.290 --> 00:12:32.070
Nowness refresh and now we can see our grid layouts.

00:12:32.090 --> 00:12:37.680
And if we reduce the with I always keep the same height.

00:12:38.300 --> 00:12:40.730
OK.

00:12:40.760 --> 00:12:45.240
Now let's move our sliders and make a couple of changes.

00:12:45.410 --> 00:12:53.640
Let's change the name and ID of each slide so the first one we're going to call its font size slide

00:12:53.660 --> 00:12:55.260
.

00:12:56.210 --> 00:12:58.070
OK.

00:12:58.640 --> 00:13:02.000
And these have the same value for the ID.

00:13:02.120 --> 00:13:06.250
So the minimum value is going to start at 20 pixels.

00:13:06.500 --> 00:13:10.320
The maximum is 100 pixels OK.

00:13:11.270 --> 00:13:14.540
The default file is going to be 50.

00:13:14.690 --> 00:13:19.210
I'm going to add one more attribute that it's the step.

00:13:19.620 --> 00:13:20.630
OK.

00:13:20.630 --> 00:13:25.450
And we want a step of five pixels.

00:13:25.590 --> 00:13:25.900
All right.

00:13:25.940 --> 00:13:31.690
Which means that we can increase by five or go back by five.

00:13:31.860 --> 00:13:32.700
OK.

00:13:33.090 --> 00:13:38.100
So the next one let's changed its name as well to

00:13:40.980 --> 00:13:46.380
speed slider is ID.

00:13:47.360 --> 00:13:52.950
So the default value is 300 words per minute.

00:13:53.180 --> 00:13:53.800
OK.

00:13:54.090 --> 00:14:02.380
So let's set the minimum value 250 words per minute and the maximum value to 600 words per minute.

00:14:03.740 --> 00:14:04.230
OK.

00:14:04.260 --> 00:14:08.630
And for the step we're going to use a set of 50.

00:14:09.780 --> 00:14:12.010
OK.

00:14:13.790 --> 00:14:20.260
Now to change the styling of these slides so that we have this blue color before the Hundal we can just

00:14:20.430 --> 00:14:25.470
add a data as abuse which is data highlights

00:14:31.030 --> 00:14:32.350
you're going to say that too true

00:14:35.150 --> 00:14:46.120
and it's through the same thing for the other known as save and refresh.

00:14:46.850 --> 00:14:51.620
So we can see our new signing that.

00:14:51.780 --> 00:14:52.930
OK.

00:14:53.090 --> 00:14:59.420
So we don't know yet the min and max values and the functionality of these slides is not working yet

00:14:59.640 --> 00:15:10.570
we can at least in the secret code but we can unhide the boxes if you want and see the min and max values

00:15:10.590 --> 00:15:10.630
.

00:15:10.660 --> 00:15:15.800
So that's 20 hundred and and it's fifty six Henman's.

00:15:16.000 --> 00:15:20.660
OK.

00:15:23.960 --> 00:15:26.250
Now let's move to the progress slider.

00:15:26.460 --> 00:15:27.180
OK.

00:15:27.380 --> 00:15:35.830
And let's copy the code space away from the Deimos page.

00:15:36.380 --> 00:15:38.360
OK.

00:15:40.180 --> 00:15:43.040
I'm going places right after the grid

00:15:48.630 --> 00:15:49.910
and it's going to be progress

00:15:54.320 --> 00:15:59.030
.

00:15:59.290 --> 00:16:08.020
OK so we're going to take out the class for the label so that we can see the label.

00:16:08.210 --> 00:16:08.850
All right.

00:16:09.000 --> 00:16:15.220
And they change the inputs name and ID.

00:16:15.670 --> 00:16:23.700
OK so we're going to call it progress later.

00:16:27.230 --> 00:16:36.920
So we're going to have a minimum of zero maximum of 100 for now based on are going to change the mux

00:16:36.910 --> 00:16:46.460
using the J.A.G. code because this progress slider is going to follow a certain variable which is the

00:16:46.450 --> 00:16:51.000
number of words in the text input.

00:16:51.390 --> 00:16:53.740
And we're going to see that data in the record.

00:16:54.320 --> 00:16:57.900
So the default value is going to be zero.

00:16:57.900 --> 00:17:05.380
So if we're not going to leave the mux at 100 this all we're going to tweet is using Jaker so the label

00:17:05.440 --> 00:17:11.990
is linked to the ID are going to change the label

00:17:15.010 --> 00:17:16.130
using this text

00:17:26.360 --> 00:17:29.770
and it's not going on there.

00:17:30.650 --> 00:17:36.420
We're going to place this value inside a span because we're going to change it using j qwerty

00:17:43.690 --> 00:17:45.780
to zero at the beginning.

00:17:46.170 --> 00:17:56.930
It was like let's give us an ID you can using the code later it's called it's present so read save and

00:17:57.380 --> 00:17:57.920
refresh

00:18:00.880 --> 00:18:06.050
and then we can see all oscillators this the data highlights

00:18:08.340 --> 00:18:12.150
butes the silos.

00:18:15.580 --> 00:18:19.090
That is refresh.

00:18:19.660 --> 00:18:21.000
Perfect.

00:18:21.380 --> 00:18:29.270
Now to make our sliders take the full width of their containers we can just go back to the Deimos page

00:18:30.260 --> 00:18:40.730
and go to the CSX code of hours later and copy the second bits.

00:18:40.930 --> 00:18:43.600
OK.

00:18:46.420 --> 00:18:53.120
Now if you just delete this space OK and then indents.

00:18:53.320 --> 00:18:55.590
Now I can see us all hours later.

00:18:55.610 --> 00:19:00.020
Now we are full with inside their containers.

00:19:00.530 --> 00:19:01.570
OK.

00:19:02.940 --> 00:19:07.540
OK so in the next video we're going to understand the logic of our app