1
00:00:00,900 --> 00:00:06,030
Welcome to the final video of this project, and this video will see a small animation to make this

2
00:00:06,030 --> 00:00:08,280
expanded even once the user clicks on this.

3
00:00:08,550 --> 00:00:14,400
And also some background everything like I have an overview of the project, what we did enough in all

4
00:00:14,400 --> 00:00:15,090
of these videos.

5
00:00:16,160 --> 00:00:19,160
So starting also go to create a riot on Jan. six and here.

6
00:00:20,800 --> 00:00:26,110
We'll be using our book to make a note of it is expand it or not.

7
00:00:28,230 --> 00:00:29,630
He's expanded.

8
00:00:31,070 --> 00:00:32,410
Common said expect.

9
00:00:34,200 --> 00:00:35,670
So a nation, it should be false.

10
00:00:37,520 --> 00:00:39,170
It condemns bullying and falls.

11
00:00:39,560 --> 00:00:40,580
Initially, it is false.

12
00:00:44,250 --> 00:00:44,790
And now.

13
00:00:46,920 --> 00:00:47,310
Here.

14
00:00:48,600 --> 00:00:51,840
Initially, we wanted the exterior to appear right.

15
00:00:52,350 --> 00:00:58,680
So after the fog, we need to have JavaScript is expanded.

16
00:00:59,580 --> 00:01:04,260
If it is expanded is true, then only we want the input to appear.

17
00:01:05,390 --> 00:01:05,650
Right.

18
00:01:07,600 --> 00:01:10,060
So that is when we want this input to appear.

19
00:01:11,190 --> 00:01:13,980
Otherwise, it won't appear since initially the.

20
00:01:15,810 --> 00:01:20,160
Oh, it's totally yeah, initially he's expanded his fault.

21
00:01:20,490 --> 00:01:24,390
That means whenever the webpage opens, then he's expressed it is false.

22
00:01:24,630 --> 00:01:29,730
That means it would not check then condition, then then would not be not only good exterior and everything.

23
00:01:30,060 --> 00:01:34,560
Now here we want the rose to be one if it does not expand.

24
00:01:35,770 --> 00:01:36,730
He's expanded.

25
00:01:40,530 --> 00:01:45,510
Three, then one, if it is expanded, then only it should be three, otherwise it should be one.

26
00:01:46,560 --> 00:01:49,680
And on click on it, then it to expand.

27
00:01:50,690 --> 00:01:54,110
On Glick than it, I have to call a function expand.

28
00:01:56,730 --> 00:02:01,400
So what does its brain function does is it sets the expansion is expanded to.

29
00:02:04,740 --> 00:02:05,280
Function.

30
00:02:08,840 --> 00:02:09,380
Expand.

31
00:02:12,580 --> 00:02:13,330
Expanded.

32
00:02:19,370 --> 00:02:20,170
You expanded.

33
00:02:22,150 --> 00:02:24,130
Those three and everything, yeah, it is fine.

34
00:02:27,900 --> 00:02:30,390
So now you can check whether the transition is right or not.

35
00:02:30,660 --> 00:02:32,450
You can see it by default.

36
00:02:32,460 --> 00:02:33,780
The expansion is false.

37
00:02:33,990 --> 00:02:39,090
That means we are only seeing one drop because by default we are having only one room on equal call

38
00:02:39,090 --> 00:02:41,130
and expansion function to be attached to.

39
00:02:41,460 --> 00:02:46,260
So when you expand it, it's true that it will carry out this written.

40
00:02:47,190 --> 00:02:51,570
When I click on this, you can see it is getting expanded, but it is a small transition that we did.

41
00:02:52,140 --> 00:03:00,570
So, yeah, so now we are finished with the project so you can see if I like s give some data added

42
00:03:01,050 --> 00:03:02,340
that gives a murderer.

43
00:03:07,300 --> 00:03:09,040
Some data already added.

44
00:03:09,420 --> 00:03:15,630
And then I can belatedly delete CANDU acknowledged Legarde items, add notes, make a note of all the

45
00:03:15,630 --> 00:03:20,130
items that I want to do, whether it is study or complete some programming knowledge.

46
00:03:20,430 --> 00:03:21,760
And here you can see it.

47
00:03:21,780 --> 00:03:26,640
There is some background, so this you can take of the challenge how to apply detection with a body

48
00:03:26,640 --> 00:03:26,850
bag.

49
00:03:27,360 --> 00:03:29,150
This you have to do in stylish dark cases.

50
00:03:29,560 --> 00:03:35,020
Basically, after Target the body an accent texture, you can add any texture that you want throughout

51
00:03:35,100 --> 00:03:35,700
this picture.

