1
00:00:00,630 --> 00:00:07,800
Hello and welcome to the part two of creating the app functionality using JavaScript.

2
00:00:10,770 --> 00:00:13,140
I have added two functions here.

3
00:00:13,170 --> 00:00:19,650
The first function is called Clear Default from line 22 to 25.

4
00:00:20,100 --> 00:00:23,160
What this function will do, it will Claire.

5
00:00:23,160 --> 00:00:31,530
And for example, once you've typed teen a task and it will check to make sure that the task is still

6
00:00:31,530 --> 00:00:34,350
not hanging around in the input box.

7
00:00:34,590 --> 00:00:38,100
So that's what this value is like any values in there.

8
00:00:38,580 --> 00:00:47,520
It says if this is a value, a default value is strictly equal to a dollar value, then claire the value

9
00:00:47,520 --> 00:00:51,300
and set the value, which is a the value equals to make it blank.

10
00:00:51,780 --> 00:00:52,520
That's what it means.

11
00:00:52,530 --> 00:00:59,850
So he's basically to clear any input that is left hanging around after you've added the task.

12
00:00:59,860 --> 00:01:01,870
So that's what that function is, therefore.

13
00:01:02,560 --> 00:01:12,060
OK, and the second function, which is called the remove function from line 27 to 36.

14
00:01:12,570 --> 00:01:13,050
All right.

15
00:01:13,290 --> 00:01:16,020
So what the remove function will do?

16
00:01:16,020 --> 00:01:23,430
It is called when the user clicks on any of the task to remove them.

17
00:01:23,430 --> 00:01:29,010
So if they click on the remove button on the task they no longer need, it will remove that the remove

18
00:01:29,010 --> 00:01:36,620
button will trigger the function and the item will be removed.

19
00:01:37,340 --> 00:01:37,840
All right.

20
00:01:38,790 --> 00:01:46,230
So this function contains two variables called Variable ID, which is set equal to destock get attribute.

21
00:01:46,230 --> 00:01:54,990
This refers to the current DOM element, which has been removed as of the time the user clicks on the

22
00:01:54,990 --> 00:01:55,800
Remove button.

23
00:01:55,980 --> 00:02:04,950
OK, so we return the retrieve the value of its ID attribute using the Get Attribute method.

24
00:02:05,370 --> 00:02:05,790
OK.

25
00:02:05,820 --> 00:02:14,070
This is the index of the specific to do item among the two do items in the database.

26
00:02:14,370 --> 00:02:14,820
OK.

27
00:02:15,030 --> 00:02:24,450
So after retrieving the current list of to do item will use this splice method to remove a specific

28
00:02:24,450 --> 00:02:31,170
element from the JavaScript array and then we store the new task back in the database.

29
00:02:31,530 --> 00:02:36,690
So you use push to append and you splice to remove.

30
00:02:36,840 --> 00:02:44,550
OK, so once the item has been removed, we use the splice method to remove that ID and then store what's

31
00:02:44,550 --> 00:02:46,530
left in local storage.

32
00:02:46,950 --> 00:02:53,400
OK, Nat, basically what this function done, I note, is again, with this show function here, we've

33
00:02:53,400 --> 00:02:54,630
not defined it yet again.

34
00:02:54,630 --> 00:03:02,130
This show function, what we'll do, it would it will show what's in the database and we've set a return

35
00:03:02,130 --> 00:03:11,160
value so that nothing else is triggered after the show function has been called the final function we

36
00:03:11,160 --> 00:03:12,360
are going to create.

37
00:03:13,050 --> 00:03:15,690
This one here called the show we have been calling.

38
00:03:16,080 --> 00:03:22,980
We've called this function several times within other functions, but here we where we actually define

39
00:03:22,980 --> 00:03:30,300
the function, the show function will display the current to do list stored in the database.

40
00:03:30,660 --> 00:03:38,310
OK, so if you notice the first and it does on line thirty nine with a variable, here is it cause the

41
00:03:38,310 --> 00:03:39,370
get to dos?

42
00:03:39,720 --> 00:03:48,660
OK, so cause to get to Dos to get the list of array of data.

