1
00:00:00,840 --> 00:00:07,500
In this part we were going to do the same if that but this time we are going to used and at the library

2
00:00:07,800 --> 00:00:09,380
court style component.

3
00:00:10,080 --> 00:00:15,750
And you will see the CSF and it's Office Square Cam makes it in the same file together.

4
00:00:15,750 --> 00:00:17,120
Very nice.

5
00:00:17,190 --> 00:00:21,380
So first we are going to install the Dow component.

6
00:00:21,750 --> 00:00:28,560
We go to the style component and we copy each line of code and paste it here

7
00:00:33,840 --> 00:00:41,040
and then we go to the top of the file with it is disfigure and we import styled

8
00:00:45,450 --> 00:00:48,810
styled component.

9
00:00:48,830 --> 00:00:58,840
Now we are going to create a button by using cornerstone button and then you go to what we just imported

10
00:01:07,470 --> 00:01:16,890
and we piece a bad tech here and now inside this bad tech you can pay us to see us ask that already

11
00:01:16,890 --> 00:01:20,080
exist here.

12
00:01:20,100 --> 00:01:23,000
So now we can copy exactly the same CSF.

13
00:01:23,020 --> 00:01:24,620
Wow.

14
00:01:25,650 --> 00:01:27,690
And pages in the Apogee as

15
00:01:31,300 --> 00:01:38,920
now we have these dual component and then we can have a try on putting this button at the top of the

16
00:01:38,920 --> 00:01:39,870
Web site

17
00:01:43,820 --> 00:01:54,620
so we back to it a random area and then we paste button and we type toggle.

18
00:01:54,690 --> 00:01:57,100
So there are some differences.

19
00:01:57,260 --> 00:02:04,840
We have this button now we can take a look you can see this button.

20
00:02:05,160 --> 00:02:07,020
The style is exactly the same.

21
00:02:07,020 --> 00:02:12,300
We have the buttons that we already created.

22
00:02:12,300 --> 00:02:19,860
Now we are going to add some condition such that you will also can create a sound effect when the card

23
00:02:20,040 --> 00:02:21,210
is needed.

24
00:02:23,160 --> 00:02:30,300
So which part we are going to depends on because we depends on the length of the card what the number

25
00:02:30,300 --> 00:02:30,810
of the cards.

26
00:02:30,870 --> 00:02:36,230
So this is the name that you can decide.

27
00:02:36,750 --> 00:02:42,180
But we are going to use depends on the class length.

28
00:02:42,180 --> 00:02:44,370
So this is from the above.

29
00:02:44,370 --> 00:02:44,820
State

30
00:02:47,820 --> 00:02:49,910
so we are depending on the constant length.

31
00:02:50,490 --> 00:02:56,920
So now we can go to the pops off a button.

32
00:02:57,030 --> 00:03:03,450
Now we can delete this one and using some time pay later wrote The pope Pops

33
00:03:07,470 --> 00:03:13,700
and since we have the length pops so we can use pop length.

34
00:03:13,800 --> 00:03:15,600
So if this is quit it then to

35
00:03:18,620 --> 00:03:27,930
we will use the original color otherwise we will have another conditions which is if the Pops thought

36
00:03:27,940 --> 00:03:35,200
length is less than two then this is red.

37
00:03:35,560 --> 00:03:41,390
Otherwise it is pink it should be a question mark.

38
00:03:41,540 --> 00:03:45,720
We should also add a semicolon.

39
00:03:45,800 --> 00:03:49,300
Now we tried to delete a card and you can see both buttons.

40
00:03:49,490 --> 00:03:50,680
We were trying to paint.

41
00:03:50,750 --> 00:03:56,750
And if we did it one more both and we also turned red.

42
00:03:56,750 --> 00:03:58,880
So now there are some more.

43
00:03:58,910 --> 00:04:04,610
You have to do is to change the font style for the first one.

44
00:04:04,610 --> 00:04:07,080
Use the color instead of just white.

45
00:04:07,970 --> 00:04:09,290
We are going to turn Bragg

46
00:04:15,210 --> 00:04:23,810
if this is smaller than or equal to one it will become black otherwise it will become white.

47
00:04:23,880 --> 00:04:26,520
And now we also need to add the fallen weight

48
00:04:32,910 --> 00:04:37,800
of the possible length if less than or equal to 1 then this is bold.

49
00:04:37,960 --> 00:04:42,060
Otherwise it will become normal.

50
00:04:42,140 --> 00:04:45,280
Also we have to pay each the semicolon at the end.

51
00:04:45,280 --> 00:04:47,010
Now we can have it tried again.

52
00:04:47,830 --> 00:04:53,050
If we delete this your term pink and if we did it one more of them turn red.

53
00:04:53,050 --> 00:04:55,600
And also that hash style also changed in.