WEBVTT

00:00:07.230 --> 00:00:12.550
Now if we click on the Start button we're going to do a couple of things.

00:00:12.990 --> 00:00:13.590
OK.

00:00:13.590 --> 00:00:22.050
So it's access the soapboxing using its ID which is stop button and let's use the clicker method as

00:00:22.050 --> 00:00:23.180
we've done before.

00:00:23.790 --> 00:00:30.240
So inside this method we're going to have a function.

00:00:30.780 --> 00:00:36.900
So we're going to do a couple of things.

00:00:37.560 --> 00:00:44.760
So first of all we are going to show the resume and reset buttons.

00:00:47.220 --> 00:00:56.160
So to do this we're going to use again the hide show buttons function and are going to place two promises

00:00:56.160 --> 00:00:58.790
there.

00:00:59.780 --> 00:01:04.260
So the first one is the ID of the Resume button.

00:01:04.890 --> 00:01:10.600
And the second one is the ID of the reset button.

00:01:12.570 --> 00:01:13.290
OK.

00:01:13.590 --> 00:01:15.340
To stop the counter.

00:01:15.880 --> 00:01:26.450
We're going to need to use the function clean interval and pass the action variable to it's so clear

00:01:26.670 --> 00:01:35.290
interval applied to the variable action where we saw the outputs of the set interval function.

00:01:35.810 --> 00:01:36.610
OK.

00:01:37.070 --> 00:01:37.460
All right.

00:01:37.470 --> 00:01:41.740
Now let's move to clicking on the resume button.

00:01:42.750 --> 00:01:46.430
So you use the same syntax.

00:01:47.330 --> 00:01:49.240
Yes.

00:01:51.250 --> 00:01:53.250
So we are clicking on the Resume button

00:01:56.610 --> 00:02:02.130
and we are doing a couple of things there.

00:02:04.470 --> 00:02:12.480
So first of all we are going to show the top and lock buttons.

00:02:13.140 --> 00:02:16.230
We're going to use the hide show buttons function

00:02:20.370 --> 00:02:24.320
using we are showing stop and lup

00:02:27.030 --> 00:02:28.590
and we're going to start at the counter.

00:02:28.660 --> 00:02:31.010
OK so some action is sourcing the content.

00:02:31.290 --> 00:02:40.390
So to start the counter we going do it like we did before by calling the function status action.

00:02:41.520 --> 00:02:42.110
OK.

00:02:42.450 --> 00:02:47.790
And then if we click on the reset button

00:02:53.590 --> 00:02:58.690
we are going to reload the page so to reload the page.

00:02:58.760 --> 00:03:03.600
The syntax is location bought reload.

00:03:04.330 --> 00:03:04.620
OK.

00:03:04.740 --> 00:03:08.580
And we have covered this function before.

00:03:10.230 --> 00:03:11.760
OK.

00:03:12.900 --> 00:03:19.050
And finally if we click on the Lopp button so

00:03:29.160 --> 00:03:31.210
we're going to do a few things.

00:03:31.560 --> 00:03:36.660
So we are going to check if we are in mode on.

00:03:36.990 --> 00:03:42.470
And if yes we're going to execute these three actions OK.

00:03:42.600 --> 00:03:46.180
If not which means that we have just loaded the page.

00:03:46.410 --> 00:03:47.600
We're not going to do anything.

00:03:47.850 --> 00:03:49.050
OK.

00:03:49.170 --> 00:03:52.630
If you click on love on the page has just loaded.

00:03:52.660 --> 00:03:54.470
We're not going to do anything.

00:03:54.990 --> 00:03:55.290
So

00:03:58.630 --> 00:04:04.290
we're going to check if mode is member of this mode is a billion.

00:04:04.370 --> 00:04:04.760
OK.

00:04:04.800 --> 00:04:08.290
We don't use false or true but using 0 0 0 1 is the same.

00:04:08.520 --> 00:04:14.850
So if mode we aren't going to do all this.

00:04:15.750 --> 00:04:24.030
So we're going to stop the auction and as we've done before we are going to use the function clear interval

00:04:24.060 --> 00:04:27.240
applied to the action variable.

00:04:27.960 --> 00:04:30.060
And then

00:04:32.820 --> 00:04:41.880
we're going to reset the loop so to reset the loop we get to go to the loop counter and set it to zero

00:04:41.890 --> 00:04:42.550
.

00:04:43.100 --> 00:04:45.420
OK because the loop is going to start from zero.

00:04:45.420 --> 00:04:52.530
So once we click on lup if you look up this is this going to start from zero and this means that the

