1
00:00:00,00 --> 00:00:03,100


2
00:00:03,200 --> 00:00:07,560


3
00:00:08,000 --> 00:00:17,400
Today let's make a TOODOAPP.

4
00:00:17,500 --> 00:00:22,300
We complete the three days video shooting 
within one day that's why you see us in the 
same dress.

5
00:00:22,400 --> 00:00:27,200
You may think we are not taking bath properly, 
 -It is a truth in his case- [laughter]

6
00:00:27,300 --> 00:00:32,100
He mentions before the shooting that.

7
00:00:32,200 --> 00:00:37,000
I couldn't return home within two days due 
to lockdown.

8
00:00:37,100 --> 00:00:41,900
So am being forced to take a bath now.

9
00:00:42,000 --> 00:00:46,800
When did you hear this discussion? What kind 
of man you are?

10
00:00:46,900 --> 00:00:51,700
[laughter]

11
00:00:51,800 --> 00:00:56,600
Didn't you say that?

12
00:00:56,700 --> 00:01:01,500
Here there is no hot water.

13
00:01:01,600 --> 00:01:06,400
Let's start discussion about To Do List.

14
00:01:06,500 --> 00:01:11,300
What is To Do List?

15
00:01:11,400 --> 00:01:16,200
It's used for note down tasks you have to 
do and remove those tasks after finishing 
them.

16
00:01:16,300 --> 00:01:21,100
It has a input field, a button to add those 
inputs.

17
00:01:21,200 --> 00:01:26,000
After adding tasks, it will show as a list 
below.

18
00:01:26,100 --> 00:01:30,900
An option for giving a tick mark to completed 
tasks.

19
00:01:31,000 --> 00:01:35,800
Let's start.

20
00:01:35,900 --> 00:01:40,700
Designing is a time-consuming process.

21
00:01:40,800 --> 00:01:45,600
Design is already done by professor sidheek.

22
00:01:45,700 --> 00:01:50,500
You can find out the Github link in the description 
box.

23
00:01:50,600 --> 00:01:55,400
You need to go to src,

24
00:01:55,500 --> 00:02:00,300
There are two files called app.js and app.css 
files.

25
00:02:00,400 --> 00:02:05,200
Take those two files.

26
00:02:05,300 --> 00:02:10,100
Copy that xml,and paste it here.

27
00:02:10,200 --> 00:02:15,000


28
00:02:15,100 --> 00:02:19,900
It can be done by everybody who learned webbdesign.

29
00:02:20,000 --> 00:02:24,800
We are not spending much time on it now.

30
00:02:24,900 --> 00:02:34,600
We will show the designing part on Netflix.

31
00:02:34,700 --> 00:02:39,500
We have copied the JSX into app.js.

32
00:02:39,600 --> 00:02:44,400
Now let's copy the css.

33
00:02:44,500 --> 00:02:54,200
Now import that css file into app.js.

34
00:02:54,300 --> 00:02:59,100
ok, Let's run it.

35
00:02:59,200 --> 00:03:04,000
npm start, to see the output faster.

36
00:03:04,100 --> 00:03:08,900
Starting the development server...Compiled 
successfully.

37
00:03:09,000 --> 00:03:13,800
Yes, the to-do list is shown, you can see 
a dummy item also.

38
00:03:13,900 --> 00:03:18,700
No button for tick mark is shown.

39
00:03:18,800 --> 00:03:23,600
What did you say to make an add button?

40
00:03:23,700 --> 00:03:28,500
We are taking these buttons from the fontawsome 
library.

41
00:03:28,600 --> 00:03:33,400
We have to add its CDN to our project.

42
00:03:33,500 --> 00:03:43,200
For that, you have to google it.

43
00:03:43,300 --> 00:03:48,100
There is a logo included in our project from 
here,

44
00:03:48,200 --> 00:03:53,000
First cdn link.

45
00:03:53,100 --> 00:04:02,800
Press the copy link tag.

46
00:04:02,900 --> 00:04:07,700
Paste that link to the index.html page.

47
00:04:07,800 --> 00:04:12,600


48
00:04:12,700 --> 00:04:17,500
Save and refresh the page now,

49
00:04:17,600 --> 00:04:22,400
An add button and delete button apeared  
now.

50
00:04:22,500 --> 00:04:27,300
Next,

51
00:04:27,400 --> 00:04:32,200
We have to give an action to add and delete 
button.

52
00:04:32,300 --> 00:04:37,100


53
00:04:37,200 --> 00:04:42,000
For that we have to manage state

54
00:04:42,100 --> 00:04:46,900
import  useState.

55
00:04:47,000 --> 00:04:51,800


56
00:04:51,900 --> 00:04:56,700
Is this is a list?

57
00:04:56,800 --> 00:05:01,600


58
00:05:01,700 --> 00:05:06,500


59
00:05:06,600 --> 00:05:11,400
We  are going to keep each todos as an array.

60
00:05:11,500 --> 00:05:16,300
Keep multiple todos inside an array.

61
00:05:16,400 --> 00:05:21,200
Todos are as a list.

62
00:05:21,300 --> 00:05:26,100
We kept a count value inside the state before, 
but now we are going to keep an array inside 
the state

63
00:05:26,200 --> 00:05:31,000


64
00:05:31,100 --> 00:05:35,900


