1
00:00:00,360 --> 00:00:02,360
To make this place more beautiful.

2
00:00:02,370 --> 00:00:05,130
We can use the we abstract.

3
00:00:05,280 --> 00:00:12,920
So now we can go to a restaurant and install these two package and we can stop the server.

4
00:00:14,250 --> 00:00:15,860
And we paid it.

5
00:00:16,530 --> 00:00:21,780
And then we can import the bootstrap on the top of the page.

6
00:00:22,170 --> 00:00:27,900
And since we are going to a use telescope and this group item so we are going to import the this group

7
00:00:27,930 --> 00:00:32,270
and this group item from we add and put it on the top of the page.

8
00:00:32,640 --> 00:00:42,270
And then what we are going to do is to we praise the U L with the list group and then we are going to

9
00:00:42,270 --> 00:00:52,270
we pay the least group item where we placed a base with the this group item.

10
00:00:52,280 --> 00:00:55,740
Now we are going to stop the app again.

11
00:00:55,850 --> 00:01:02,660
Now we can see the list is much beautiful and if we look at the data we can see actually there is also

12
00:01:02,660 --> 00:01:10,670
a little data called completed and actually we can use data to create a patch here to show that which

13
00:01:10,670 --> 00:01:15,950
task is already complete and which task is too incomplete.

14
00:01:15,950 --> 00:01:21,600
So we go to the list group item and to track where the the item is completed.

15
00:01:21,710 --> 00:01:31,810
If it is completed we are going to show the patches and the color is success and the color is assessed

16
00:01:32,180 --> 00:01:37,450
in bootstrap meaning the color is green and we say it is completed

17
00:01:42,710 --> 00:01:46,930
otherwise we sold the color.

18
00:01:46,940 --> 00:01:54,760
Use the word and the pass is incomplete and we have to end this.

19
00:01:54,800 --> 00:02:01,880
We have the curly braces item is not defined in that because we named it wrong because we only have

20
00:02:01,880 --> 00:02:03,760
to do here.

21
00:02:03,880 --> 00:02:09,240
Now as you can see it already show a deal leaseback half badges too.

22
00:02:09,260 --> 00:02:14,280
So which task is incomplete and which task is completed.

23
00:02:14,360 --> 00:02:16,370
We have different type of us.