1 00:00:00,660 --> 00:00:01,680 Hello and welcome. 2 00:00:01,710 --> 00:00:12,440 In this lecture we are going to be creating the functionality for our to do app using JavaScript. 3 00:00:12,440 --> 00:00:12,780 All right. 4 00:00:12,810 --> 00:00:22,110 So we are in our JavaScript file so we are going to be creating several functions inside these JavaScript 5 00:00:22,110 --> 00:00:27,650 file that will perform various task. 6 00:00:28,260 --> 00:00:38,010 The first function function I am going to create here is going to fetch from the database the to dos 7 00:00:38,310 --> 00:00:40,230 that have already been defined. 8 00:00:40,710 --> 00:00:41,030 All right. 9 00:00:41,040 --> 00:00:49,680 So we're going to start there create a function was whose main task is to go to the database and retrieve 10 00:00:50,070 --> 00:00:52,850 the to do list that are in the database. 11 00:00:52,860 --> 00:00:59,610 And we're going to implement this using local storage because we're going to be storing the data inside 12 00:00:59,730 --> 00:01:02,870 our web browser. 13 00:01:02,910 --> 00:01:03,560 Okay. 14 00:01:03,570 --> 00:01:06,590 Here is the function I have defined. 15 00:01:06,810 --> 00:01:13,770 This function is going to be used by all the other functions that will be created later. 16 00:01:14,670 --> 00:01:21,150 So what this function is going to do as you can see there is no parameters passed in if not passed in 17 00:01:21,210 --> 00:01:22,530 any parameters. 18 00:01:22,530 --> 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 19 00:01:32,250 --> 00:01:33,480 the local storage. 20 00:01:33,780 --> 00:01:42,060 So it would be using the cat item method which is this method to retrieve the To Do List to to do items 21 00:01:42,540 --> 00:01:47,280 that inside this local storage. 22 00:01:47,280 --> 00:01:56,520 So if this is the first time the function is called the specific local storage entry will probably be 23 00:01:56,520 --> 00:01:57,000 empty. 24 00:01:57,580 --> 00:01:58,370 OK. 25 00:01:58,420 --> 00:02:03,480 And the local storage to get item call will return. 26 00:02:03,480 --> 00:02:04,110 No. 27 00:02:04,110 --> 00:02:06,240 That means it will return empty. 28 00:02:08,340 --> 00:02:11,520 So line phone here I've introduced an if statement. 29 00:02:11,850 --> 00:02:17,880 So basically what the if statement is saying that if the return value is not no. 30 00:02:17,880 --> 00:02:28,230 That is if it is not empty then it must be the String String defined data which has been stored. 31 00:02:28,230 --> 00:02:28,940 All right. 32 00:02:28,980 --> 00:02:38,310 So the Jason here the JASON That pass is used to convert the Jason string back into a javascript data 33 00:02:38,970 --> 00:02:42,310 that the browser can display. 34 00:02:42,570 --> 00:02:49,110 The return here on Slide 7 is used to when you create a function you can also specify a return value. 35 00:02:49,110 --> 00:02:57,480 So if there is any data in the database this return value here will return the data that's in the local 36 00:02:57,480 --> 00:02:58,200 storage. 37 00:03:00,990 --> 00:03:07,140 So the function here you define a function by type in the name function followed by the name you want 38 00:03:07,140 --> 00:03:08,350 to give the function. 39 00:03:08,460 --> 00:03:15,810 I've given it a name of get on the score to dos and line two and three are basically variables are created 40 00:03:16,300 --> 00:03:24,060 assigned to the variables to dos set it to equals to a new array an array can combine multiple variables 41 00:03:24,150 --> 00:03:31,350 as one line three again created another variable called to dos on the score SDR which cancels string 42 00:03:31,800 --> 00:03:39,870 and offset it to recourse to local storage to get item method on past it the to do which is it's variable 43 00:03:39,870 --> 00:03:40,230 here. 44 00:03:41,130 --> 00:03:42,860 Okay I've explained the line 4. 45 00:03:42,960 --> 00:03:49,550 So if the to dos this variable here is strictly this exclamation. 46 00:03:49,550 --> 00:03:59,070 And W equals means strictly if it is strictly not empty then return then you get this and convert it 47 00:03:59,280 --> 00:04:02,540 using this to JavaScript. 48 00:04:03,060 --> 00:04:09,510 Okay ma'am pass it this variable here and return whatever you find in the data database that's what 49 00:04:09,510 --> 00:04:12,390 that saying. 50 00:04:12,510 --> 00:04:17,230 So I've created another function from line 10 to 20. 51 00:04:17,230 --> 00:04:20,500 This function is called add. 52 00:04:20,580 --> 00:04:21,330 All right. 53 00:04:21,390 --> 00:04:32,580 So what the function will do the function is it will be called when the user or visitor or clicks on 54 00:04:32,580 --> 00:04:33,370 the button. 55 00:04:34,080 --> 00:04:34,510 Okay. 56 00:04:34,520 --> 00:04:41,250 So when the button is clicked on it will get it would trigger this method here. 57 00:04:41,250 --> 00:04:41,880 Document. 58 00:04:41,880 --> 00:04:50,670 Okay element part d I need to it is passed in task the task which is the value here is what you find 59 00:04:50,660 --> 00:04:53,670 in the hasty AML which is this task here. 60 00:04:53,720 --> 00:05:01,140 That's the idea is talking about it will get that and then add the value that has been inputted so it 61 00:05:01,140 --> 00:05:06,850 will use that and retrieve the value that the user has typed in. 62 00:05:06,900 --> 00:05:07,660 All right. 63 00:05:07,680 --> 00:05:14,640 So then we what what it then does it cause to get on line 13 there. 64 00:05:15,030 --> 00:05:20,300 It's called I've Got a variable called to dos which is of course to get to dos. 65 00:05:20,370 --> 00:05:27,710 So he calls it get to dos we retrieve the already existing to do items from the database. 66 00:05:27,720 --> 00:05:28,620 All right. 67 00:05:28,620 --> 00:05:29,640 And then when. 68 00:05:29,670 --> 00:05:35,040 And then it is appended to the array using the push method. 69 00:05:35,040 --> 00:05:42,090 So this push method is used to append to a list that is to add to a list using the push method. 70 00:05:42,170 --> 00:05:51,220 So saying for these variables are touched this method and any task does been listed you add if there's 71 00:05:51,240 --> 00:05:56,340 any more task you need to add appended to the existing list. 72 00:05:56,430 --> 00:05:59,680 So the push is used to add a pen. 73 00:06:01,140 --> 00:06:08,850 So once the a new list is appended it is saved to a local storage using the local sorry dot set items 74 00:06:08,870 --> 00:06:16,620 the top set item is what is used to store it inside the local storage so to store that. 75 00:06:16,620 --> 00:06:22,770 What we need to do first we use the string of fi that we have to string ify the array. 76 00:06:22,970 --> 00:06:28,240 OK so the using the Jason dot string defined method. 77 00:06:28,320 --> 00:06:36,540 What that does when we store enables us to store the returned string using the local storage to set 78 00:06:36,720 --> 00:06:38,820 item method. 79 00:06:39,210 --> 00:06:41,690 I have called a function here. 80 00:06:41,680 --> 00:06:47,970 Sure but we've not implemented written that function yet but this is where we also call the function 81 00:06:47,970 --> 00:06:51,540 from so later on we'll write a function called Show. 82 00:06:51,540 --> 00:06:52,040 All right. 83 00:06:52,050 --> 00:06:57,990 Notice notice we've got a return value here called force. 84 00:06:58,020 --> 00:07:04,830 So what that does it avoids any for their actions generated by the click event so even though the users 85 00:07:04,890 --> 00:07:07,890 click it will avoid any further action. 86 00:07:07,890 --> 00:07:10,650 That's what that means. 87 00:07:10,650 --> 00:07:17,940 What I'm gonna do is split this lecture in two fully javascript because he's gone on a bit long so I'm 88 00:07:17,940 --> 00:07:23,520 going to stop this lecture here and we'll continue in part 2. 89 00:07:23,520 --> 00:07:24,960 Thanks for watching. 90 00:07:24,960 --> 00:07:25,530 Bye for now.