1
00:00:00,770 --> 00:00:05,890
Now, if you take a look at Arab ABC, there are two dynamic peace and two dynamic elements.

2
00:00:05,900 --> 00:00:12,510
One of them is another is value, which is dynamically changing up on every mouse hover, right?

3
00:00:12,680 --> 00:00:18,920
So for this purpose will be defining two pieces of state, one for title and another for value in function

4
00:00:18,920 --> 00:00:19,360
app.

5
00:00:19,910 --> 00:00:20,860
And for that book.

6
00:00:20,870 --> 00:00:26,330
But before we do that, we see that there's we have defined a great deal as a function whose task is

7
00:00:26,330 --> 00:00:28,960
to get our data from our API.

8
00:00:29,330 --> 00:00:33,620
Right now, the question at hand is that where should we call this function because we have defined

9
00:00:33,620 --> 00:00:34,910
it, but we need to call it?

10
00:00:35,390 --> 00:00:39,640
So the best place to call it might be, in this case, the user factbook.

11
00:00:39,890 --> 00:00:42,920
So for that purpose, let's first input adios if I.

12
00:00:45,700 --> 00:00:49,600
Now will define the use of a coke, give it at a function.

13
00:00:50,730 --> 00:00:52,320
And caller, get to user.

14
00:00:59,140 --> 00:01:01,890
And even give it an empty Eddie.

15
00:01:04,010 --> 00:01:09,650
No, the task at hand is to define the other two pieces of state, one for tightly and another for the

16
00:01:09,650 --> 00:01:13,280
value and give them an initial value to both of them.

17
00:01:14,060 --> 00:01:18,530
So Konst title and so the function is going to be set tightly.

18
00:01:18,890 --> 00:01:20,750
Basically, that's the convention that we use.

19
00:01:21,170 --> 00:01:25,880
So title and give it initial value of random boson.

20
00:01:31,720 --> 00:01:34,150
Now, another piece of state that is the value.

21
00:01:35,960 --> 00:01:43,370
Give it set value as a function, which is going to set its value and give it an initial state of.

22
00:01:45,000 --> 00:01:45,450
Name.

23
00:01:48,220 --> 00:01:52,750
Now, where should we call these two functions and where should we call the assertive conscience?

24
00:01:52,930 --> 00:01:57,400
So right at the place where we call assertive function for the user will be calling these two because

25
00:01:57,400 --> 00:01:59,680
we want them to work simultaneously, right?

26
00:01:59,890 --> 00:02:00,190
Right.

27
00:02:00,340 --> 00:02:02,530
A new person is defined.

28
00:02:02,530 --> 00:02:05,170
We want their new title as well as the new value.

29
00:02:05,170 --> 00:02:07,270
Therefore, we'll be just placing them one below the end of the.

30
00:02:08,620 --> 00:02:14,080
So subtitle and give it a value of name, because the first thing that we are going to be shown on our

31
00:02:14,260 --> 00:02:17,830
air is the name of the person and set value with new person.

32
00:02:20,200 --> 00:02:20,890
Not name.

33
00:02:23,180 --> 00:02:26,930
So it is going to be like my name is and the name of the person, right?

34
00:02:28,440 --> 00:02:34,800
So now what are you going to do is create a function that is going to change the value of property title

35
00:02:34,800 --> 00:02:37,020
and value whenever we have our different icons.

36
00:02:37,350 --> 00:02:38,250
So let's start it.

37
00:02:38,730 --> 00:02:44,400
So the first thing that we're going to do is create a constant and never function as handled value.

38
00:02:45,470 --> 00:02:49,700
But at an event, and so they're not often function, as you can see.

39
00:02:49,940 --> 00:02:50,630
And if.

40
00:02:51,900 --> 00:03:02,490
The event does target not call list that contains the icon property, so you can see button elements

41
00:03:02,490 --> 00:03:06,630
right there having class name of icons and a little label of name.

42
00:03:06,900 --> 00:03:10,380
So if they contain icon property, what we want is.

43
00:03:11,490 --> 00:03:14,530
Can still create a new concert value and call it new value.

44
00:03:14,670 --> 00:03:21,270
We want to target that dataset, that label means if I'm hovering over, I can refuse any.

45
00:03:21,300 --> 00:03:23,400
I wanted labor to change to name.

46
00:03:23,700 --> 00:03:28,650
If I am hovering over the going of map, I want the label to change to a street.

47
00:03:28,920 --> 00:03:32,730
And if I'm hovering over the phone, then I want to read the labor to change the font and so on and

48
00:03:32,730 --> 00:03:33,300
so forth.

49
00:03:34,140 --> 00:03:36,360
So this is what this code means.

