00:08.0
00:17.4
Today let's make a TOODOAPP.
00:17.5
00:22.3
We complete the three days video shooting within one day that's why you see us in the same dress.
00:22.4
00:27.2
You may think we are not taking bath properly, -It is a truth in his case- [laughter]
00:27.3
00:32.1
He mentions before the shooting that.
00:32.2
00:37.0
I couldn't return home within two days due to lockdown.
00:37.1
00:41.9
So am being forced to take a bath now.
00:42.0
00:46.8
When did you hear this discussion? What kind of man you are?
00:51.8
00:56.6
Didn't you say that?
00:56.7
01:01.5
Here there is no hot water.
01:01.6
01:06.4
Let's start discussion about To Do List.
01:06.5
01:11.3
What is To Do List?
01:11.4
01:16.2
It's used for note down tasks you have to do and remove those tasks after finishing them.
01:16.3
01:21.1
It has a input field, a button to add those inputs.
01:21.2
01:26.0
After adding tasks, it will show as a list below.
01:26.1
01:30.9
An option for giving a tick mark to completed tasks.
01:31.0
01:35.8
Let's start.
01:35.9
01:40.7
Designing is a time-consuming process.
01:40.8
01:45.6
Design is already done by professor sidheek.
01:45.7
01:50.5
You can find out the Github link in the description box.
01:50.6
01:55.4
You need to go to src,
01:55.5
02:00.3
There are two files called app.js and app.css files.
02:00.4
02:05.2
Take those two files.
02:05.3
02:10.1
Copy that xml,and paste it here.
02:15.1
02:19.9
It can be done by everybody who learned webbdesign.
02:20.0
02:24.8
We are not spending much time on it now.
02:24.9
02:34.6
We will show the designing part on Netflix.
02:34.7
02:39.5
We have copied the JSX into app.js.
02:39.6
02:44.4
Now let's copy the css.
02:44.5
02:54.2
Now import that css file into app.js.
02:54.3
02:59.1
ok, Let's run it.
02:59.2
03:04.0
npm start, to see the output faster.
03:04.1
03:08.9
Starting the development server...Compiled successfully.
03:09.0
03:13.8
Yes, the to-do list is shown, you can see a dummy item also.
03:13.9
03:18.7
No button for tick mark is shown.
03:18.8
03:23.6
What did you say to make an add button?
03:23.7
03:28.5
We are taking these buttons from the fontawsome library.
03:28.6
03:33.4
We have to add its CDN to our project.
03:33.5
03:43.2
For that, you have to google it.
03:43.3
03:48.1
There is a logo included in our project from here,
03:48.2
03:53.0
First cdn link.
03:53.1
04:02.8
Press the copy link tag.
04:02.9
04:07.7
Paste that link to the index.html page.
04:12.7
04:17.5
Save and refresh the page now,
04:17.6
04:22.4
An add button and delete button apeared now.
04:27.4
04:32.2
We have to give an action to add and delete button.
04:37.2
04:42.0
For that we have to manage state
04:42.1
04:46.9
import useState.
04:51.9
04:56.7
Is this is a list?
05:06.6
05:11.4
We are going to keep each todos as an array.
05:11.5
05:16.3
Keep multiple todos inside an array.
05:16.4
05:21.2
Todos are as a list.
05:21.3
05:26.1
We kept a count value inside the state before, but now we are going to keep an array inside the state
05:36.0
05:40.8
Note that we are giving an empty array as default here..
05:45.8
05:50.6
Find the input field.
05:55.6
06:00.4
We have to give action while pressing the button.
06:00.5
06:05.3
Before that we have to keep it in state.
06:05.4
06:10.2
The state to be created is todo.
06:15.2
06:20.0
For understanding the status of typed inputs,
06:20.1
06:24.9
Another state for array list.
06:25.0
06:29.8
We give todo and setTodo
06:29.9
06:34.7
We provide an empty string here.
06:34.8
06:39.6
This done for validation purpose.
06:39.7
06:44.5
We have to show it first.
06:44.6
06:49.4
Now we have to provide value now.
06:54.4
06:59.2
The value provided is toDo
07:04.2
07:09.0
We called setTodo function
07:18.9
07:23.7
e for event
07:23.8
07:28.6
onChange is common in html.
07:28.7
07:33.5
e.target.value gives the input fields typing value.
07:33.6
07:38.4
We give that in setTodo
07:38.5
07:43.3
That will enter into toDo state and that will be displayed.
07:43.4
07:48.2
It is like a cycling.
07:48.3
07:53.1
Now let's check whether it is coming or not
07:53.2
07:58.0
Now let's type here.
07:58.1
08:02.9
What is the next thing to do?
08:03.0
08:07.8
We have to understand one thing here.
08:07.9
08:12.7
Here a value is coming.
08:12.8
08:17.6
Take that code again
08:17.7
08:22.5
We can place a console.log here.
08:22.6
08:27.4
ok no need for a console
08:32.4
08:37.2
We have to take this toDo and place it in toDos.
08:37.3
08:42.1
Where is the plus button?
08:42.2
09:01.7
Data in toDo is taken for validation.
09:01.8
09:06.6
When we press this add button this array should be displayed.
09:06.7
09:16.4
What is need for creating another state in t his case?
09:16.5
09:21.3
Avoid that state
09:21.4
09:26.2
Can't we provide the data directly when the add button pressed?
09:26.3
09:31.1
This is not a form.
09:31.2
09:40.9
Then how we get the data? We can't take the data by using documents.getElementbyId
09:41.0
09:50.7
This is normal convention,There is another method for multiple input fields
09:50.8
09:55.6
We provide add button here.
09:55.7
10:00.5
And what will you do to take value from here.
10:00.6
10:05.4
You may access it by using getElementById.
10:05.5
10:10.3
But this is the react method.
10:10.4
10:15.2
Create a state for each component and maintain that state.
10:15.3
10:20.1
Now let's give action in add button click.
10:20.2
10:25.0
We can provide onClick here.
10:25.1
10:29.9
In onClick give setDo.
10:34.9
10:39.7
We have to pass toDo into setDo
10:39.8
10:44.6
Before that notice this is an array,
10:44.7
10:49.5
There is only one method to add data to an array which is push.
10:49.6
10:54.4
But we can't do it here,
10:54.5
10:59.3
So we use the spread operator
10:59.4
11:04.2
You can see the spread operator's application here.
11:09.2
11:14.0
We are giving an array a here and spreading the toDo inside of it.
11:28.8
11:33.6
toDos is already an array,when we spread it
11:33.7
11:38.5
It become a
