Hello and welcome to the part two of creating the app functionality using JavaScript.
I have added two functions here.
The first function is called Clear default from line 22 to 25.
What this function will do.
It will clear.
And for example once you've typed teen a task and it will check to make sure that the task is still
not hanging around in the input box.
So that's what this value is means.
Any values in there.
It says if this is a value a default value is truly equals to a dot the value then cleared the value
and set the value which is a the value equals to make it blank.
That's what it means.
So he's basically used to Clay any input that is left hanging around after you've added a task.
So that's what that function is there for.
Okay.
And the second function which is called the remove function from line 27 to 36.
All right.
So what the remove function will do.
It is called when the user clicks on any of the task to remove them.
So if they click on the Remove button on the task they no longer need it will remove that Remove button
will trigger the function and the item will be removed.
All right.
So this function contains two variables called variable I.D. which is set equals to destock get attribute.
This refers to the current DOM element which is being removed as of the time they user clicks on the
removed button.
OK.
So we'd reach the.
Retrieve the value of this I.D. attribute using the get attribute method.
Okay.
This is the index of this specific to do item among the to do items in the database.
Okay.
So after retrieving the current list of to do item we'll use this splice method to remove a specific
element from the javascript array and then we store the new task back in the database.
So you use push to append and they use splice to remove.
Okay.
So once the item has been removed we use the splice method to remove that I.D. and then store what's
left in local storage.
Okay.
Not basically what its function done.
I notice again with core this show function here we've not defined it yet again this show function what
will it hold.
It will show what's in the database how we've set a return value so that nothing else is triggered after
the show function has been called the final function.
We are going to create this one here called a show.
We have been calling.
We have called this function several times within all the functions.
Here we where we actually defined the function the show function will display the current to do list
stored in the database.
Okay.
So if you notice the first thing it does on line thirty nine with a variable here is it cause they get
to dos.
Okay so it caused the get to dos to get the list of array of to do items regardless if you're empty
or not.
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
ordered list.
So here we are manually creating snippet of some hate mail tag from these variable using using the variable
to set the value.
Okay.
So the UI element is an ordered list who've also set it up with unordered list.
They need to have an airline item which is a list actor.
So this will be a list item for each of the to do entry in addition to the content of the to dos array.
I've also added a button to each of the list items.
OK.
So you can see here added a button this button will be added as a class.
So it will be added to each of the list items so as you add a task it will automatically insert a button
that users can use to remove the task if they no longer require the top so each of the button belongs
to a class called remove and each button has an I.D. containing the index of the to do item in the list
retrieved from the database.
OK so the buttons will enable the user to remove the item they no longer require from the list.
On line 47 the document should get element by I.D. and inside the value of posted it to dos.
What the hold to a 2 will insert the newly generated hash CML snippet in the original load in the original
document loaded from the server.
All right.
So in light inserted inside HCM app it actually replaces the content of the element with the I.D. to
dos.
That's what that means.
Okay.
This means in subsequent calls it will just show the new list regardless of what was the earlier.
That's basically what it does in other ACMA enables it to do that in the next couple of lines from 49
all the way to fifty one so the get element by class name.
This method is used to fetch all the buttons that are in the removed class.
So these are the buttons we have we added previously added to each of you to do item above.
So to each button we assign a event listener that will listen out for any click on the button.
When that happens it will be triggered.
OK.
Once a user clicks it will be triggered and the connect when the user clicks on the button it triggers
off the function and once the click it's done the event listener triggers up the function the item is
then removed as you can see here we've passed it.
The click is event and the remove is the function.
OK so this is the event when you attach an event listener.
There must be parameters passed.
What would be the first would be the event you're listening for.
And the second will be the function that will be triggered when that occurs.
So when that occurs this remote function will come into play and the item will be removed via the button.
Line fifty five years it documents.
Get element by I.D. and with passed the idea add which is the task when you add in the task it if caught
on even the event list not attached to it as well.
So what happens when you add a task for example and you click if you click on the task that I've added
it it will use it would trigger this function called add and then core this show function here.
All right.
So once that is done this show function here will be called and the list of items will be displayed.
So that's set for all the javascript code.
So I'll save that.
And if we run up we should get it work in there.
All right.
So this is our app complete.
Let's do some tests and see as to
lose to that.
OK.
They go
thanks.
Okay.
So I said that if I refresh you can see the data is too persistent.
All right.
So we can just click to delete if we no longer need that and that will disappear.
So now let me let's see where this data is actually saved so that you know where to look if you need
to to check where the data is stored.
You click on F 12 on your keyboard.
So the F twelve key should bring up a screen like this.
Make sure you've got a tab called resources.
If you can't see just expand it.
And if you see a listed I am using Google Chrome.
So once you click on resources you should get this list items here.
These are the databases on the local storage.
You expand that and click on file so you can see here the key because local storage stores data are
using the key and then a value.
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
on here.
We just get appended here so you can see the value here is this one.
So if I add another so let me say this count
and I click add and I refresh my browser you see the discount that is popped up there.
All right.
So you just toss them as an array.
You can see the.
The square brackets.
So he stores them as an array.
So that's basically where your item our store for the To Do list.
So that's it for the project.
Thanks for watching.
I hope he's gonna be useful to you.
This is a practical tool that you can use yourself or share with others.
Thanks for watching.
Bye for now.