WEBVTT

00:00:07.390 --> 00:00:14.640
In this video we're going to learn how to change a shemale styling using Jake very verse.

00:00:14.800 --> 00:00:18.180
We can use the same source code as in the previous file.

00:00:18.180 --> 00:00:24.630
The only thing we can get rid of the buttons at the top of the Bookman's and also will at least the

00:00:24.630 --> 00:00:29.170
magic where the code will only keep the documents ready function.

00:00:29.310 --> 00:00:36.000
So first we want to create a button just before Facebook and we want to be able to click on the button

00:00:36.120 --> 00:00:38.180
and change the width of Facebook.

00:00:38.670 --> 00:00:39.310
All right.

00:00:39.480 --> 00:00:41.470
So let's grease the button first

00:00:43.240 --> 00:00:45.260
.

00:00:46.200 --> 00:00:48.490
Let's add some text there change.

00:00:48.550 --> 00:00:54.270
Facebook also this give us an I.D. change Facebook.

00:00:54.370 --> 00:00:55.860
All right.

00:00:55.910 --> 00:01:02.490
No we're going to go inside our documents ready function and we're going to write a statements where

00:01:02.490 --> 00:01:10.650
we access the button to we access the person using the ID of the person so Lebas sign followed by the

00:01:10.650 --> 00:01:22.190
ID ID is changed Facebook and then the events is going to be click OK.

00:01:22.530 --> 00:01:23.580
And then inside

00:01:26.700 --> 00:01:33.480
the click when it's a function those are going to be executing.

00:01:33.480 --> 00:01:36.270
When we click on the button.

00:01:36.270 --> 00:01:37.570
All right.

00:01:38.360 --> 00:01:38.870
OK.

00:01:39.180 --> 00:01:51.440
So the statements here is going to be accessing Facebook so you can use the idea of Facebook again.

00:01:53.670 --> 00:02:00.460
And we will use the method see SS as we have done with the background color.

00:02:01.640 --> 00:02:03.020
OK.

00:02:04.200 --> 00:02:06.240
So we're going to have two promises here.

00:02:06.600 --> 00:02:09.740
So the first one is going to be the property would like to change.

00:02:10.370 --> 00:02:11.300
OK.

00:02:11.460 --> 00:02:14.610
So it's going to be with the second one

00:02:17.310 --> 00:02:22.430
is going to be the value that's we want to set the width to.

00:02:22.440 --> 00:02:27.870
So let's try for example 300 pixels.

00:02:29.880 --> 00:02:34.620
So if you click on the button we can see you got the width of Facebook as it's changed to 300 pixels

00:02:34.630 --> 00:02:35.070
.

00:02:35.580 --> 00:02:36.170
OK.

00:02:36.450 --> 00:02:38.670
We don't have to use a string.

00:02:38.790 --> 00:02:48.100
If we use a value there for example if we just put 300 and we click on the button it will it work OK

00:02:48.210 --> 00:02:49.190
.

00:02:49.410 --> 00:02:50.610
All right.

00:02:50.610 --> 00:03:01.050
Also if we use a mathematical operation like we can have some 200 plus 100

00:03:03.720 --> 00:03:04.800
it's working as well.

00:03:05.120 --> 00:03:05.760
OK.

00:03:06.000 --> 00:03:19.530
So let's have a number there that will give us the original width of Facebook plus a number between

00:03:19.590 --> 00:03:22.210
minus 50 and plus 50.

00:03:22.530 --> 00:03:24.890
OK so all we want is Facebook.

00:03:25.400 --> 00:03:26.040
OK.

00:03:26.130 --> 00:03:31.410
When we click on the button we're just going to add to the width of Facebook something between minus

00:03:31.410 --> 00:03:34.500
50 and plus 50.

00:03:34.500 --> 00:03:35.500
All right.

00:03:35.640 --> 00:03:39.170
So first of all let's just change the original with of Facebook.

00:03:39.180 --> 00:03:45.530
So rather than having with O2 Let's send it to 300 pixels.

00:03:46.240 --> 00:03:48.150
OK then

00:03:52.590 --> 00:03:58.970
we need a number between minus 50 and 50.

00:03:58.970 --> 00:04:00.470
So how are we going to do that.

00:04:00.480 --> 00:04:10.230
First of all let's use the math method random So we know that this method is going to return a number

00:04:10.320 --> 00:04:12.010
between 0 and 1.

00:04:12.470 --> 00:04:13.180
OK.