52
00:03:35,730 --> 00:03:40,410
And although there is some difference in padding and everything, some like, there is some difference

53
00:03:40,410 --> 00:03:41,460
in the font.

54
00:03:42,430 --> 00:03:46,270
Some padding and everything, so these are the things that a styling firm that depends on the stylistic

55
00:03:46,270 --> 00:03:48,790
choice that you want to use can do everything.

56
00:03:49,150 --> 00:03:50,860
So with this, we have completed the project.

57
00:03:51,070 --> 00:03:54,280
Now I'll give a quick overview of what we did in the whole project.

58
00:03:55,150 --> 00:03:57,290
So basically, we have started with that gorgeous.

59
00:03:57,790 --> 00:03:59,210
We have created our header.

60
00:03:59,620 --> 00:04:01,540
After that, we made to create a real company.

61
00:04:01,990 --> 00:04:06,310
This created as a form which has one input and the text area.

62
00:04:06,850 --> 00:04:12,880
So whenever we click on this button, add icon button, then we are calling us up with node function.

63
00:04:13,210 --> 00:04:18,940
This are not what it's doing this it is adding the details of that to the item that we are adding.

64
00:04:18,940 --> 00:04:25,960
But this node are so based on that we can add node for the node, said it or delete nodes best performing

65
00:04:25,960 --> 00:04:26,560
some logic.

66
00:04:27,130 --> 00:04:33,010
And after that node, now we want to bring all the To-Do items, all the nodes that we have taken down.

67
00:04:33,400 --> 00:04:35,830
So to print everything, we have to put on a fight.

68
00:04:35,840 --> 00:04:38,040
Look, basically, this map does that for looking.

69
00:04:38,740 --> 00:04:45,190
It's a little bit of note item, the item of every iteration of the far loop and the index of that item.

70
00:04:45,430 --> 00:04:49,750
And we are calling the node component every time since we are calling the node components and the map,

71
00:04:50,080 --> 00:04:52,840
then every, each and every node component should have a unique key.

72
00:04:53,050 --> 00:04:58,180
And we are sending the next diary so that we can use whenever we want to delete title and content and

73
00:04:58,190 --> 00:05:04,720
on this will trigger this on this delete note function, and we are deleting the item that the user

74
00:05:04,720 --> 00:05:07,330
clicks on the button using this filter.

75
00:05:07,810 --> 00:05:09,880
Not that the food that we have used our date.

76
00:05:10,120 --> 00:05:11,290
But that being said, the footer.

77
00:05:12,040 --> 00:05:17,350
And also we have a builder style structure for everything like the node component, the header node

78
00:05:17,890 --> 00:05:19,540
footer, everything.

79
00:05:20,080 --> 00:05:26,980
So this is what we have done in this entire project, but this is the final project output.

80
00:05:27,790 --> 00:05:34,510
Now, before anything, I want to give once one citation, whenever you are downloading some code from

81
00:05:34,510 --> 00:05:40,030
the other users, like other resources like GitHub or anything, if you are cloning from guitar by downloading

82
00:05:40,030 --> 00:05:44,950
from anything, they were not able to download this node modules for this node mortgage.

83
00:05:44,950 --> 00:05:50,820
Basically, everyone won't upload, but that it was a section of this package that this one went not

84
00:05:50,830 --> 00:05:52,510
to have these libraries.

85
00:05:52,810 --> 00:05:57,370
So when don't read the code, you'll be not having everything into the package autism and node modules

86
00:05:57,610 --> 00:05:58,420
for how to get them.

87
00:05:58,810 --> 00:06:05,320
Once you download the port or go to that folder, for example, for the owner to distribute app folder

88
00:06:05,950 --> 00:06:11,680
and if you check a list, then instead of this to the app, you arriving everything, support this directory

89
00:06:11,890 --> 00:06:14,080
and just click on and then start.

90
00:06:15,370 --> 00:06:22,570
So what this does is this it stops all the packages, all the models that this project is using.

91
00:06:23,080 --> 00:06:28,390
Once you are, you are, you have performed this line of code and you are ready to display npm stock

92
00:06:28,630 --> 00:06:30,880
and open the product and you can do whatever things you want.

93
00:06:31,340 --> 00:06:37,090
Is the one life hack, but whatever you make one small step that I wanted to give before ending this

94
00:06:37,090 --> 00:06:37,390
project.

95
00:06:37,870 --> 00:06:44,910
So I hope you enjoyed this project and learned many concepts of react in the journey of this 10 to 12

96
00:06:44,910 --> 00:06:45,310
videos.

97
00:06:46,240 --> 00:06:46,690
Thank you.