43
00:03:48,660 --> 00:03:53,720
Do items regardless if are empty or not on line.

44
00:03:53,850 --> 00:04:02,820
Forty one, we've got a variable called HTML and set it equals to the value of a tag, which is an own

45
00:04:02,820 --> 00:04:03,990
ordered list.

46
00:04:04,410 --> 00:04:14,280
So here we manually create a snippet of some HTML tag from the variable using using the variable to

47
00:04:14,280 --> 00:04:15,540
set the value.

48
00:04:15,840 --> 00:04:21,760
OK, so the UI element is an ordered list who've also set it up with honor.

49
00:04:21,780 --> 00:04:25,650
That list they need to have an ally item, which is the list item.

50
00:04:26,010 --> 00:04:30,600
So this will be a list item for each of the to do entry.

51
00:04:31,050 --> 00:04:40,980
In addition to the content of the to dos array, I've also added a button to each of the list items.

52
00:04:41,370 --> 00:04:44,090
OK, so you can see here added a button.

53
00:04:44,100 --> 00:04:49,140
This button will be added as a class, so it would be added to each of the list item.

54
00:04:49,140 --> 00:04:56,790
So as you add a task, it will automatically insert a button that users can use to remove the task if

55
00:04:56,790 --> 00:04:59,160
they no longer require the top.

56
00:05:00,020 --> 00:05:08,360
So each of the button belongs to a class called Remove, and each button has an I.D. containing the

57
00:05:08,360 --> 00:05:13,970
index of the to do item in the list retrieved from the database.

58
00:05:14,270 --> 00:05:14,750
OK.

59
00:05:16,660 --> 00:05:26,350
So the buttons will enable the user to remove the item they no longer require from the list on line

60
00:05:26,350 --> 00:05:35,680
47, the document to get Element I.D. inside the value of past it to DOS.

61
00:05:36,250 --> 00:05:46,930
What that will do it will insert the newly generated HTML snippet in the original note in the original

62
00:05:46,930 --> 00:05:49,900
document loaded from the server.

63
00:05:50,320 --> 00:05:53,160
All right, so it's not inserted inside HTML.

64
00:05:53,650 --> 00:05:59,200
It actually replaces the content of the element with the ID to DOS.

65
00:05:59,530 --> 00:06:00,490
That's what that means.

66
00:06:00,700 --> 00:06:01,000
OK.

67
00:06:01,330 --> 00:06:09,850
This means in subsequent calls, it will just show the new list regardless of what was the area.

68
00:06:10,360 --> 00:06:11,770
That's basically what it does.

69
00:06:12,130 --> 00:06:22,650
The HTML enables it to do that in the next couple of lines from I'm 49 all the way to fifty one.

70
00:06:23,080 --> 00:06:27,670
So they get elliman by class name.

71
00:06:28,270 --> 00:06:36,220
This method is used to fetch all the buttons that are in the removed class.

72
00:06:36,760 --> 00:06:43,690
So these are the buttons we have, we added, previously added to each of you to do item a both.

73
00:06:44,080 --> 00:06:54,160
So to each button, we assign a event listener that will listen out for any click on the button.

74
00:06:54,520 --> 00:06:57,220
When that happens, it will be triggered.

75
00:06:57,940 --> 00:06:58,450
OK?

76
00:06:58,480 --> 00:07:03,580
Once a user clicks, it will be triggered and the connect.

77
00:07:03,580 --> 00:07:08,110
When the user clicks on the button, it triggers off the function.

78
00:07:10,180 --> 00:07:15,590
And once the click is done, the event triggers up the function.

79
00:07:15,610 --> 00:07:18,250
The item is then removed.

80
00:07:20,450 --> 00:07:26,450
As you can see here, we've passed it the the Click Is event and the remove is the function.

81
00:07:27,020 --> 00:07:32,210
OK, so this is the event when you attach an event list, there must be parameters passed.

82
00:07:32,220 --> 00:07:35,240
One will be the first will be the event you're listening out for.

83
00:07:35,720 --> 00:07:40,280
And the second will be the function that will be triggered when that occurs.

84
00:07:40,580 --> 00:07:47,720
So when that occurs, this remove function will come into play and the item will be removed via the