00:04:52.530 --> 00:04:55.490
counter of the lock has started from zero.

00:04:55.950 --> 00:04:56.490
OK.

00:04:56.790 --> 00:05:01.870
So the love counter becomes zero.

00:05:02.820 --> 00:05:03.540
OK.

00:05:03.540 --> 00:05:05.960
And then we can preens the details.

00:05:05.970 --> 00:05:09.750
So when I use a function for this I'm going to call it odd flop.

00:05:10.190 --> 00:05:17.720
Well we're going to define it in bits and then we're going to start the action again.

00:05:18.500 --> 00:05:22.320
And to do that we're going to start again.

00:05:22.870 --> 00:05:28.590
OK so now let's define this function odd Lopp

00:05:45.180 --> 00:05:53.570
So this function is going to pre-NST the love details inside the lovebox.

00:05:54.750 --> 00:06:01.760
So it is defined as a function and lup.

00:06:04.750 --> 00:06:07.140
So to start let's do something really simple.

00:06:07.140 --> 00:06:19.980
So let's create a Dave and call it my lab details guy is going to be a simple Dave

00:06:30.700 --> 00:06:33.540
OK and let's write something inside.

00:06:33.550 --> 00:06:38.020
Dave up and let's do this Dave.

00:06:38.020 --> 00:06:51.410
To the last box and selects this Dave and append it using the append to method.

00:06:51.970 --> 00:06:57.840
So you're going to need the ID of the lubs box is how we look.

00:06:58.770 --> 00:07:02.610
ID is lapse.

00:07:05.130 --> 00:07:06.940
OK.

00:07:08.100 --> 00:07:11.970
So let's save and try this.

00:07:11.970 --> 00:07:18.700
Make sure it's working so if we click on Lopp now we can see the new div appearing there.

00:07:18.880 --> 00:07:23.070
If I click again and again and again at some points

00:07:29.730 --> 00:07:35.000
you can see that's the heights of love spokes is going to be limited.

00:07:35.050 --> 00:07:39.230
You don't need to scroll down to see all the elements in sight.

00:07:39.810 --> 00:07:41.070
OK.

00:07:41.550 --> 00:07:48.380
Now let's have a look at our final up and see what we need to place inside the Lovebox for each lab

00:07:48.390 --> 00:07:52.520
so we need to write lup followed by the number.

00:07:53.040 --> 00:08:01.940
OK and we need to write the details of the law or the duration of the law.

00:08:02.010 --> 00:08:05.350
So I mean it's seconds and seconds.

00:08:06.300 --> 00:08:10.190
OK.

00:08:12.270 --> 00:08:13.780
So we're going to change our def

00:08:16.560 --> 00:08:18.640
So we're going to place two divs inside.

00:08:18.690 --> 00:08:27.670
So one day for the title of the lap we're going to be lot followed by the love number and another div.

00:08:27.690 --> 00:08:27.980
.

00:08:28.350 --> 00:08:30.290
Well we're going to place a few spans.

00:08:30.680 --> 00:08:31.260
OK.

00:08:31.500 --> 00:08:34.490
And this is going to be floating in the right.

00:08:34.890 --> 00:08:39.300
It's going to go again to the scissors file and do some standing and so

00:08:48.090 --> 00:08:54.130
I'm just going to cut this two pieces for readability reasons.

00:08:55.050 --> 00:08:58.610
OK so inside this thing we're going to have to do.

00:08:58.620 --> 00:08:59.400
So the first one

00:09:11.890 --> 00:09:15.480
is going to be the title

00:09:17.780 --> 00:09:23.580
.

00:09:27.190 --> 00:09:27.630
OK.

00:09:27.630 --> 00:09:29.010
And then the second one

00:09:35.640 --> 00:09:38.610
is going to be the love details

00:09:38.640 --> 00:09:45.710
.

00:09:53.070 --> 00:10:01.700
OK so inside the I tell you I'm going to write love for the boy the laburnum.

00:10:02.020 --> 00:10:02.640
OK.

00:10:02.790 --> 00:10:04.900
So it is going to be LOPP.

00:10:05.760 --> 00:10:10.620
Plus the love number for this we're going to use the lup number variable

00:10:14.100 --> 00:10:14.410
OK

00:10:17.370 --> 00:10:23.070
and before we do that at the beginning of the function we will need to increase the number every time

00:10:23.160 --> 00:10:24.740
by one.

00:10:25.620 --> 00:10:27.020
OK.

00:10:27.210 --> 00:10:34.470
So for the first lap the love number at the beginning equals zero.

00:10:34.470 --> 00:10:42.500
So before we use that number we can increase by 1 to Prince the first lap which is Lopp plus 1.

