1 00:00:00,690 --> 00:00:10,860 Hello and welcome to the part two of creating the app functionality using JavaScript. 2 00:00:10,860 --> 00:00:13,170 I have added two functions here. 3 00:00:13,170 --> 00:00:20,180 The first function is called Clear default from line 22 to 25. 4 00:00:20,190 --> 00:00:22,060 What this function will do. 5 00:00:22,080 --> 00:00:23,150 It will clear. 6 00:00:23,170 --> 00:00:31,520 And for example once you've typed teen a task and it will check to make sure that the task is still 7 00:00:31,530 --> 00:00:34,650 not hanging around in the input box. 8 00:00:34,650 --> 00:00:36,560 So that's what this value is means. 9 00:00:36,770 --> 00:00:38,590 Any values in there. 10 00:00:38,640 --> 00:00:47,520 It says if this is a value a default value is truly equals to a dot the value then cleared the value 11 00:00:47,550 --> 00:00:51,840 and set the value which is a the value equals to make it blank. 12 00:00:51,840 --> 00:00:52,530 That's what it means. 13 00:00:52,530 --> 00:00:59,900 So he's basically used to Clay any input that is left hanging around after you've added a task. 14 00:00:59,900 --> 00:01:01,920 So that's what that function is there for. 15 00:01:02,630 --> 00:01:03,080 Okay. 16 00:01:03,090 --> 00:01:12,640 And the second function which is called the remove function from line 27 to 36. 17 00:01:12,660 --> 00:01:13,320 All right. 18 00:01:13,320 --> 00:01:16,070 So what the remove function will do. 19 00:01:16,070 --> 00:01:23,460 It is called when the user clicks on any of the task to remove them. 20 00:01:23,460 --> 00:01:29,580 So if they click on the Remove button on the task they no longer need it will remove that Remove button 21 00:01:30,000 --> 00:01:37,190 will trigger the function and the item will be removed. 22 00:01:37,230 --> 00:01:38,750 All right. 23 00:01:38,850 --> 00:01:46,240 So this function contains two variables called variable I.D. which is set equals to destock get attribute. 24 00:01:46,260 --> 00:01:54,990 This refers to the current DOM element which is being removed as of the time they user clicks on the 25 00:01:54,990 --> 00:01:55,800 removed button. 26 00:01:56,070 --> 00:01:56,670 OK. 27 00:01:56,760 --> 00:01:57,960 So we'd reach the. 28 00:01:57,960 --> 00:02:04,980 Retrieve the value of this I.D. attribute using the get attribute method. 29 00:02:05,450 --> 00:02:05,840 Okay. 30 00:02:05,850 --> 00:02:14,100 This is the index of this specific to do item among the to do items in the database. 31 00:02:14,420 --> 00:02:15,040 Okay. 32 00:02:15,090 --> 00:02:24,390 So after retrieving the current list of to do item we'll use this splice method to remove a specific 33 00:02:24,570 --> 00:02:31,510 element from the javascript array and then we store the new task back in the database. 34 00:02:31,590 --> 00:02:36,930 So you use push to append and they use splice to remove. 35 00:02:36,930 --> 00:02:37,270 Okay. 36 00:02:37,290 --> 00:02:44,550 So once the item has been removed we use the splice method to remove that I.D. and then store what's 37 00:02:44,550 --> 00:02:47,000 left in local storage. 38 00:02:47,010 --> 00:02:47,620 Okay. 39 00:02:47,700 --> 00:02:49,690 Not basically what its function done. 40 00:02:49,740 --> 00:02:55,630 I notice again with core this show function here we've not defined it yet again this show function what 41 00:02:55,640 --> 00:02:56,860 will it hold. 42 00:02:56,970 --> 00:03:05,250 It will show what's in the database how we've set a return value so that nothing else is triggered after 43 00:03:05,250 --> 00:03:10,770 the show function has been called the final function. 44 00:03:10,770 --> 00:03:14,520 We are going to create this one here called a show. 45 00:03:14,520 --> 00:03:15,740 We have been calling. 46 00:03:16,000 --> 00:03:20,520 We have called this function several times within all the functions. 47 00:03:20,580 --> 00:03:28,110 Here we where we actually defined the function the show function will display the current to do list 48 00:03:28,350 --> 00:03:30,720 stored in the database. 49 00:03:30,720 --> 00:03:31,070 Okay. 50 00:03:31,110 --> 00:03:38,670 So if you notice the first thing it does on line thirty nine with a variable here is it cause they get 51 00:03:38,670 --> 00:03:39,810 to dos. 52 00:03:39,810 --> 00:03:51,660 Okay so it caused the get to dos to get the list of array of to do items regardless if you're empty 53 00:03:51,660 --> 00:03:52,790 or not. 54 00:03:53,160 --> 00:04:02,820 On line 41 we've got a variable called 80 AML and set it equal to the value of a tag which is an on 55 00:04:02,910 --> 00:04:04,430 ordered list. 56 00:04:04,440 --> 00:04:13,980 So here we are manually creating snippet of some hate mail tag from these variable using using the variable 57 00:04:13,980 --> 00:04:15,900 to set the value. 58 00:04:15,900 --> 00:04:16,350 Okay. 59 00:04:16,470 --> 00:04:22,240 So the UI element is an ordered list who've also set it up with unordered list. 60 00:04:22,260 --> 00:04:25,680 They need to have an airline item which is a list actor. 61 00:04:26,070 --> 00:04:35,400 So this will be a list item for each of the to do entry in addition to the content of the to dos array. 62 00:04:35,400 --> 00:04:41,450 I've also added a button to each of the list items. 63 00:04:41,460 --> 00:04:41,890 OK. 64 00:04:41,910 --> 00:04:46,890 So you can see here added a button this button will be added as a class. 65 00:04:46,920 --> 00:04:53,640 So it will be added to each of the list items so as you add a task it will automatically insert a button 66 00:04:54,090 --> 00:05:02,120 that users can use to remove the task if they no longer require the top so each of the button belongs 67 00:05:02,120 --> 00:05:11,480 to a class called remove and each button has an I.D. containing the index of the to do item in the list 68 00:05:11,780 --> 00:05:14,360 retrieved from the database. 69 00:05:14,360 --> 00:05:24,690 OK so the buttons will enable the user to remove the item they no longer require from the list. 70 00:05:25,290 --> 00:05:36,120 On line 47 the document should get element by I.D. and inside the value of posted it to dos. 71 00:05:36,330 --> 00:05:46,950 What the hold to a 2 will insert the newly generated hash CML snippet in the original load in the original 72 00:05:46,950 --> 00:05:50,390 document loaded from the server. 73 00:05:50,400 --> 00:05:50,780 All right. 74 00:05:50,790 --> 00:05:58,680 So in light inserted inside HCM app it actually replaces the content of the element with the I.D. to 75 00:05:58,680 --> 00:05:59,480 dos. 76 00:05:59,580 --> 00:06:00,670 That's what that means. 77 00:06:00,720 --> 00:06:01,370 Okay. 78 00:06:01,410 --> 00:06:10,390 This means in subsequent calls it will just show the new list regardless of what was the earlier. 79 00:06:10,410 --> 00:06:20,240 That's basically what it does in other ACMA enables it to do that in the next couple of lines from 49 80 00:06:20,250 --> 00:06:28,290 all the way to fifty one so the get element by class name. 81 00:06:28,290 --> 00:06:36,780 This method is used to fetch all the buttons that are in the removed class. 82 00:06:36,780 --> 00:06:44,100 So these are the buttons we have we added previously added to each of you to do item above. 83 00:06:44,130 --> 00:06:54,560 So to each button we assign a event listener that will listen out for any click on the button. 84 00:06:54,600 --> 00:06:58,020 When that happens it will be triggered. 85 00:06:58,020 --> 00:06:58,490 OK. 86 00:06:58,500 --> 00:07:05,730 Once a user clicks it will be triggered and the connect when the user clicks on the button it triggers 87 00:07:05,730 --> 00:07:17,220 off the function and once the click it's done the event listener triggers up the function the item is 88 00:07:17,220 --> 00:07:22,610 then removed as you can see here we've passed it. 89 00:07:22,720 --> 00:07:27,090 The click is event and the remove is the function. 90 00:07:27,110 --> 00:07:30,560 OK so this is the event when you attach an event listener. 91 00:07:30,570 --> 00:07:32,260 There must be parameters passed. 92 00:07:32,280 --> 00:07:35,710 What would be the first would be the event you're listening for. 93 00:07:35,760 --> 00:07:40,620 And the second will be the function that will be triggered when that occurs. 94 00:07:40,620 --> 00:07:48,680 So when that occurs this remote function will come into play and the item will be removed via the button. 95 00:07:48,850 --> 00:07:51,290 Line fifty five years it documents. 96 00:07:51,360 --> 00:07:59,680 Get element by I.D. and with passed the idea add which is the task when you add in the task it if caught 97 00:07:59,690 --> 00:08:02,830 on even the event list not attached to it as well. 98 00:08:02,850 --> 00:08:10,650 So what happens when you add a task for example and you click if you click on the task that I've added 99 00:08:10,650 --> 00:08:18,900 it it will use it would trigger this function called add and then core this show function here. 100 00:08:18,940 --> 00:08:19,250 All right. 101 00:08:19,260 --> 00:08:25,320 So once that is done this show function here will be called and the list of items will be displayed. 102 00:08:25,830 --> 00:08:28,960 So that's set for all the javascript code. 103 00:08:28,980 --> 00:08:30,430 So I'll save that. 104 00:08:30,590 --> 00:08:34,400 And if we run up we should get it work in there. 105 00:08:35,000 --> 00:08:35,400 All right. 106 00:08:35,400 --> 00:08:37,470 So this is our app complete. 107 00:08:37,500 --> 00:08:41,010 Let's do some tests and see as to 108 00:08:47,200 --> 00:08:48,520 lose to that. 109 00:08:52,730 --> 00:08:53,120 OK. 110 00:08:53,160 --> 00:08:53,810 They go 111 00:08:57,730 --> 00:09:00,720 thanks. 112 00:09:00,960 --> 00:09:01,590 Okay. 113 00:09:01,630 --> 00:09:07,450 So I said that if I refresh you can see the data is too persistent. 114 00:09:07,450 --> 00:09:07,800 All right. 115 00:09:07,830 --> 00:09:12,160 So we can just click to delete if we no longer need that and that will disappear. 116 00:09:12,520 --> 00:09:20,170 So now let me let's see where this data is actually saved so that you know where to look if you need 117 00:09:20,170 --> 00:09:24,760 to to check where the data is stored. 118 00:09:24,760 --> 00:09:28,650 You click on F 12 on your keyboard. 119 00:09:29,020 --> 00:09:33,710 So the F twelve key should bring up a screen like this. 120 00:09:33,790 --> 00:09:36,250 Make sure you've got a tab called resources. 121 00:09:36,280 --> 00:09:38,740 If you can't see just expand it. 122 00:09:38,750 --> 00:09:42,350 And if you see a listed I am using Google Chrome. 123 00:09:42,430 --> 00:09:46,960 So once you click on resources you should get this list items here. 124 00:09:46,960 --> 00:09:50,200 These are the databases on the local storage. 125 00:09:50,200 --> 00:09:57,520 You expand that and click on file so you can see here the key because local storage stores data are 126 00:09:57,520 --> 00:10:00,370 using the key and then a value. 127 00:10:00,370 --> 00:10:08,350 So the key here is to do OK which is this list and these are the values you see of any more list I add 128 00:10:08,350 --> 00:10:09,220 on here. 129 00:10:09,220 --> 00:10:12,970 We just get appended here so you can see the value here is this one. 130 00:10:13,360 --> 00:10:17,410 So if I add another so let me say this count 131 00:10:20,540 --> 00:10:28,840 and I click add and I refresh my browser you see the discount that is popped up there. 132 00:10:28,890 --> 00:10:29,250 All right. 133 00:10:29,250 --> 00:10:31,350 So you just toss them as an array. 134 00:10:31,350 --> 00:10:32,090 You can see the. 135 00:10:32,370 --> 00:10:33,840 The square brackets. 136 00:10:34,110 --> 00:10:35,850 So he stores them as an array. 137 00:10:35,850 --> 00:10:41,050 So that's basically where your item our store for the To Do list. 138 00:10:41,100 --> 00:10:43,650 So that's it for the project. 139 00:10:43,650 --> 00:10:44,940 Thanks for watching. 140 00:10:44,940 --> 00:10:47,160 I hope he's gonna be useful to you. 141 00:10:47,190 --> 00:10:52,290 This is a practical tool that you can use yourself or share with others. 142 00:10:52,290 --> 00:10:53,580 Thanks for watching. 143 00:10:53,580 --> 00:10:54,110 Bye for now.