Hello and welcome in this lecture, we are going to be creating the functionality for our To-Do app
using JavaScript.
All right.
So we are in our JavaScript file, so we are going to be creating several functions inside these JavaScript
file that will perform various tasks.
The first French function I am going to create here is going to fetch from the database the to dos that
have already been defined.
All right.
So we're going to start there.
Create a function was whose main task is to go to the database and retrieve the to do list that are
in the database.
And we're going to implement this using local storage because we're going to be storing the data inside
our web browser.
OK.
Here is the function I have defined.
This function is going to be used by all of the other functions that will be created later.
So what this function is going to do, as you can see, there's no parameters passed in, if not passed
in any parameters.
The main purpose of this function is to fetch the content of the to do list, which would be a key in
the local storage.
So it would be using the kit item method, which is this method to retrieve the to do list to to do
items that are inside this local storage.
So if this is the first time the function is called, the specific local storage entry will probably
be empty.
OK.
And the local storage to get item call will return null.
That means it will return empty.
So LifeFone here I've introduced an if statement.
So basically what the statement is saying that if the return value is not, not that is.
If it is not empty, then it must be the string string defined data which has been stalled.
All right.
So the JSON here, the JSON pass is used to convert the JSON string back into JavaScript data that the
browser can display.
The return here on May seven is used to.
When you create the function, you can also specify a return value.
So if there's any data in the database, this return value here will return the data that's in the local
storage.
So the function here you define the function by type in the name function, followed by the name you
want to give the function of giving it the name of get on discord to dos and line two and three of basically
variables have created bind to the variables to dos.
C2 equals to a new array.
An array can combine multiple variables as one line three again created.
Another variable called to Dos underscore SDR, which stands for string and of C2 equals to local storage
Typekit item method and passed it the to do which is its variable here.
OK, I've explained Line four.
So if the two does, this variable here is strictly this exclamation and equals means strictly.
If it is strictly not empty, then return.
Then you get this and converted using this to JavaScript.
OK, I'm passing this variable here and return whatever you find in the database.
That's what that say.
So I've created another function from line 10 to 20.
This function is called add.
All right.
So what the function will do?
The function is it will be cold when the user or visitor clicks on the button.
OK, so when the button is clicked on, it will get it would trigger this.
Methods he had documentary element by Idi Anita.
It is passed in task the task, which is the value here, which was defined in the HTML, which is this
task here.
Dusty IDs talking about it, we get that and then add the value that has been imputed.
So it we use that and retrieve the value that the user has typed in.
All right.
So then we what what it then does it cause to get on line 13?
There is called I've got a variable called to dos, which is, of course, to get to Dos.
So he calls it get to dos.
We retrieve the already existing to do items from the database.
All right.
And then when?
And then it is appended to the array using the push method.
So this push method is used to append to a list that is to add to a list using the push method.
So Hussein for these variables attach this method and any task does being listed.
You add if there's any more task you need to add, append it to the existing list.
So the push is used to add a pin.
So once the new list is appended, it is safe to a local storage using the local story.
Set items The Dot set item is what is used to store it inside the local storage.
So to store that what we need to do first, we used the string ify that we have to string ify the array.
OK.
So the using the JSON dot string ify method.
What that does when we store enables us to store the returned string using the local storage to set
item method.
I have called a function here show, but we've not implemented routine that function yet.
But this is where we also call the function from.
So later on, we'll write a function called show.
All right.
Notice notice.
We've got a return value here called force.
So what that does is it avoids any further actions generated by the click events.
So even though the users click it will avoid any further action, thus what that means.
What I'm going to do is split this lecture into fully JavaScript because he's gone on a bit long.
So I'm going to stop this lecture here and we'll continue in part two.
Thanks for watching.
Bye for now.