00:04:13.470 --> 00:04:24.240
So if we want a number between minus 50 and we've see first of all let's get a number between 0 and

00:04:24.240 --> 00:04:25.260
100.

00:04:25.830 --> 00:04:30.690
So we can do that by multiplying this by 100.

00:04:31.080 --> 00:04:36.720
So something between 0 and 1 multiplied by a hundred would give us something between 0 and hundreds

00:04:36.740 --> 00:04:36.920
.

00:04:37.080 --> 00:04:37.630
OK.

00:04:37.950 --> 00:04:48.220
And then we can take out 50 and now we're getting something in between minus 50 50 and then we get out

00:04:48.280 --> 00:04:48.360
.

00:04:48.360 --> 00:04:51.150
That's the original width of Facebook.

00:04:51.150 --> 00:04:52.580
So how do we access that.

00:04:52.920 --> 00:05:05.890
So first we need the selector using the ID of Facebook and then we get to use with OK.

00:05:06.690 --> 00:05:07.470
So let's try this

00:05:11.030 --> 00:05:14.480
so that's the original with is going to be 300 pixels.

00:05:14.510 --> 00:05:25.310
If we click on the button it will randomly add to the the currents currents with it with something between

00:05:25.460 --> 00:05:27.800
minus 50 and 50.

00:05:28.560 --> 00:05:30.800
OK.

00:05:31.150 --> 00:05:32.670
All right.

00:05:33.110 --> 00:05:37.300
Now let's add another statements.

00:05:37.550 --> 00:05:43.190
So when we click on the Musson we want to set the width to a new value and also we want to add a new

00:05:43.200 --> 00:05:45.800
class to Facebook.

00:05:45.860 --> 00:05:53.660
So the way to do that is by accessing Facebook using its ID first and then we're going to use a method

00:05:53.660 --> 00:05:53.980
here.

00:05:53.990 --> 00:05:56.090
It's going to be class.

00:05:56.630 --> 00:05:57.590
All right.

00:05:58.250 --> 00:06:03.160
So this method will take as a barometer the name of the class that we would like on Facebook unless

00:06:03.170 --> 00:06:05.510
Troy Green books.

00:06:05.690 --> 00:06:06.820
OK.

00:06:07.940 --> 00:06:10.240
So let's see what happens.

00:06:10.370 --> 00:06:16.960
Now we can see about the Facebook properties has just changed to the Microsoft's properties.

00:06:17.120 --> 00:06:20.810
The only thing that's did not change is the with.

00:06:21.110 --> 00:06:27.290
So the reason why is because we are sitting there with using the equerry code and if we do that's using

00:06:27.290 --> 00:06:37.160
code if we get or we changed a class of Facebook which means that we are changing the styling using

00:06:37.270 --> 00:06:44.300
SS The the the property as we said using code is both going to get changed.

00:06:44.300 --> 00:06:44.550
OK.

00:06:44.570 --> 00:06:47.330
So everything else will change background color.

00:06:47.330 --> 00:06:55.020
For example Kite's etc. but this value that we said using code is not going to change.

00:06:55.070 --> 00:06:55.860
All right.

00:06:56.270 --> 00:07:00.970
OK so now we can try something else.

00:07:01.310 --> 00:07:10.000
Let's try to get more understanding about accessing the properties of the human elements.

00:07:10.110 --> 00:07:19.580
Let's access the height of Facebook the height of Facebook is the heights of Facebook including the

00:07:19.730 --> 00:07:20.350
padding.

00:07:20.530 --> 00:07:21.050
OK.

00:07:21.500 --> 00:07:24.370
So let's just write alerts.

00:07:24.410 --> 00:07:28.560
Message OK.

00:07:28.990 --> 00:07:30.190
Alerts.

00:07:30.930 --> 00:07:35.900
So virus we are going to access Facebook.

00:07:35.900 --> 00:07:37.430
They just copy this.

00:07:37.550 --> 00:07:41.150
We keep using this all the time so

00:07:47.150 --> 00:07:54.050
we can access Facebook and we need to use the inner heights of Facebook.

00:07:54.650 --> 00:07:57.730
OK.

00:07:57.800 --> 00:07:59.280
Just click on the button.

00:07:59.660 --> 00:08:03.430
And now we can see about the height of Facebook is 100 OK.

00:08:03.660 --> 00:08:11.230
Similar simulated the height of Facebook and the styling because we don't have any padding or it's OK

