WEBVTT 00:00:07.350 --> 00:00:13.380 In this video we're going to learn how to use the bootstrap button plugin to add instruction to basons 00:00:13.380 --> 00:00:14.250 . 00:00:14.310 --> 00:00:21.680 So we're going to be creating Busson States so we'll create a couple of examples. 00:00:21.780 --> 00:00:29.340 One button that we can click and see at a loading States and then the button is reset to its original 00:00:29.790 --> 00:00:31.260 states. 00:00:31.320 --> 00:00:39.390 A second examples where we have a person that we can click and see a loading States and then afterwards 00:00:39.420 --> 00:00:41.530 we can see a complete States. 00:00:42.100 --> 00:00:42.800 OK. 00:00:42.990 --> 00:00:45.000 So this creates the first person 00:00:51.110 --> 00:00:56.370 OK and it's odd a type of person 00:01:02.350 --> 00:01:10.090 that is the person using the Person class the present primary class. 00:01:10.140 --> 00:01:14.140 This gives an idea as well of person one. 00:01:15.690 --> 00:01:16.300 OK. 00:01:16.740 --> 00:01:20.910 So we're going to add a data attributes. 00:01:20.910 --> 00:01:25.200 It's going to be data loading text 00:01:25.200 --> 00:01:31.460 . 00:01:31.980 --> 00:01:40.030 So this is what we will see when the button States goes to loading States. 00:01:40.140 --> 00:01:45.720 So let's read some text. 00:01:46.580 --> 00:01:47.580 OK. 00:01:47.790 --> 00:01:57.010 No we know writes some query code so that we can build the click functionality. 00:01:58.370 --> 00:02:03.390 OK. 00:02:08.730 --> 00:02:09.570 All right. 00:02:09.930 --> 00:02:15.510 So first let's access the button using its ID 00:02:20.390 --> 00:02:27.210 but one then this use the click method 00:02:30.850 --> 00:02:34.320 that place a function inside the click 00:02:41.220 --> 00:02:43.700 OK. 00:02:44.550 --> 00:02:46.940 So once we click on the button. 00:02:47.100 --> 00:02:54.990 So are you going to change the status of the person to loading states so to do that we get to access 00:02:54.990 --> 00:03:05.570 the wasn't using the this keyword and then we've used the button method that would give it a parameter 00:03:06.410 --> 00:03:08.650 . 00:03:10.410 --> 00:03:12.580 It's going to be loading. 00:03:13.430 --> 00:03:13.930 OK. 00:03:14.130 --> 00:03:20.070 So let's try this and make sure it's working so if we refresh the page and then click on the button 00:03:20.820 --> 00:03:26.710 so we can see that's the new face of the bus and easy loading States. 00:03:27.110 --> 00:03:35.850 OK so now we want to we want to go back to its original state after a certain delay. 00:03:36.120 --> 00:03:37.060 OK. 00:03:37.470 --> 00:03:45.020 So let's add a delay of one second for example. 00:03:45.540 --> 00:03:47.340 So we to need to access the button again 00:03:50.380 --> 00:04:00.430 and then use the delay method which will take us a as a barometer the duration in milliseconds. 00:04:00.480 --> 00:04:03.510 So it's good for 1000 milliseconds. 00:04:03.840 --> 00:04:04.700 OK. 00:04:05.130 --> 00:04:13.940 And then after this we need to change the state of the bus into its original state. 00:04:14.650 --> 00:04:19.890 And for that we like seeing the bus and again. 00:04:22.020 --> 00:04:29.140 And then we'll use the Boston method again and by this time the problem is it's going to be resets. 00:04:29.930 --> 00:04:31.940 OK. 00:04:32.070 --> 00:04:37.740 So this will bring the original content back 00:04:40.370 --> 00:04:42.670 OK to the deposit. 00:04:43.840 --> 00:04:44.490 OK. 00:04:44.490 --> 00:04:54.120 So it's got to go back to its primary states but we can't we cannot use this statesman's straight away 00:04:54.140 --> 00:04:57.890 after the delay method. 00:04:57.960 --> 00:05:06.160 We need to place this inside the queue method to offset the delay met the delay method. 00:05:06.210 --> 00:05:08.270 We need to use the queue method. 00:05:08.370 --> 00:05:10.110 So we're going to do we get a copy that's. 00:05:10.740 --> 00:05:16.530 And then we'll use the queue 00:05:19.290 --> 00:05:20.560 method. 00:05:21.430 --> 00:05:21.890 OK. 00:05:21.900 --> 00:05:32.870 Which will take us a parameter a function inside that function we'll write those statements. 00:05:34.140 --> 00:05:35.300 OK. 00:05:36.010 --> 00:05:37.860 So destroy this mixture. 00:05:37.890 --> 00:05:39.260 It works. 00:05:39.260 --> 00:05:43.740 So if you click on the button we can see the loading States. 00:05:43.790 --> 00:05:52.180 Then after a second we can see that the person goes back to its primary states. 00:05:52.590 --> 00:05:57.960 There is an easier way to write the code so we don't have to use that to access the person every time 00:05:57.960 --> 00:05:58.260 . 00:05:58.260 --> 00:06:02.580 So we can just use the first method button and then 00:06:05.460 --> 00:06:13.580 use the second method straightaway without the record columns. 00:06:13.590 --> 00:06:15.180 OK. 00:06:16.130 --> 00:06:17.910 With all the callers and 00:06:21.910 --> 00:06:26.080 say you. 00:06:27.660 --> 00:06:32.920 OK so we are accessing the button only once and we're using all these methods. 00:06:32.940 --> 00:06:39.390 Also we can just avoid all this space or displace them next to each other like that's 00:06:45.000 --> 00:06:46.210 OK. 00:06:46.760 --> 00:06:47.860 You can see work 00:06:49.750 --> 00:06:51.700 . 00:06:51.720 --> 00:06:52.800 It. 00:06:53.730 --> 00:06:55.160 OK. 00:06:55.290 --> 00:06:58.070 Now let's create a second. 00:06:58.500 --> 00:06:59.240 OK. 00:06:59.310 --> 00:07:05.330 So the second one is going to be different so you want a loading space and a complete set. 00:07:05.340 --> 00:07:08.310 So this copy paste 00:07:12.230 --> 00:07:20.660 code from the first person to make it easy is going to be presented to the person to. 00:07:20.670 --> 00:07:25.400 OK we're going to have a data loading text because you're going to have a loading state. 00:07:25.800 --> 00:07:26.220 OK. 00:07:26.220 --> 00:07:35.870 And also we can add another data as if it's going to be data or complete text. 00:07:35.880 --> 00:07:39.860 That is what is going to be used for the complete States. 00:07:39.900 --> 00:07:45.180 Let's write some text for example dilute Dollard completes. 00:07:46.980 --> 00:07:49.800 OK so now 00:07:56.550 --> 00:08:00.330 let's copy this same code for the second button 00:08:03.910 --> 00:08:07.520 to be accessing wasn't too. 00:08:08.010 --> 00:08:08.370 OK 00:08:11.370 --> 00:08:16.990 so you have a loading States and then we're going to have a delay of 1000 seconds. 00:08:17.610 --> 00:08:21.090 But rather than resetting the button to its primary states 00:08:24.830 --> 00:08:29.380 we'll use the complete sets. 00:08:29.760 --> 00:08:34.740 Destroy those click on the button see alerting States and then a complete set