85
00:07:47,720 --> 00:07:50,210
button line 55 years.

86
00:07:50,210 --> 00:07:59,030
It documents get element by ID and move past the ID add, which is the task when you add the task he

87
00:07:59,420 --> 00:08:02,300
got on the event list, not attached to it as well.

88
00:08:02,780 --> 00:08:10,310
So what happens when you add a task, for example, and you click if you click on the task after you've

89
00:08:10,310 --> 00:08:18,410
added it, it will use it would trigger this function called add and then call this show function here.

90
00:08:18,890 --> 00:08:19,250
All right.

91
00:08:19,250 --> 00:08:24,140
So once that is done, this show functioning, checking out will be called and the list of items will

92
00:08:24,140 --> 00:08:25,280
be displayed.

93
00:08:25,790 --> 00:08:28,970
So that's seat for all the JavaScript codes.

94
00:08:28,970 --> 00:08:30,110
So I'll save that.

95
00:08:30,560 --> 00:08:33,580
And if we are on our app, we should get it working now.

96
00:08:34,940 --> 00:08:41,000
All right, so this is our app complete, at least to some test and see as to.

97
00:08:46,900 --> 00:08:48,460
Careless students,

98
00:08:52,380 --> 00:08:52,780
OK?

99
00:08:53,140 --> 00:08:53,770
They go.

100
00:08:57,710 --> 00:08:58,430
Thanks.

101
00:09:01,160 --> 00:09:06,800
OK, so I that if I refresh, you can see the details too persistent.

102
00:09:07,340 --> 00:09:07,790
All right.

103
00:09:07,790 --> 00:09:12,140
So we can just click to delete if we no longer need that and that will disappear.

104
00:09:12,500 --> 00:09:20,150
So now let me let's see where this data is actually saved so that you know where to look if you need

105
00:09:20,150 --> 00:09:24,200
to to check where the data is stored.

106
00:09:24,680 --> 00:09:28,070
You click on F 12 on your keyboard.

107
00:09:28,970 --> 00:09:36,220
So the F12 12 key should bring up a screen like this and make sure you've got a tab called resources.

108
00:09:36,230 --> 00:09:38,180
If you can't see, just expand it.

109
00:09:38,630 --> 00:09:42,110
And if you see a listed Oh, I am using Google Chrome.

110
00:09:42,380 --> 00:09:46,490
So once you click on resources, you should get this list items here.

111
00:09:46,860 --> 00:09:50,150
So these are the databases or on the local storage.

112
00:09:50,150 --> 00:09:57,950
You expand that and click on file so you can see here the key because local storage stores data using

113
00:09:57,950 --> 00:10:00,050
the key and then a value.

114
00:10:00,320 --> 00:10:07,880
So the key here is to do OK, which is this list and these are the values you see of any more list.

115
00:10:07,880 --> 00:10:08,810
I add on here.

116
00:10:09,140 --> 00:10:12,710
We just get appended here so you can see the value here is this one.

117
00:10:13,310 --> 00:10:17,360
So if I add another, so let me say this count.

118
00:10:20,570 --> 00:10:24,860
And I click Add and I refresh my browser.

119
00:10:26,000 --> 00:10:28,460
You see the discount that is popped up there.

120
00:10:28,820 --> 00:10:29,210
All right.

121
00:10:29,210 --> 00:10:31,330
So you just toss them as an array.

122
00:10:31,340 --> 00:10:33,500
You can see the the square brackets.

123
00:10:34,040 --> 00:10:35,840
So it stores them as an array.

124
00:10:35,840 --> 00:10:40,700
So that's basically where your items are stored for the to do list.

125
00:10:41,060 --> 00:10:43,310
So that's it for this project.

126
00:10:43,610 --> 00:10:44,840
Thanks for watching.

127
00:10:44,870 --> 00:10:46,850
I hope he's going to be useful to you.

128
00:10:47,150 --> 00:10:51,860
This is a practical tool that you can use yourself or share with others.

129
00:10:52,250 --> 00:10:53,210
Thanks for watching.

130
00:10:53,510 --> 00:10:54,110
Bye for now.