Welcome to the final video of this project, and this video will see a small animation to make this
expanded even once the user clicks on this.
And also some background everything like I have an overview of the project, what we did enough in all
of these videos.
So starting also go to create a riot on Jan. six and here.
We'll be using our book to make a note of it is expand it or not.
He's expanded.
Common said expect.
So a nation, it should be false.
It condemns bullying and falls.
Initially, it is false.
And now.
Here.
Initially, we wanted the exterior to appear right.
So after the fog, we need to have JavaScript is expanded.
If it is expanded is true, then only we want the input to appear.
Right.
So that is when we want this input to appear.
Otherwise, it won't appear since initially the.
Oh, it's totally yeah, initially he's expanded his fault.
That means whenever the webpage opens, then he's expressed it is false.
That means it would not check then condition, then then would not be not only good exterior and everything.
Now here we want the rose to be one if it does not expand.
He's expanded.
Three, then one, if it is expanded, then only it should be three, otherwise it should be one.
And on click on it, then it to expand.
On Glick than it, I have to call a function expand.
So what does its brain function does is it sets the expansion is expanded to.
Function.
Expand.
Expanded.
You expanded.
Those three and everything, yeah, it is fine.
So now you can check whether the transition is right or not.
You can see it by default.
The expansion is false.
That means we are only seeing one drop because by default we are having only one room on equal call
and expansion function to be attached to.
So when you expand it, it's true that it will carry out this written.
When I click on this, you can see it is getting expanded, but it is a small transition that we did.
So, yeah, so now we are finished with the project so you can see if I like s give some data added
that gives a murderer.
Some data already added.
And then I can belatedly delete CANDU acknowledged Legarde items, add notes, make a note of all the
items that I want to do, whether it is study or complete some programming knowledge.
And here you can see it.
There is some background, so this you can take of the challenge how to apply detection with a body
bag.
This you have to do in stylish dark cases.
Basically, after Target the body an accent texture, you can add any texture that you want throughout
this picture.
And although there is some difference in padding and everything, some like, there is some difference
in the font.
Some padding and everything, so these are the things that a styling firm that depends on the stylistic
choice that you want to use can do everything.
So with this, we have completed the project.
Now I'll give a quick overview of what we did in the whole project.
So basically, we have started with that gorgeous.
We have created our header.
After that, we made to create a real company.
This created as a form which has one input and the text area.
So whenever we click on this button, add icon button, then we are calling us up with node function.
This are not what it's doing this it is adding the details of that to the item that we are adding.
But this node are so based on that we can add node for the node, said it or delete nodes best performing
some logic.
And after that node, now we want to bring all the To-Do items, all the nodes that we have taken down.
So to print everything, we have to put on a fight.
Look, basically, this map does that for looking.
It's a little bit of note item, the item of every iteration of the far loop and the index of that item.
And we are calling the node component every time since we are calling the node components and the map,
then every, each and every node component should have a unique key.
And we are sending the next diary so that we can use whenever we want to delete title and content and
on this will trigger this on this delete note function, and we are deleting the item that the user
clicks on the button using this filter.
Not that the food that we have used our date.
But that being said, the footer.
And also we have a builder style structure for everything like the node component, the header node
footer, everything.
So this is what we have done in this entire project, but this is the final project output.
Now, before anything, I want to give once one citation, whenever you are downloading some code from
the other users, like other resources like GitHub or anything, if you are cloning from guitar by downloading
from anything, they were not able to download this node modules for this node mortgage.
Basically, everyone won't upload, but that it was a section of this package that this one went not
to have these libraries.
So when don't read the code, you'll be not having everything into the package autism and node modules
for how to get them.
Once you download the port or go to that folder, for example, for the owner to distribute app folder
and if you check a list, then instead of this to the app, you arriving everything, support this directory
and just click on and then start.
So what this does is this it stops all the packages, all the models that this project is using.
Once you are, you are, you have performed this line of code and you are ready to display npm stock
and open the product and you can do whatever things you want.
Is the one life hack, but whatever you make one small step that I wanted to give before ending this
project.
So I hope you enjoyed this project and learned many concepts of react in the journey of this 10 to 12
videos.
Thank you.