1 00:00:00,630 --> 00:00:08,220 Hello and welcome in this lecture, we are going to be creating the functionality for our To-Do app 2 00:00:08,370 --> 00:00:09,960 using JavaScript. 3 00:00:12,360 --> 00:00:12,780 All right. 4 00:00:12,780 --> 00:00:22,080 So we are in our JavaScript file, so we are going to be creating several functions inside these JavaScript 5 00:00:22,080 --> 00:00:26,420 file that will perform various tasks. 6 00:00:28,200 --> 00:00:38,610 The first French function I am going to create here is going to fetch from the database the to dos that 7 00:00:38,610 --> 00:00:40,200 have already been defined. 8 00:00:40,620 --> 00:00:41,010 All right. 9 00:00:41,010 --> 00:00:42,120 So we're going to start there. 10 00:00:42,120 --> 00:00:51,840 Create a function was whose main task is to go to the database and retrieve the to do list that are 11 00:00:51,870 --> 00:00:52,830 in the database. 12 00:00:52,830 --> 00:00:59,640 And we're going to implement this using local storage because we're going to be storing the data inside 13 00:00:59,670 --> 00:01:00,780 our web browser. 14 00:01:02,850 --> 00:01:03,540 OK. 15 00:01:03,570 --> 00:01:06,200 Here is the function I have defined. 16 00:01:06,750 --> 00:01:13,740 This function is going to be used by all of the other functions that will be created later. 17 00:01:14,640 --> 00:01:21,000 So what this function is going to do, as you can see, there's no parameters passed in, if not passed 18 00:01:21,000 --> 00:01:22,080 in any parameters. 19 00:01:22,470 --> 00:01:32,250 The main purpose of this function is to fetch the content of the to do list, which would be a key in 20 00:01:32,250 --> 00:01:33,390 the local storage. 21 00:01:33,750 --> 00:01:41,370 So it would be using the kit item method, which is this method to retrieve the to do list to to do 22 00:01:41,370 --> 00:01:45,450 items that are inside this local storage. 23 00:01:47,220 --> 00:01:56,310 So if this is the first time the function is called, the specific local storage entry will probably 24 00:01:56,310 --> 00:01:57,000 be empty. 25 00:01:57,510 --> 00:01:58,020 OK. 26 00:01:58,290 --> 00:02:04,010 And the local storage to get item call will return null. 27 00:02:04,020 --> 00:02:06,270 That means it will return empty. 28 00:02:08,320 --> 00:02:11,490 So LifeFone here I've introduced an if statement. 29 00:02:11,820 --> 00:02:18,270 So basically what the statement is saying that if the return value is not, not that is. 30 00:02:18,630 --> 00:02:27,840 If it is not empty, then it must be the string string defined data which has been stalled. 31 00:02:28,200 --> 00:02:28,650 All right. 32 00:02:28,950 --> 00:02:39,600 So the JSON here, the JSON pass is used to convert the JSON string back into JavaScript data that the 33 00:02:39,600 --> 00:02:41,190 browser can display. 34 00:02:42,510 --> 00:02:45,210 The return here on May seven is used to. 35 00:02:45,210 --> 00:02:48,630 When you create the function, you can also specify a return value. 36 00:02:49,080 --> 00:02:57,480 So if there's any data in the database, this return value here will return the data that's in the local 37 00:02:57,480 --> 00:02:58,110 storage. 38 00:03:00,930 --> 00:03:06,960 So the function here you define the function by type in the name function, followed by the name you 39 00:03:06,960 --> 00:03:14,370 want to give the function of giving it the name of get on discord to dos and line two and three of basically 40 00:03:14,370 --> 00:03:18,240 variables have created bind to the variables to dos. 41 00:03:18,300 --> 00:03:20,370 C2 equals to a new array. 42 00:03:20,730 --> 00:03:27,000 An array can combine multiple variables as one line three again created. 43 00:03:27,000 --> 00:03:34,170 Another variable called to Dos underscore SDR, which stands for string and of C2 equals to local storage 44 00:03:34,170 --> 00:03:40,230 Typekit item method and passed it the to do which is its variable here. 45 00:03:41,130 --> 00:03:42,840 OK, I've explained Line four. 46 00:03:42,900 --> 00:03:51,210 So if the two does, this variable here is strictly this exclamation and equals means strictly. 47 00:03:51,540 --> 00:03:56,160 If it is strictly not empty, then return. 48 00:03:56,250 --> 00:04:02,370 Then you get this and converted using this to JavaScript. 49 00:04:03,000 --> 00:04:09,150 OK, I'm passing this variable here and return whatever you find in the database. 50 00:04:09,150 --> 00:04:10,110 That's what that say. 51 00:04:12,480 --> 00:04:17,180 So I've created another function from line 10 to 20. 52 00:04:17,200 --> 00:04:19,870 This function is called add. 53 00:04:20,520 --> 00:04:21,000 All right. 54 00:04:21,360 --> 00:04:23,540 So what the function will do? 55 00:04:23,970 --> 00:04:33,270 The function is it will be cold when the user or visitor clicks on the button. 56 00:04:34,020 --> 00:04:39,030 OK, so when the button is clicked on, it will get it would trigger this. 57 00:04:40,560 --> 00:04:44,160 Methods he had documentary element by Idi Anita. 58 00:04:44,280 --> 00:04:52,650 It is passed in task the task, which is the value here, which was defined in the HTML, which is this 59 00:04:52,650 --> 00:04:53,370 task here. 60 00:04:53,670 --> 00:05:00,420 Dusty IDs talking about it, we get that and then add the value that has been imputed. 61 00:05:00,630 --> 00:05:06,450 So it we use that and retrieve the value that the user has typed in. 62 00:05:06,810 --> 00:05:07,230 All right. 63 00:05:07,620 --> 00:05:14,160 So then we what what it then does it cause to get on line 13? 64 00:05:14,160 --> 00:05:19,950 There is called I've got a variable called to dos, which is, of course, to get to Dos. 65 00:05:20,310 --> 00:05:22,170 So he calls it get to dos. 66 00:05:22,380 --> 00:05:27,240 We retrieve the already existing to do items from the database. 67 00:05:27,630 --> 00:05:28,170 All right. 68 00:05:28,530 --> 00:05:29,580 And then when? 69 00:05:29,580 --> 00:05:34,680 And then it is appended to the array using the push method. 70 00:05:35,010 --> 00:05:41,910 So this push method is used to append to a list that is to add to a list using the push method. 71 00:05:42,120 --> 00:05:49,920 So Hussein for these variables attach this method and any task does being listed. 72 00:05:50,160 --> 00:05:56,040 You add if there's any more task you need to add, append it to the existing list. 73 00:05:56,400 --> 00:05:59,700 So the push is used to add a pin. 74 00:06:01,110 --> 00:06:07,350 So once the new list is appended, it is safe to a local storage using the local story. 75 00:06:07,590 --> 00:06:14,520 Set items The Dot set item is what is used to store it inside the local storage. 76 00:06:15,150 --> 00:06:22,620 So to store that what we need to do first, we used the string ify that we have to string ify the array. 77 00:06:22,890 --> 00:06:23,430 OK. 78 00:06:23,790 --> 00:06:27,630 So the using the JSON dot string ify method. 79 00:06:28,320 --> 00:06:36,630 What that does when we store enables us to store the returned string using the local storage to set 80 00:06:36,630 --> 00:06:37,800 item method. 81 00:06:39,150 --> 00:06:44,640 I have called a function here show, but we've not implemented routine that function yet. 82 00:06:45,060 --> 00:06:48,300 But this is where we also call the function from. 83 00:06:48,300 --> 00:06:50,970 So later on, we'll write a function called show. 84 00:06:51,450 --> 00:06:51,900 All right. 85 00:06:52,020 --> 00:06:54,180 Notice notice. 86 00:06:54,180 --> 00:06:57,150 We've got a return value here called force. 87 00:06:57,990 --> 00:07:03,930 So what that does is it avoids any further actions generated by the click events. 88 00:07:03,930 --> 00:07:08,820 So even though the users click it will avoid any further action, thus what that means. 89 00:07:10,560 --> 00:07:17,610 What I'm going to do is split this lecture into fully JavaScript because he's gone on a bit long. 90 00:07:17,610 --> 00:07:23,040 So I'm going to stop this lecture here and we'll continue in part two. 91 00:07:23,490 --> 00:07:24,540 Thanks for watching. 92 00:07:24,900 --> 00:07:25,530 Bye for now.