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 Claire.
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 like any values in there.
It says if this is a value, a default value is strictly equal to a dollar value, then claire 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 to clear any input that is left hanging around after you've added the task.
So that's what that function is, therefore.
OK, 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 the remove
button will trigger the function and the item will be removed.
All right.
So this function contains two variables called Variable ID, which is set equal to destock get attribute.
This refers to the current DOM element, which has been removed as of the time the user clicks on the
Remove button.
OK, so we return the retrieve the value of its ID attribute using the Get Attribute method.
OK.
This is the index of the specific to do item among the two do items in the database.
OK.
So after retrieving the current list of to do item will 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 you splice to remove.
OK, so once the item has been removed, we use the splice method to remove that ID and then store what's
left in local storage.
OK, Nat, basically what this function done, I note, is again, with this show function here, we've
not defined it yet again.
This show function, what we'll do, it would it will show what's in the database and 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 the show we have been calling.
We've called this function several times within other functions, but here we where we actually define
the function, the show function will display the current to do list stored in the database.
OK, so if you notice the first and it does on line thirty nine with a variable, here is it cause the
get to dos?
OK, so cause to get to Dos to get the list of array of data.
Do items regardless if are empty or not on line.
Forty one, we've got a variable called HTML and set it equals to the value of a tag, which is an own
ordered list.
So here we manually create a snippet of some HTML tag from the variable using using the variable to
set the value.
OK, so the UI element is an ordered list who've also set it up with honor.
That list they need to have an ally item, which is the list item.
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 would be added to each of the list item.
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 to get Element I.D. inside the value of past it to DOS.
What that will do it will insert the newly generated HTML snippet in the original note in the original
document loaded from the server.
All right, so it's not inserted inside HTML.
It actually replaces the content of the element with the ID to DOS.
That's what that means.
OK.
This means in subsequent calls, it will just show the new list regardless of what was the area.
That's basically what it does.
The HTML enables it to do that in the next couple of lines from I'm 49 all the way to fifty one.
So they get elliman 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 a both.
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 is done, the event triggers up the function.
The item is then removed.
As you can see here, we've passed it the the Click Is event and the remove is the function.
OK, so this is the event when you attach an event list, there must be parameters passed.
One will be the first will be the event you're listening out for.
And the second will be the function that will be triggered when that occurs.
So when that occurs, this remove function will come into play and the item will be removed via the
button line 55 years.
It documents get element by ID and move past the ID add, which is the task when you add the task he
got on 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 after you've
added it, it will use it would trigger this function called add and then call this show function here.
All right.
So once that is done, this show functioning, checking out will be called and the list of items will
be displayed.
So that's seat for all the JavaScript codes.
So I'll save that.
And if we are on our app, we should get it working now.
All right, so this is our app complete, at least to some test and see as to.
Careless students,
OK?
They go.
Thanks.
OK, so I that if I refresh, you can see the details 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 F12 12 key should bring up a screen like this and make sure you've got a tab called resources.
If you can't see, just expand it.
And if you see a listed Oh, I am using Google Chrome.
So once you click on resources, you should get this list items here.
So these are the databases or on the local storage.
You expand that and click on file so you can see here the key because local storage stores data 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 it stores them as an array.
So that's basically where your items are stored for the to do list.
So that's it for this project.
Thanks for watching.
I hope he's going to be useful to you.
This is a practical tool that you can use yourself or share with others.
Thanks for watching.
Bye for now.