50
00:03:36,690 --> 00:03:39,150
So we are changing the new value right now.

51
00:03:39,150 --> 00:03:41,310
Let's assign it now SEC title.

52
00:03:41,550 --> 00:03:49,590
We want a title to be this new value, and what we want to add value to be is user dark, new value.

53
00:03:50,340 --> 00:03:56,640
So the subtitle is going to do it's going to say to you that, OK, my name is and that value is going

54
00:03:56,640 --> 00:04:02,060
to give the value and that is going to say my email addresses, and that really is going to give you

55
00:04:02,090 --> 00:04:02,910
an email address.

56
00:04:03,090 --> 00:04:05,490
So that's what it is all about.

57
00:04:07,880 --> 00:04:10,530
So now we are in control of all the data that we require.

58
00:04:10,550 --> 00:04:10,910
Right?

59
00:04:11,150 --> 00:04:13,490
So let's make some tweaks to our app.

60
00:04:13,760 --> 00:04:16,210
The first one is going to be in the image element.

61
00:04:16,220 --> 00:04:19,670
We are going to replace the source with a dynamic source.

62
00:04:19,970 --> 00:04:25,580
So the first thing that we're going to do is replace our source with user double ampersand and use our

63
00:04:25,580 --> 00:04:26,630
dart image.

64
00:04:27,810 --> 00:04:34,200
So this is basically a security check that says that only sure, the image of a user if the user object

65
00:04:34,200 --> 00:04:37,860
is present, otherwise there's no point of even showing the user image.

66
00:04:38,730 --> 00:04:39,890
And in the.

67
00:04:43,810 --> 00:04:51,370
We would just replace it with my title is and other than that will change, the value is going to be

68
00:04:51,370 --> 00:04:51,850
value.

69
00:04:52,990 --> 00:04:57,580
Now if you're wondering how time doing this, this is just multi-course editing.

70
00:04:57,580 --> 00:05:02,980
If you want to do anything work, all you need to do is just hold on your old and select on all those

71
00:05:02,980 --> 00:05:03,400
places.

72
00:05:03,450 --> 00:05:09,070
They want to make some changes and the property that they're going to you as well is on mouse over.

73
00:05:10,110 --> 00:05:13,560
On Mozilla and assign our handle value matter to it.

74
00:05:14,040 --> 00:05:22,230
So what basically handle value is so and value is a matter that is going to change the title and value

75
00:05:22,740 --> 00:05:23,970
on every Mozilla.

76
00:05:24,360 --> 00:05:30,000
So we need to attach it to abundant elements and that's what we did just know and hit save.

77
00:05:31,720 --> 00:05:36,220
So now, if we look at the UI, we will see a big, nasty error.

78
00:05:36,730 --> 00:05:39,700
And why is it that let us discuss when we see it?

79
00:05:40,180 --> 00:05:43,840
So if we just head back to our browser window, we'll see that response.

80
00:05:44,060 --> 00:05:48,820
Jason is not a function and the error comes on line number 16.

81
00:05:48,820 --> 00:05:50,140
OK, I've got just fine.

82
00:05:50,770 --> 00:05:52,090
So let's head back to a.

83
00:05:53,250 --> 00:05:53,700
Data.

84
00:05:54,660 --> 00:05:59,630
And Hevesi, there's a response he goes to fetch calling out API.

85
00:06:00,030 --> 00:06:02,640
No, it's not that we are going to fetch our API.

86
00:06:02,640 --> 00:06:05,930
The instant we call it right, it needs some time for that purpose.

87
00:06:05,940 --> 00:06:11,750
We need to attach a keyword known as of it and for a way to be available by an app.

88
00:06:11,760 --> 00:06:15,720
They need to actually define this function as a async function.

89
00:06:16,500 --> 00:06:24,000
So now we can actually use the word of eight keyword in it so that if those are executed at victory,

90
00:06:24,240 --> 00:06:30,120
able to resolve a promise that they going that is going to be written by our fetch method and will again

91
00:06:30,570 --> 00:06:31,620
just evaded.

92
00:06:33,490 --> 00:06:37,240
Now, the problem that was there is going to be resolved.

93
00:06:37,600 --> 00:06:45,280
No, if he had save and head back to a quarter, you will see that we have a boss and now we have his

94
00:06:45,280 --> 00:06:48,610
name, we have his place where he lives.

95
00:06:48,940 --> 00:06:50,170
We have his phone number.

96
00:06:51,940 --> 00:06:53,200
We have his age.

97
00:06:54,240 --> 00:06:56,970
We have an email we have is password.

98
00:07:00,700 --> 00:07:03,040
And you can see all his properties.

99
00:07:03,910 --> 00:07:05,740
So we have successfully created an app.