00:10:43.030 --> 00:10:43.750
OK.

00:10:44.310 --> 00:10:46.050
So that's the title of Dial-Up.

00:10:46.050 --> 00:10:48.490
Now let's go to the details of the law.

00:10:49.410 --> 00:10:55.670
So we want to show the minutes seconds and cents seconds.

00:10:55.880 --> 00:10:56.390
OK.

00:10:56.520 --> 00:11:01.010
So inside this div we are going to have a few span's.

00:11:01.280 --> 00:11:01.770
OK.

00:11:02.070 --> 00:11:03.540
So first span

00:11:06.600 --> 00:11:13.350
inside the span we can replace the minutes and again we want you for months the minutes before we placed

00:11:13.350 --> 00:11:14.140
them here.

00:11:14.190 --> 00:11:19.430
So we're going to use the Format function as we created earlier and we're going to formalize months

00:11:19.440 --> 00:11:21.170
the last minutes.

00:11:21.610 --> 00:11:22.390
OK.

00:11:22.420 --> 00:11:23.880
And we're going to close our panel

00:11:23.890 --> 00:11:32.840
.

00:11:41.340 --> 00:11:43.810
OK.

00:11:45.190 --> 00:11:49.010
Now we need another spend 40 seconds.

00:11:49.290 --> 00:11:50.790
So let's just copy this.

00:11:50.910 --> 00:11:54.410
Let's make it simple.

00:11:54.730 --> 00:11:58.820
It is going to be lup seconds.

00:11:58.830 --> 00:12:04.860
And again lup 70 seconds.

00:12:06.570 --> 00:12:07.080
OK.

00:12:07.350 --> 00:12:13.310
And between each two we are going to place like one on.

00:12:14.430 --> 00:12:14.850
So

00:12:17.660 --> 00:12:24.280
it's going to be just before the second span just before he said expand.

00:12:25.700 --> 00:12:25.970
OK

00:12:29.100 --> 00:12:33.530
so now let's save this and try

00:12:36.680 --> 00:12:39.850
OK so we can see the details there.

00:12:39.960 --> 00:12:40.500
OK.

00:12:40.890 --> 00:12:43.060
So it is working perfectly.

00:12:43.110 --> 00:12:49.710
Now we just need to add some styling so it'll go to our CS's file or before we do that let's just give

00:12:49.710 --> 00:12:51.400
these elements a few classes.

00:12:51.600 --> 00:12:52.160
OK.

00:12:52.350 --> 00:12:58.860
So the Dave that we get we we are adding misgive it's a class

00:13:05.390 --> 00:13:06.100
lup.

00:13:06.420 --> 00:13:07.880
OK.

00:13:07.890 --> 00:13:10.740
By the way I'm using single quotes outside.

00:13:11.490 --> 00:13:14.590
OK so I'm using double quotes insight.

00:13:14.820 --> 00:13:19.080
If you use double quotes outside make sure you use single quotes inside.

00:13:19.380 --> 00:13:21.200
OK.

00:13:22.470 --> 00:13:28.810
So let's go to the first div.

00:13:28.890 --> 00:13:30.990
Give is a class

00:13:34.360 --> 00:13:37.270
love time title.

00:13:37.960 --> 00:13:38.590
OK.

00:13:38.970 --> 00:13:43.210
Let's go to the second div and give it a class.

00:13:43.850 --> 00:13:44.850
Let me

00:13:53.580 --> 00:13:55.720
save this.

00:13:57.000 --> 00:13:58.170
OK.

00:13:58.680 --> 00:14:04.780
Let's refresh our life so I can see restyling live.

00:14:07.990 --> 00:14:08.560
OK.

00:14:08.820 --> 00:14:13.830
Now this goes on he has his file.

00:14:13.950 --> 00:14:22.830
So we're going to sace with the containing div which is the

00:14:30.280 --> 00:14:31.940
day of class lup.

00:14:32.250 --> 00:14:32.990
OK

00:14:39.910 --> 00:14:44.960
OK so you can access the class lap.

00:14:46.710 --> 00:14:47.380
OK.

00:14:47.610 --> 00:14:51.340
So we get to make the height slightly bigger.

00:14:51.510 --> 00:14:52.410
OK.

00:14:52.860 --> 00:15:01.590
And also we're going to give it some border bottom and also we're going to need some margin between

00:15:01.590 --> 00:15:03.480
each two elements.

00:15:03.480 --> 00:15:04.020
OK so

00:15:07.170 --> 00:15:10.830
let's add the high to 50 pixels.

00:15:11.610 --> 00:15:12.560
OK.