65
00:05:36,000 --> 00:05:40,800
Note that we are giving an empty array as 
default here..

66
00:05:40,900 --> 00:05:45,700


67
00:05:45,800 --> 00:05:50,600
Find the input field.

68
00:05:50,700 --> 00:05:55,500


69
00:05:55,600 --> 00:06:00,400
We have to give action while pressing the 
button.

70
00:06:00,500 --> 00:06:05,300
Before that we have to keep it in state.

71
00:06:05,400 --> 00:06:10,200
The state to be created is todo.

72
00:06:10,300 --> 00:06:15,100


73
00:06:15,200 --> 00:06:20,000
For understanding the status of typed inputs,

74
00:06:20,100 --> 00:06:24,900
Another state for array list.

75
00:06:25,000 --> 00:06:29,800
We give todo and setTodo

76
00:06:29,900 --> 00:06:34,700
We provide an empty string here.

77
00:06:34,800 --> 00:06:39,600
This done for validation purpose.

78
00:06:39,700 --> 00:06:44,500
We have to show it first.

79
00:06:44,600 --> 00:06:49,400
Now we have to provide value now.

80
00:06:49,500 --> 00:06:54,300


81
00:06:54,400 --> 00:06:59,200
The value provided is toDo

82
00:06:59,300 --> 00:07:04,100
onChange

83
00:07:04,200 --> 00:07:09,000
We called setTodo function

84
00:07:09,100 --> 00:07:13,900


85
00:07:14,000 --> 00:07:18,800


86
00:07:18,900 --> 00:07:23,700
e for event

87
00:07:23,800 --> 00:07:28,600
onChange is common in html.

88
00:07:28,700 --> 00:07:33,500
e.target.value gives the input fields  typing 
value.

89
00:07:33,600 --> 00:07:38,400
We give that in setTodo

90
00:07:38,500 --> 00:07:43,300
That will enter into toDo state and that 
will be displayed.

91
00:07:43,400 --> 00:07:48,200
It is like a cycling.

92
00:07:48,300 --> 00:07:53,100
Now let's check whether it is coming or not

93
00:07:53,200 --> 00:07:58,000
Now let's type here.

94
00:07:58,100 --> 00:08:02,900
What is the next thing to do?

95
00:08:03,000 --> 00:08:07,800
We have to understand one thing here.

96
00:08:07,900 --> 00:08:12,700
Here a value is coming.

97
00:08:12,800 --> 00:08:17,600
Take that code again

98
00:08:17,700 --> 00:08:22,500
We can place a console.log here.

99
00:08:22,600 --> 00:08:27,400
ok no need for a console

100
00:08:27,500 --> 00:08:32,300
Next,

101
00:08:32,400 --> 00:08:37,200
We have to take this toDo and place it in 
toDos.

102
00:08:37,300 --> 00:08:42,100
Where is the plus button?

103
00:08:42,200 --> 00:09:01,700
Data in toDo is taken for validation.

104
00:09:01,800 --> 00:09:06,600
When we press this add button this array 
should be displayed.

105
00:09:06,700 --> 00:09:16,400
What is need for creating another state in 
t his case?

106
00:09:16,500 --> 00:09:21,300
Avoid that state

107
00:09:21,400 --> 00:09:26,200
Can't we provide the data directly when the 
add button pressed?

108
00:09:26,300 --> 00:09:31,100
This is not a form.

109
00:09:31,200 --> 00:09:40,900
Then how we get the data? We can't take the 
data by using documents.getElementbyId

110
00:09:41,000 --> 00:09:50,700
This is normal convention,There is another 
method for multiple input fields

111
00:09:50,800 --> 00:09:55,600
We provide add button here.

112
00:09:55,700 --> 00:10:00,500
And what will you do to take value from here.

113
00:10:00,600 --> 00:10:05,400
You may access it by using getElementById.

114
00:10:05,500 --> 00:10:10,300
But this is the react method.

115
00:10:10,400 --> 00:10:15,200
Create a state for each component and maintain 
that state.

116
00:10:15,300 --> 00:10:20,100
Now let's give action in add button click.

117
00:10:20,200 --> 00:10:25,000
We can provide onClick here.

118
00:10:25,100 --> 00:10:29,900
In onClick give setDo.

119
00:10:30,000 --> 00:10:34,800


120
00:10:34,900 --> 00:10:39,700
We have to pass toDo into setDo

121
00:10:39,800 --> 00:10:44,600
Before that notice this is an array,

122
00:10:44,700 --> 00:10:49,500
There is only one method to add data to an 
array which is push.

123
00:10:49,600 --> 00:10:54,400
But we can't do it here,

124
00:10:54,500 --> 00:10:59,300
So we use the spread operator

125
00:10:59,400 --> 00:11:04,200
You can see the spread operator's application 
here.

126
00:11:04,300 --> 00:11:09,100


127
00:11:09,200 --> 00:11:14,000
We are giving an array a here and spreading 
the toDo inside of it.

128
00:11:14,100 --> 00:11:18,900
And toDo

129
00:11:19,000 --> 00:11:23,800


130
00:11:23,900 --> 00:11:28,700


131
00:11:28,800 --> 00:11:33,600
toDos is already an array,when we spread 
it

132
00:11:33,700 --> 00:11:38,500
It become a