1
00:00:00,830 --> 00:00:05,900
Now, before we create methods that is going to fetch data from our API, we add in a requirement to

2
00:00:05,900 --> 00:00:08,630
create a button that is going to help us achieve that target.

3
00:00:08,840 --> 00:00:14,660
That means that it is going to be the button functionality to actually call for the API.

4
00:00:15,020 --> 00:00:21,130
So let's just create a button and head to your buttons or G6, which you have already configured now

5
00:00:21,140 --> 00:00:25,250
inside this in the parent to give it a class name of buttons.

6
00:00:25,940 --> 00:00:28,160
So it'd be giving it a class name of buttons.

7
00:00:29,570 --> 00:00:32,720
And after this buttons, remove this better off element.

8
00:00:34,140 --> 00:00:38,670
And create a button button element, so this is going to be a button element, and this is going to

9
00:00:38,670 --> 00:00:42,000
have different properties once we data via props through our courts.

10
00:00:42,330 --> 00:00:49,050
The GSX, but not just leave it empty with only a style in line style that is going to be equal to.

11
00:00:50,410 --> 00:00:54,730
Of color that again, is just right.

12
00:00:55,840 --> 00:00:58,980
OK, so this is all the started that we get in for, not now.

13
00:00:58,990 --> 00:01:01,810
Close this and it is going to speak out.

14
00:01:01,810 --> 00:01:02,730
New good.

15
00:01:07,720 --> 00:01:09,610
OK, so it's done hit save.

16
00:01:11,100 --> 00:01:12,870
Now, head to your quote, stodgy six.

17
00:01:14,320 --> 00:01:18,280
Because they're going to call up an element within and first import your button.

18
00:01:21,130 --> 00:01:24,130
So it would be importing abundant components, import buttons.

19
00:01:30,050 --> 00:01:34,820
So we have buttons, not just let's put up this button right beneath our other.

20
00:01:35,660 --> 00:01:41,960
So we'll be putting up our buttons, red meat reports, water bottle and it's if not at a see if everything

21
00:01:41,960 --> 00:01:42,980
is working fine.

22
00:01:44,370 --> 00:01:46,800
So we see that everything has compiled successfully.

23
00:01:47,520 --> 00:01:50,610
Now let's just close this and view your application.

24
00:01:53,640 --> 00:01:58,860
So here is a button without any sort of colors, and this is just pure light.

25
00:01:59,520 --> 00:02:02,590
So now this is a button, but this is not something that anyone would appreciate, right?

26
00:02:02,940 --> 00:02:07,530
So let's just head back to our code editor and add costs to it.

27
00:02:07,920 --> 00:02:14,340
So for to see this, head into your code, Stratasys and the first element that we're targeting now

28
00:02:14,760 --> 00:02:16,020
is going to be a buttons.

29
00:02:16,320 --> 00:02:22,890
So let's just plug it a button and this button is going to have a modern talk because you want to actually

30
00:02:24,090 --> 00:02:27,780
give her a little space between now his name and the button.

31
00:02:28,200 --> 00:02:31,740
So will do the margin drop off during and after the modern top value?

32
00:02:31,740 --> 00:02:32,760
Add a display of flex.

33
00:02:33,660 --> 00:02:37,350
And this should be able to flex and after the display will give it a line item center because we want

34
00:02:37,350 --> 00:02:41,940
to send a certain item center and justify counting center.

35
00:02:43,200 --> 00:02:47,190
Now read Save and let's see application with these functionalities have been added or not.

36
00:02:47,970 --> 00:02:49,200
OK, so I can find.

37
00:02:50,390 --> 00:02:53,000
So, yeah, we have a space in which we know it doesn't matter what now.

38
00:02:53,980 --> 00:02:56,230
Now, if we just head back into a quarter to.

39
00:02:57,350 --> 00:03:04,160
And after the buttons had three buttons, Georgia six, and this button is going to have another class

40
00:03:04,160 --> 00:03:06,590
name and this class name is going to be called a button.

41
00:03:06,680 --> 00:03:08,180
So let's give it a class name.

42
00:03:09,970 --> 00:03:11,900
It is going to be to button.

43
00:03:13,030 --> 00:03:13,600
It's a.

44
00:03:15,440 --> 00:03:21,740
No, going to court logistics and court justices, I mean, and now we are getting our button.

45
00:03:23,300 --> 00:03:24,680
This time it's the actual button.

46
00:03:25,640 --> 00:03:27,610
This button, we want to give it to despair, flex.

47
00:03:27,640 --> 00:03:30,140
So let's just give it to this day of Flex.

48
00:03:31,850 --> 00:03:37,880
And after this baby, want wanted to center it so as you justify contents into a line item center.

49
00:03:43,390 --> 00:03:48,100
And after the gist of our continent, a line items will be departing because we want to have its bearings

50
00:03:48,100 --> 00:03:50,500
around it for pictures and.

51
00:03:52,150 --> 00:03:58,740
And after four weeks, as they put up with 17 boxes, 17 mixes, now let's just hit seven of your application,

52
00:03:59,500 --> 00:04:01,270
so everything is compiled successfully.

53
00:04:05,240 --> 00:04:06,860
So we are having a batting is not OK.

54
00:04:08,430 --> 00:04:10,770
But still, the color is not something that anyone would appreciate.

55
00:04:10,800 --> 00:04:14,870
But then again, this is going to change along with the background before we add props to it.

56
00:04:15,660 --> 00:04:16,290
So head back.

57
00:04:17,940 --> 00:04:20,880
And after the batting, we want to add a border.

58
00:04:28,210 --> 00:04:29,560
Of none.

59
00:04:30,400 --> 00:04:33,250
And after the burning will give it the outline of none.

60
00:04:35,600 --> 00:04:38,630
And after the outline, we were at a border radius of three pixels.

61
00:04:42,520 --> 00:04:45,850
And north of the border, radius will make sure that it, of course, I point out, because whenever

62
00:04:45,850 --> 00:04:51,490
we have our way, we want to point out is to be shown up, not after the cursor will give it the height.

63
00:04:55,470 --> 00:05:02,730
Thirty five pixels and after the height, very good text align, I feel as if I wanted to go in it.

64
00:05:03,300 --> 00:05:09,180
No text align and this again did not save and let's be replication.

65
00:05:10,990 --> 00:05:12,580
So, yeah, we definitely see changes.

66
00:05:13,270 --> 00:05:14,440
If I just.

67
00:05:15,490 --> 00:05:18,010
OK, so it's time to move into a.

68
00:05:19,000 --> 00:05:24,070
Good stuff, G-6, and add the functionality that is going to help us to fetch our data.