00:08:11.440 --> 00:08:12.060
.

00:08:12.470 --> 00:08:14.000
Now we can try.

00:08:14.030 --> 00:08:17.450
Also the outer Heights which is a little bit different.

00:08:17.720 --> 00:08:25.490
So the outer Heights is the height plus well including the padding and the border gate so we can try

00:08:25.490 --> 00:08:26.930
this as well.

00:08:26.990 --> 00:08:28.430
It's similar

00:08:31.340 --> 00:08:32.690
to height.

00:08:33.470 --> 00:08:34.930
You can comment.

00:08:34.940 --> 00:08:46.160
The first one you click OK the outer Heights is also a hundred because we don't have any border with

00:08:46.200 --> 00:08:46.490
.

00:08:46.850 --> 00:08:47.120
OK

00:08:48.360 --> 00:08:52.880
.

00:08:55.520 --> 00:08:56.610
OK.

00:08:56.900 --> 00:09:00.270
Now let's move to the Apple Dave.

00:09:00.440 --> 00:09:02.410
Let's create a second button.

00:09:02.510 --> 00:09:08.930
Following the Facebook wasn't going to give this person a new ID.

00:09:08.990 --> 00:09:10.010
It's going to be changed.

00:09:10.010 --> 00:09:16.670
Apple and some text change Apple works.

00:09:17.030 --> 00:09:22.490
So now we would like to try something else.

00:09:22.880 --> 00:09:27.880
We'll see how to remove a class.

00:09:27.890 --> 00:09:29.990
OK so we have seen how to add a class.

00:09:29.990 --> 00:09:32.890
Now we will see how you move the class.

00:09:32.900 --> 00:09:36.050
It's pretty similar.

00:09:36.380 --> 00:09:37.370
OK.

00:09:37.370 --> 00:09:42.690
So let's just copy this code that we use for Facebook.

00:09:42.710 --> 00:09:53.150
So this time you're going to be accessing the change Upal button and following that we are accessing

00:09:53.150 --> 00:09:55.150
the app all day.

00:09:57.110 --> 00:10:00.390
OK.

00:10:02.420 --> 00:10:04.610
And just make sure this is correct.

00:10:04.610 --> 00:10:05.250
Yes.

00:10:05.600 --> 00:10:05.830
OK.

00:10:05.840 --> 00:10:14.210
So now when we click on the Apple Dave we would like to remove a class we could try the yellow box KLAUSE

00:10:14.220 --> 00:10:14.350
.

00:10:14.480 --> 00:10:16.270
OK so let's try that.

00:10:16.280 --> 00:10:19.760
So the function is going to be removed plus as you would have guessed.

00:10:20.500 --> 00:10:22.300
OK remove class.

00:10:22.370 --> 00:10:25.130
We just need the name of the class between quotes.

00:10:25.190 --> 00:10:30.200
So in our case this dry yellow box and see what happens.

00:10:30.790 --> 00:10:34.520
So change up or we just remove the class yellow box.

00:10:34.520 --> 00:10:35.000
OK.

00:10:35.310 --> 00:10:40.120
We can try something else we can add another cluster to Apple does change it.

00:10:40.340 --> 00:10:41.280
OK.

00:10:41.750 --> 00:10:45.310
So at the moment Apple has gauds yellow box class.

00:10:45.500 --> 00:10:48.050
We can add another class let's call it.

00:10:48.410 --> 00:10:54.210
So sorry for example this style this class.

00:10:55.760 --> 00:11:01.250
So basically we want the fonts family to be safe.

00:11:02.110 --> 00:11:04.110
OK.

00:11:05.000 --> 00:11:07.500
We are removing the sons of class

00:11:10.330 --> 00:11:16.120
which we now you can see that's remove the sensory styling.

00:11:16.420 --> 00:11:17.120
OK.

00:11:17.450 --> 00:11:19.120
Now we are going to try something else.

00:11:19.120 --> 00:11:22.520
So rather than clicking on the button click on up.

00:11:22.580 --> 00:11:30.080
We can do that easily just by accessing the apple div rather than the the button.

00:11:30.080 --> 00:11:32.410
The event is still clicking.

00:11:32.720 --> 00:11:33.470
OK.

00:11:33.700 --> 00:11:34.220
So try that.

00:11:34.220 --> 00:11:38.690
So when we click on the Apple live we can see does the sounds very close is removed

00:11:38.720 --> 00:11:44.850
.