1 00:00:08,360 --> 00:00:09,410 Welcome back. 2 00:00:09,440 --> 00:00:16,490 In this video, let's talk about another built in API called low cost storage. 3 00:00:16,820 --> 00:00:23,370 And this is the final project that we are going to build while exploring the low cost storage. 4 00:00:23,390 --> 00:00:25,070 So let's get started. 5 00:00:25,100 --> 00:00:29,210 As usual, I have provided the starter template for you. 6 00:00:29,210 --> 00:00:35,540 And again, this section isn't about HTML or CSS or how to select an element. 7 00:00:35,540 --> 00:00:38,660 So let's focus on the actual concept. 8 00:00:38,660 --> 00:00:45,820 So now I have selected all the elements that is a drone and this is a semantic for the HTML. 9 00:00:46,220 --> 00:00:55,760 We have a form with one input field with ID of input and a button, and this one is a section for displaying 10 00:00:55,760 --> 00:00:58,460 lists of to dos or task. 11 00:00:58,460 --> 00:01:00,590 So here we go. 12 00:01:00,650 --> 00:01:07,430 So I have selected the UL as a list container and this one is what I'm referring to. 13 00:01:07,460 --> 00:01:10,460 Let me show you here inside the DOM selection. 14 00:01:10,580 --> 00:01:13,400 So let's go through how I select it. 15 00:01:13,400 --> 00:01:21,740 So for the script, I selected the input element with an ID code input and which is this one. 16 00:01:21,800 --> 00:01:24,680 The next element is the button for delete. 17 00:01:24,680 --> 00:01:29,690 And this one is what I'm referring to with ID code delete. 18 00:01:29,810 --> 00:01:36,530 The next one is going to be the output element, meaning the container where I want to inject the list 19 00:01:36,530 --> 00:01:39,620 of to dos and this is what I'm referring to. 20 00:01:40,010 --> 00:01:46,670 And then lastly, I selected the form where I can add the event listener to submit the form. 21 00:01:46,700 --> 00:01:50,030 So let's get started with the actual concept. 22 00:01:50,090 --> 00:01:56,870 If you open it, you're going to have something like this and this is a final one for the first one, 23 00:01:56,870 --> 00:02:04,190 there is no interactivity with a static text, so let's see how we can make use of the looker storage. 24 00:02:04,190 --> 00:02:07,400 So now let's close this one and now let's get started. 25 00:02:07,460 --> 00:02:11,270 So first of all, let's see how we can add a task. 26 00:02:11,270 --> 00:02:14,360 So here we go, add task. 27 00:02:17,610 --> 00:02:20,490 So what is a low cost or a low cost storage? 28 00:02:20,520 --> 00:02:29,040 It's like a database built in inside our browser where we can save data permanently, but ideally we 29 00:02:29,040 --> 00:02:36,450 normally use to look at storage for authentication, meaning that we can save sessions and tokens inside 30 00:02:36,450 --> 00:02:37,740 the local storage. 31 00:02:37,770 --> 00:02:44,790 If we get to backend development and the authentication and authorization, we save tokens or cookies 32 00:02:44,790 --> 00:02:47,460 or sessions inside local storage. 33 00:02:47,460 --> 00:02:53,730 And one use case about local storage is that if you are developing e-commerce application, you can 34 00:02:53,730 --> 00:03:00,300 save a cart of products of which you want to purchase or you can save the person's shipping address 35 00:03:00,300 --> 00:03:01,830 inside the local storage. 36 00:03:01,950 --> 00:03:06,270 You shouldn't save a bunch of data into local storage. 37 00:03:06,360 --> 00:03:07,890 That is not ideal. 38 00:03:07,920 --> 00:03:12,090 So first is let's see how we can make use of local storage. 39 00:03:12,090 --> 00:03:13,500 And it's pretty simple. 40 00:03:13,590 --> 00:03:21,210 On the window object we have what is called the local storage, but we normally use the local storage 41 00:03:21,210 --> 00:03:23,850 without the window objects. 42 00:03:23,850 --> 00:03:25,770 And this one is perfect. 43 00:03:25,890 --> 00:03:34,590 So to be able to save item into local storage, we are going to use a method called set item and for 44 00:03:34,590 --> 00:03:37,650 this one we pass in two agreements. 45 00:03:37,680 --> 00:03:43,080 One is a key, meaning what is going to hold your values? 46 00:03:43,080 --> 00:03:46,310 And for this our call, this one as a task. 47 00:03:46,320 --> 00:03:53,250 For the meantime, let me call it as first name and then the value. 48 00:03:53,280 --> 00:03:55,560 Let me call it as Emmanuel. 49 00:03:55,980 --> 00:03:59,910 So if I save this one now let's have a look. 50 00:03:59,940 --> 00:04:07,740 Let's open our console by right, click in inspect and now click on application and on the local storage. 51 00:04:07,740 --> 00:04:13,160 Click on the link and you can see that we have key and then the value. 52 00:04:13,170 --> 00:04:19,019 So in this technique we can make use of this to develop an application like this. 53 00:04:19,170 --> 00:04:24,190 So how can we get something from local store, which is pretty simple. 54 00:04:24,210 --> 00:04:30,020 So on the local storage, we have this one as get item. 55 00:04:30,030 --> 00:04:39,240 So here we can assign the result to a variable and make use of local storage dot get item and forget 56 00:04:39,240 --> 00:04:39,840 item. 57 00:04:39,840 --> 00:04:44,660 And to provide the key and the key release here is called first theme. 58 00:04:44,670 --> 00:04:50,620 Sorry I made some type of mistake here is supposed to be first name so guy. 59 00:04:50,640 --> 00:04:53,190 So let's go ahead and then remove that one. 60 00:04:53,190 --> 00:04:59,450 So let's remove everything right click and delete and then right click and delete and there you go. 61 00:04:59,460 --> 00:05:02,670 So as soon as I save it, I'm going to get it back again. 62 00:05:02,670 --> 00:05:06,300 Now it's been saved correctly, so now back here. 63 00:05:06,600 --> 00:05:14,700 So we need to pass in the key, which is the first name here as codes at first. 64 00:05:14,700 --> 00:05:18,350 Then you can use single code or double code. 65 00:05:18,360 --> 00:05:27,450 So inside our console, if I make use of result, you can see I have the answer for Emmanuel and we 66 00:05:27,450 --> 00:05:31,470 can also remove item for local storage. 67 00:05:31,590 --> 00:05:37,740 As the name implies, we are going to use a method called remove and that is it. 68 00:05:37,740 --> 00:05:38,790 So here we go. 69 00:05:38,790 --> 00:05:39,390 Remove. 70 00:05:40,140 --> 00:05:50,970 So you provide the local storage dot remove item, then you provide the key this time around and it 71 00:05:50,970 --> 00:05:59,160 is first name if I save it and now let's check our local storage can see that it is empty. 72 00:05:59,160 --> 00:06:08,610 So this is how we can use the local storage and this common methods like sets get and then remove. 73 00:06:08,610 --> 00:06:14,610 So with this idea we can go ahead and then develop an application like this. 74 00:06:14,850 --> 00:06:20,040 When I add an array, you see that it's been added into the local storage. 75 00:06:20,040 --> 00:06:21,960 So let's get started. 76 00:06:22,140 --> 00:06:26,100 So first step is that let's add task to the local storage. 77 00:06:26,100 --> 00:06:28,860 And to do that we need to get a value. 78 00:06:28,860 --> 00:06:31,110 A user is typing from the form. 79 00:06:31,110 --> 00:06:36,000 So let's remove this once and this ones and this one. 80 00:06:36,090 --> 00:06:38,700 Now let's go ahead and do that. 81 00:06:38,700 --> 00:06:44,640 So cost add task is equal to four. 82 00:06:44,640 --> 00:06:48,360 Therefore I have an event object as that. 83 00:06:48,360 --> 00:06:52,770 So if I console that log the E is I click on add. 84 00:06:52,770 --> 00:06:54,750 Now let's check our console. 85 00:06:54,780 --> 00:07:02,070 You can see that I don't see the event object, meaning that we are not binding the event listener to 86 00:07:02,070 --> 00:07:04,800 the form and to get it done. 87 00:07:04,800 --> 00:07:07,710 You come down here and here we go. 88 00:07:07,860 --> 00:07:17,070 Event listener and together one we bring in the form and on that we add the event listener. 89 00:07:17,730 --> 00:07:21,160 And the event that I want to listen in is called Submit. 90 00:07:21,180 --> 00:07:24,530 Then I'll pass in the ag task function. 91 00:07:24,540 --> 00:07:26,010 So now let's see. 92 00:07:26,010 --> 00:07:32,320 When I hit add you can see that something console.log, but all of a sudden it vanished. 93 00:07:32,350 --> 00:07:38,400 It simply because as soon as I add task, it's refreshing the entire browser. 94 00:07:38,430 --> 00:07:47,040 That's why I couldn't see the console to avoid this one on the event object, we have a method called 95 00:07:47,040 --> 00:07:48,600 prevent default. 96 00:07:50,210 --> 00:07:55,820 Let's try again when I hit st and you can see I have the methods and the properties. 97 00:07:55,820 --> 00:08:04,640 So what I want is that I want the value the user is typing in and I can get it from the input value. 98 00:08:04,640 --> 00:08:09,860 So here I'll make this all the input dot value. 99 00:08:10,820 --> 00:08:13,010 Now let's check it out again. 100 00:08:13,040 --> 00:08:18,610 Let me add let's say shopping and you can see I have shopping. 101 00:08:18,620 --> 00:08:23,690 So with this one I can take this one and save it into local storage. 102 00:08:23,690 --> 00:08:25,610 So let's continue on. 103 00:08:25,970 --> 00:08:29,060 So let's have some road map, meaning some step. 104 00:08:29,330 --> 00:08:38,630 Step number one is we want to check if input is empty, meaning it is a is trying to submit an empty 105 00:08:38,630 --> 00:08:39,320 data. 106 00:08:39,679 --> 00:08:41,150 If look at it, find out why. 107 00:08:41,179 --> 00:08:44,930 If I try to add task without a value, let's look at it. 108 00:08:44,930 --> 00:08:49,790 You can see that I have a message that I please enter it to do or task. 109 00:08:49,970 --> 00:08:52,070 So let's handle this one here. 110 00:08:52,100 --> 00:08:53,330 So here we go. 111 00:08:53,360 --> 00:08:57,950 We make use of eve input element. 112 00:08:58,040 --> 00:09:04,730 The value is equal to empty string meaning empty. 113 00:09:04,730 --> 00:09:08,990 Then we can go ahead and then elect and save that place. 114 00:09:10,370 --> 00:09:11,840 Enter a task. 115 00:09:13,370 --> 00:09:15,170 Okay, so let's see. 116 00:09:15,470 --> 00:09:16,550 Not this one. 117 00:09:16,550 --> 00:09:17,420 This one. 118 00:09:17,630 --> 00:09:19,250 Now let me collapse this one. 119 00:09:19,250 --> 00:09:20,420 Let me hits add. 120 00:09:20,420 --> 00:09:21,110 I can see that. 121 00:09:21,110 --> 00:09:22,760 Please enter a task. 122 00:09:22,760 --> 00:09:25,250 Now we are done with the step one. 123 00:09:25,340 --> 00:09:31,070 Step number two is let's get the item. 124 00:09:32,060 --> 00:09:41,990 Meaning that what I'm trying to save when it be cons task is equal to input element's value. 125 00:09:41,990 --> 00:09:46,820 So here let's check if a user is entering a task. 126 00:09:46,940 --> 00:09:54,320 The first step is that we want to check if we have a variable called task inside our local storage. 127 00:09:54,320 --> 00:09:57,800 So let's declare a variable called tasks here. 128 00:09:58,040 --> 00:10:04,820 So now let's make a check inside our local storage if we have a variable called task. 129 00:10:04,820 --> 00:10:07,160 So let's see, look at storage. 130 00:10:07,160 --> 00:10:12,140 Don't get item name pass in the task. 131 00:10:13,010 --> 00:10:14,540 Great, good. 132 00:10:14,540 --> 00:10:16,340 And then quote here. 133 00:10:16,790 --> 00:10:25,550 If the value is equal to now, then it means that there is no variable called task inside BlueKai storage. 134 00:10:25,550 --> 00:10:34,820 In that way we want to assign to an array because we want to keep array of task that is it. 135 00:10:35,120 --> 00:10:43,580 So else at this point we have a value inside the local storage, so we are going to assign to that and 136 00:10:43,580 --> 00:10:50,630 want to be as low cost storage don't get item and we pass in the tasks. 137 00:10:50,930 --> 00:10:55,730 So let's console.log the tasks and let's see what we are going to get. 138 00:10:55,850 --> 00:11:06,650 I start inside here and then inside here also now moment of truth, right click and let's inspect and 139 00:11:06,650 --> 00:11:15,800 console log and let me add task where I add a value and you can see that I have empty array meaning 140 00:11:15,800 --> 00:11:23,420 that there is no variable called task inside the local storage and indeed there is no variable or task 141 00:11:23,420 --> 00:11:24,050 here. 142 00:11:24,050 --> 00:11:28,790 So let's go ahead and then push a real code into that. 143 00:11:29,150 --> 00:11:29,720 Great. 144 00:11:29,720 --> 00:11:36,290 So after that down here, we know that there is no value inside a task. 145 00:11:36,290 --> 00:11:45,560 So we can go ahead outside the errors, then we take the task array, then we add a push to it and here 146 00:11:45,560 --> 00:11:49,730 we go, because you want to have task of object. 147 00:11:49,730 --> 00:11:57,050 And for this we can add an ID three so that we can easily use it to delete from the local storage and 148 00:11:57,050 --> 00:12:03,290 you can use date to add some dynamic ID into it as date dot. 149 00:12:03,290 --> 00:12:04,040 Now 150 00:12:08,150 --> 00:12:08,780 great. 151 00:12:08,810 --> 00:12:16,640 Then you pass in the title of the task as what the task above, which is this one. 152 00:12:17,090 --> 00:12:17,420 Great. 153 00:12:17,420 --> 00:12:19,880 So in this one we are all set. 154 00:12:19,880 --> 00:12:26,090 So after this one, we need to push the data task into the local storage. 155 00:12:26,090 --> 00:12:31,100 So here we go again, make use of local storage. 156 00:12:31,100 --> 00:12:33,710 Let me say let me have some space here. 157 00:12:33,710 --> 00:12:38,540 And it says that save to storage. 158 00:12:41,430 --> 00:12:47,040 And you're going to be the low cost storage dirt set item. 159 00:12:47,070 --> 00:12:50,250 Then I'm going to pass in the task. 160 00:12:53,730 --> 00:12:54,030 Great. 161 00:12:54,030 --> 00:12:55,740 So now let's save it. 162 00:12:55,740 --> 00:12:56,880 And now let's check. 163 00:12:56,880 --> 00:13:00,050 Let's go paint our look at storage here. 164 00:13:00,060 --> 00:13:02,700 And let me add, let's say shopping. 165 00:13:03,740 --> 00:13:05,190 Okay, I got some error. 166 00:13:05,250 --> 00:13:10,410 And you can see that type error failed to execute set item on storage to remain required. 167 00:13:10,410 --> 00:13:11,700 But only one present. 168 00:13:11,700 --> 00:13:12,420 Sorry. 169 00:13:12,660 --> 00:13:16,470 It means that I need to add a value also as task. 170 00:13:16,560 --> 00:13:17,160 Great. 171 00:13:17,160 --> 00:13:22,050 So now let's add again as shopping. 172 00:13:24,990 --> 00:13:27,420 Let's add and let's check the storage. 173 00:13:27,420 --> 00:13:31,650 And this time around, we can see that we have objects. 174 00:13:31,740 --> 00:13:32,700 Objects. 175 00:13:32,940 --> 00:13:33,360 Okay. 176 00:13:33,360 --> 00:13:34,470 So why is it so? 177 00:13:34,590 --> 00:13:41,220 So to be able to save item into local storage unless we work with string to find it. 178 00:13:41,340 --> 00:13:47,580 So here we are waiting to pass this one to chasing dot string file. 179 00:13:47,610 --> 00:13:50,100 Then we add the task. 180 00:13:50,100 --> 00:13:53,520 So again, let's remove everything from here. 181 00:13:53,670 --> 00:13:57,180 And now let's add a task and let's say shopping. 182 00:14:00,560 --> 00:14:08,750 They can see that I go back a valid object because of the JSON string file and to be able to get back 183 00:14:08,750 --> 00:14:13,720 the actual objects, we need to also pass this one to Jason. 184 00:14:13,730 --> 00:14:15,890 So here we go. 185 00:14:16,280 --> 00:14:18,360 So we're going to cut this one. 186 00:14:18,380 --> 00:14:22,490 The value go to Jason Dot pass. 187 00:14:23,990 --> 00:14:28,490 Then we place our entire value for our storage. 188 00:14:28,520 --> 00:14:31,510 Now everything is intact. 189 00:14:31,520 --> 00:14:39,070 So if I add, for example, let's say walk in, it is being added. 190 00:14:39,080 --> 00:14:46,400 When I say 18 is being added and I can see that I have the ID and a title. 191 00:14:46,550 --> 00:14:54,430 The next step is that I need to vote, inject into the DOM and when I be pretty easy to implement. 192 00:14:54,440 --> 00:14:56,120 So here we go. 193 00:14:56,300 --> 00:15:01,940 It means that we are going to get items from local storage, going to be get items. 194 00:15:01,940 --> 00:15:03,350 So here we go. 195 00:15:03,380 --> 00:15:20,480 Can't get items or get tasks is equal to error function let's task is equal to on define and now let's 196 00:15:20,480 --> 00:15:22,640 search for the task inside. 197 00:15:22,640 --> 00:15:24,950 Look at storage as we did before. 198 00:15:25,280 --> 00:15:28,340 If look at storage, don't get items. 199 00:15:28,340 --> 00:15:36,800 If there is no value on the task which is equal to now meaning there is no value on the task, then 200 00:15:36,800 --> 00:15:41,570 we can go ahead and then re assign task to empty array. 201 00:15:42,050 --> 00:15:51,380 Otherwise we are going to fetch and put it inside the task array and that is equal to Jason Dot pass 202 00:15:51,380 --> 00:15:52,760 as we did before. 203 00:15:52,790 --> 00:15:57,740 Then we pass the entire low cost storage object called get items. 204 00:15:57,980 --> 00:16:02,280 They pass in the variable called task and that is it. 205 00:16:02,300 --> 00:16:07,970 So if I console or log the task now, let's have a look. 206 00:16:08,060 --> 00:16:11,450 So as soon as I add, I want to call this function. 207 00:16:11,450 --> 00:16:20,540 So inside here that is inside our ADD function, I'm going to call the function inside here as get task. 208 00:16:21,650 --> 00:16:23,210 All right, so let's save it. 209 00:16:23,210 --> 00:16:28,940 And now let's check the console and let's add a value call. 210 00:16:28,940 --> 00:16:32,000 Walk in eight. 211 00:16:32,000 --> 00:16:39,080 When I hit add, I can see that I go back all the task inside my local storage. 212 00:16:40,040 --> 00:16:46,010 And for this, in case we have some problem saying that that task is undefined, we need to create a 213 00:16:46,010 --> 00:16:50,870 function before using it so we can bring it here before even adding it. 214 00:16:50,870 --> 00:16:57,590 So it can be here and we can add a command says that get tasks great. 215 00:16:57,590 --> 00:16:59,040 Everything remains the same. 216 00:16:59,060 --> 00:17:01,190 This one is in order, right? 217 00:17:01,370 --> 00:17:07,069 So the next step is that after getting this one, I want to inject into the DOM. 218 00:17:07,190 --> 00:17:09,160 So how are we going to get it done? 219 00:17:09,170 --> 00:17:10,300 Is pretty simple. 220 00:17:10,310 --> 00:17:17,720 So inside a get task here we can create a function to display the data into the DOM, but this one is 221 00:17:17,720 --> 00:17:18,440 not a much. 222 00:17:18,440 --> 00:17:21,440 So let's do everything inside the gate task. 223 00:17:21,440 --> 00:17:24,410 So you're going to be display to Dom. 224 00:17:25,430 --> 00:17:26,420 So let's go. 225 00:17:26,450 --> 00:17:37,400 Let's declare a variable called output and it's undefined and let's declare a variable cost or or task 226 00:17:37,760 --> 00:17:46,880 and it's equal to we take the task we got and then we mop through it, then pass in a callback function. 227 00:17:46,880 --> 00:17:53,270 And in that we have individual task and here you go, we are going to return. 228 00:17:53,390 --> 00:17:56,960 So here we are going to return multiple HTML here. 229 00:17:56,960 --> 00:18:05,030 So I just back tick and some space and inside the HTML this what I want to render this one inside the 230 00:18:05,030 --> 00:18:13,280 container so I will select the item here like that and then back here I will paste it inside here. 231 00:18:13,280 --> 00:18:18,920 And now for the value we're going to get it from the task dot title. 232 00:18:19,070 --> 00:18:22,540 So you bring in the dollar sign carrier basis. 233 00:18:22,560 --> 00:18:25,970 I'm going to be task dot title. 234 00:18:26,720 --> 00:18:27,920 And for the delayed. 235 00:18:27,920 --> 00:18:30,110 There is no event handler for now. 236 00:18:30,110 --> 00:18:31,490 So don't worry. 237 00:18:31,550 --> 00:18:39,590 The next step is that we need to inject the whole of this one into the DOM and this is an output element, 238 00:18:39,620 --> 00:18:45,140 meaning that we are going to inject this element dynamically inside the UL. 239 00:18:45,170 --> 00:18:51,770 So for the meantime, let's comment this one and now let's check and see that nothing seems to be displaying 240 00:18:51,770 --> 00:18:55,220 but going to use JavaScript to add it dynamically. 241 00:18:55,250 --> 00:18:57,230 So here we go. 242 00:18:57,230 --> 00:19:05,090 So after that we are going to use the output element and here you go is going to be the output. 243 00:19:05,090 --> 00:19:18,180 We are assigning this one to the our task supposed to be our task and let's join with the code that 244 00:19:18,180 --> 00:19:18,430 is this. 245 00:19:18,440 --> 00:19:26,390 Paste So with this one, if you console.log the output, let's have a look at the results. 246 00:19:26,660 --> 00:19:28,700 Now, moment of truth. 247 00:19:28,700 --> 00:19:37,910 Let's open our console here and now let's add any value and you can see that this is a valid HTML and 248 00:19:37,910 --> 00:19:40,910 this what I want to render into the DOM. 249 00:19:41,090 --> 00:19:46,970 But if I refuse to join them, let's have a look so I can move this one. 250 00:19:47,240 --> 00:19:51,350 And now let's output the odd task and let's see the structure. 251 00:19:51,560 --> 00:19:55,580 Let me add anything here and you can see that it looks messy. 252 00:19:55,580 --> 00:20:01,100 That is why we are joining all the empty spacing like that. 253 00:20:01,100 --> 00:20:05,090 So here we go from the previous implementation. 254 00:20:05,090 --> 00:20:07,310 Now everything looks nice. 255 00:20:07,400 --> 00:20:14,690 So now that we have a valid HTML, we can go ahead and then take the output element and now we're going 256 00:20:14,690 --> 00:20:20,840 to be the output element dot in HTML and then it's equal to the output. 257 00:20:21,340 --> 00:20:26,060 Hey, now let's remove this one and let me add something. 258 00:20:26,060 --> 00:20:32,300 Let's say walk in and let me hit add and here we go. 259 00:20:32,300 --> 00:20:33,890 We have all of them. 260 00:20:34,130 --> 00:20:40,790 So here what I want to do is that I want to fetch our task as soon as the page load than clicking it 261 00:20:40,790 --> 00:20:43,310 before I will see the task. 262 00:20:43,310 --> 00:20:46,850 So here I can go get task here. 263 00:20:46,850 --> 00:20:52,910 So let me see where the function ends and our call the task and let's see. 264 00:20:53,090 --> 00:20:59,150 And indeed I have list of task and I can add some to it and can see that it's being added. 265 00:20:59,150 --> 00:21:04,430 But I want to clear my input as soon as I add a task. 266 00:21:04,430 --> 00:21:06,030 And we need pretty simple here. 267 00:21:06,170 --> 00:21:10,640 So to clear the input, where is my task, which is this one? 268 00:21:10,700 --> 00:21:19,550 So down here, after everything that's after saving, I want to empty the input as empty. 269 00:21:22,030 --> 00:21:29,710 And easy as the impute value is equal to empty string. 270 00:21:30,010 --> 00:21:31,650 So now let's have a look. 271 00:21:31,660 --> 00:21:33,310 If I add something here. 272 00:21:33,340 --> 00:21:34,570 It's been cleared. 273 00:21:34,600 --> 00:21:35,650 It's been cleared. 274 00:21:35,680 --> 00:21:36,580 It's been cleared. 275 00:21:36,610 --> 00:21:37,480 It's been cleared. 276 00:21:37,520 --> 00:21:40,330 You can see that it's been added down here. 277 00:21:40,360 --> 00:21:46,270 So let's say that I want to add a newly created task at the beginning of my list. 278 00:21:46,300 --> 00:21:49,900 We need to change the push to on shift. 279 00:21:51,880 --> 00:21:55,700 And with this one, we're going to have the new task being on top. 280 00:21:55,720 --> 00:21:59,740 Let's say slipping, hit add. 281 00:21:59,770 --> 00:22:01,660 And you can see that I have sleeping. 282 00:22:01,690 --> 00:22:05,230 So the last concept is how can we delete? 283 00:22:05,230 --> 00:22:09,220 And I want to be pretty simple because we have the ID. 284 00:22:09,400 --> 00:22:18,910 So let's add the comment here called delete task and it's going to be as const remove task. 285 00:22:19,030 --> 00:22:22,480 And for this, we need the ID to move the task. 286 00:22:22,780 --> 00:22:24,070 So here we go. 287 00:22:24,100 --> 00:22:29,650 Let's fetch all the task from the local storage, as we did before. 288 00:22:29,950 --> 00:22:40,750 And let's check if the local storage does not get item and pass in the variable called task. 289 00:22:40,780 --> 00:22:49,150 If it is equal to now, then we can go ahead and then reassign the task to an array. 290 00:22:49,600 --> 00:22:56,740 And if there are some values, then we can go ahead and assign the value to the array so that we can 291 00:22:56,740 --> 00:22:57,860 manipulate that one. 292 00:22:57,880 --> 00:23:02,570 So a here task is equal to JSON dot pass. 293 00:23:02,590 --> 00:23:12,190 Then we pass in the local storage dot get item and then pass in the task and then the task we got in 294 00:23:12,190 --> 00:23:13,360 case we have one. 295 00:23:13,630 --> 00:23:16,970 Now down here we have access to the task. 296 00:23:16,990 --> 00:23:17,530 Right. 297 00:23:17,530 --> 00:23:18,760 So here we go. 298 00:23:18,790 --> 00:23:23,610 We are going to re assign the task to this variable called task. 299 00:23:23,620 --> 00:23:28,810 And here we are going to filter all the tasks using the filter method. 300 00:23:29,080 --> 00:23:30,830 And here we go. 301 00:23:30,850 --> 00:23:34,660 And for this one, we have access to the individual task. 302 00:23:34,690 --> 00:23:37,390 So let's implement the logic. 303 00:23:37,630 --> 00:23:47,500 So we are going to return if the task dot ID is not equal to the one that you pass in upon calling the 304 00:23:47,500 --> 00:23:52,840 function, then we can go ahead and then display the newly array. 305 00:23:52,930 --> 00:23:57,140 So here we can go ahead and then save to the local storage. 306 00:23:57,160 --> 00:23:58,300 So here we go. 307 00:23:58,330 --> 00:24:01,990 Look at storage, dot set item. 308 00:24:02,200 --> 00:24:07,300 Then here we pass in the task and then the change task. 309 00:24:07,300 --> 00:24:08,890 And that is the task. 310 00:24:09,310 --> 00:24:15,940 And lastly, we need to call the function or get task so that we can display the updated one onto the 311 00:24:15,940 --> 00:24:16,430 page. 312 00:24:16,450 --> 00:24:20,070 So lastly, we need to add the event listener on the bottom. 313 00:24:20,080 --> 00:24:22,090 So let's see how we can do that one. 314 00:24:22,210 --> 00:24:29,830 So inside the body here, we are going to add what is called on click and it's equal to the name of 315 00:24:29,830 --> 00:24:31,740 our function, going to be double code. 316 00:24:31,750 --> 00:24:37,600 And here the function is called remove task as a function call. 317 00:24:37,630 --> 00:24:40,000 And here we pass in the value. 318 00:24:40,000 --> 00:24:44,380 And for this we are going to use single code here as that. 319 00:24:44,410 --> 00:24:54,250 And next is we add the dollar sign and then curly braces as that they pass in the task dot ID and that 320 00:24:54,250 --> 00:24:54,570 is it. 321 00:24:54,580 --> 00:24:55,600 So let's save it. 322 00:24:55,600 --> 00:24:59,680 And now let's check our luck and let's click on this one. 323 00:24:59,980 --> 00:25:02,380 Oh, nothing seems to be happening. 324 00:25:02,410 --> 00:25:04,210 So what is a problem? 325 00:25:04,450 --> 00:25:08,150 So first is let's make sure that it's being code. 326 00:25:08,170 --> 00:25:15,310 So inside the remove, let's try to elect and let's see that the event has been called any message. 327 00:25:15,340 --> 00:25:16,850 Everything has been removed. 328 00:25:16,870 --> 00:25:22,030 Let me check mine and let's see the local storage. 329 00:25:22,480 --> 00:25:29,730 Or remember, we saved this kind of data in such low cost storage because we didn't import string or 330 00:25:29,740 --> 00:25:30,280 find it. 331 00:25:30,290 --> 00:25:36,670 So let's empty everything and now let's go ahead and add a new task. 332 00:25:36,670 --> 00:25:40,240 So here you're going to be shopping. 333 00:25:40,600 --> 00:25:44,540 And now let's click on that again and see that the function has been called. 334 00:25:44,560 --> 00:25:52,780 If I click on that and now I think so we have some error here and let's check and you can see that syntax 335 00:25:52,780 --> 00:25:56,290 error object is not a valid JSON. 336 00:25:56,290 --> 00:25:58,150 So let's have a look. 337 00:25:58,150 --> 00:26:00,010 What is the problem here? 338 00:26:00,250 --> 00:26:02,090 So let's remove this one. 339 00:26:02,110 --> 00:26:06,010 The problem is that upon saving, we need to string a file ID. 340 00:26:06,010 --> 00:26:11,470 Sorry, guys, we're going to be as Jason Dot stringer. 341 00:26:11,470 --> 00:26:12,190 Fine. 342 00:26:12,280 --> 00:26:15,750 Then you pass in the newly updated task. 343 00:26:15,760 --> 00:26:17,800 So now let's save it. 344 00:26:17,800 --> 00:26:20,530 Or we can even trash the local storage. 345 00:26:21,070 --> 00:26:22,630 Let's start from scratch. 346 00:26:23,110 --> 00:26:23,670 Great. 347 00:26:23,680 --> 00:26:28,450 So let's add, let's say walk in here and let's hit add. 348 00:26:28,450 --> 00:26:30,270 And indeed I have it. 349 00:26:30,280 --> 00:26:34,390 So if I click on move, well it cannot remove. 350 00:26:34,390 --> 00:26:42,640 The problem is that the ID we got from the function core is a string, but the ID inside a task is a 351 00:26:42,640 --> 00:26:43,330 number. 352 00:26:43,330 --> 00:26:52,150 So if you console.log this that is the task dot id is equal to the ID of God from the function call 353 00:26:52,180 --> 00:26:53,260 you're going to see fault. 354 00:26:53,260 --> 00:27:00,130 So let's check our console here and let's click on remove and indeed it is false. 355 00:27:00,250 --> 00:27:06,190 So we need to convert this ID to a number and we can get that one done in a couple of ways. 356 00:27:06,340 --> 00:27:13,570 We can pass this one to a number and everything we find or we can add plus an ID and it's going to be 357 00:27:13,570 --> 00:27:14,230 the same. 358 00:27:14,260 --> 00:27:17,710 So this one, let's see if I click on this one. 359 00:27:17,710 --> 00:27:20,530 Now you can see that it is true, right? 360 00:27:20,530 --> 00:27:27,250 So now I will change this one to plus meaning I've converted a string to a number. 361 00:27:27,490 --> 00:27:33,460 So now let me collapse this one and let me click on Remove and now everything has to move. 362 00:27:33,460 --> 00:27:36,910 I can add anything here and I can remove. 363 00:27:36,910 --> 00:27:42,850 So here ends the project and look at the rate for our task manager application.