00:15:12.610 --> 00:15:25.410
Also let's give us a broader bottom so we can go over with of one pixel and a solid style for the color

00:15:25.410 --> 00:15:25.640
.

00:15:25.650 --> 00:15:29.700
We're going to go for a white color.

00:15:32.280 --> 00:15:34.140
OK.

00:15:34.620 --> 00:15:35.920
That looks good.

00:15:36.480 --> 00:15:41.320
And let's give it some margin.

00:15:42.170 --> 00:15:44.470
Margin bottom or just margin.

00:15:44.620 --> 00:15:45.570
OK we can say the.

00:15:45.600 --> 00:15:48.030
Even from these sites.

00:15:48.030 --> 00:15:49.820
OK.

00:15:50.310 --> 00:15:53.130
I only said that to 15 pixels.

00:15:54.210 --> 00:15:54.640
OK.

00:15:54.640 --> 00:15:56.610
That looks better.

00:15:56.610 --> 00:15:58.140
Now let's move to the next one

00:16:01.110 --> 00:16:11.750
which is the love time title.

00:16:11.820 --> 00:16:15.340
OK.

00:16:18.900 --> 00:16:21.070
OK.

00:16:21.120 --> 00:16:24.410
So the title has got a font size slightly bigger.

00:16:24.540 --> 00:16:25.420
OK.

00:16:25.890 --> 00:16:28.970
And also you can force it to flow to the left.

00:16:28.980 --> 00:16:42.170
If you don't do so on size Let's make it one and a half in and this is floats to the left.

00:16:43.920 --> 00:16:44.750
OK.

00:16:45.170 --> 00:16:50.550
And let's move to the last one which is

00:16:53.160 --> 00:16:54.810
class left lane

00:16:56.980 --> 00:17:00.110
.

00:17:00.880 --> 00:17:02.150
OK.

00:17:02.370 --> 00:17:11.490
Again we're going to change the font size and we're going make it floats to the right.

00:17:12.020 --> 00:17:15.230
So go for a bigger font size.

00:17:15.800 --> 00:17:19.600
And let's make its floats to the right like this.

00:17:20.010 --> 00:17:20.720
OK.

00:17:20.910 --> 00:17:25.220
That looks really good and it saves this.

00:17:25.380 --> 00:17:26.300
OK.

00:17:27.260 --> 00:17:29.850
Let's refresh the page.

00:17:30.940 --> 00:17:31.640
OK.

00:17:31.770 --> 00:17:32.580
Let's try out.

00:17:32.590 --> 00:17:32.890
Up

00:17:37.340 --> 00:17:40.670
OK.

00:17:41.190 --> 00:17:47.960
I would think if you click on the start button it soap's if you resume it was use.

00:17:48.150 --> 00:17:49.080
OK.

00:17:49.080 --> 00:17:52.740
If you click on the reset button it refresh the page

00:17:52.760 --> 00:17:58.840
.

00:18:05.580 --> 00:18:05.970
OK.

00:18:06.090 --> 00:18:09.460
So one slight change we need to do here.

00:18:09.690 --> 00:18:19.890
So we want to change the order of the laps because when we click on the lock button the last lap is

00:18:19.890 --> 00:18:21.220
the one showing at the top.

00:18:21.510 --> 00:18:24.110
OK and that's not exactly what we have here.

00:18:24.420 --> 00:18:26.100
So let's change this.

00:18:26.130 --> 00:18:36.270
So rather than appending the div to the Lap's box we are going to pretend it's to the lubs book so that

00:18:36.760 --> 00:18:39.660
it shows at the top.

00:18:39.660 --> 00:18:47.020
OK so we're going to use the function preplanned to rather than append to.

00:18:48.120 --> 00:18:53.260
So if we save it let's try this again.

00:18:55.470 --> 00:18:55.830
OK.

00:18:55.830 --> 00:19:01.050
And then we can see the last lap appearing at the top

00:19:01.050 --> 00:19:07.210
.

00:19:07.400 --> 00:19:09.090
OK.

00:19:09.870 --> 00:19:14.020
And our OP is complete.

00:19:16.110 --> 00:19:21.190
Congratulations you have just created a highly professional up using a female.

00:19:21.230 --> 00:19:27.840
She says J equerry and bootstrap you had a chance to practice many of the skills you have learned in

00:19:27.840 --> 00:19:33.800
those chapters if you created something different then please share with me and other students.

00:19:33.870 --> 00:19:38.670
I look forward to seeing you finishing other projects and becoming a highly skilled and professional

00:19:38.760 --> 00:19:39.370
web developer