Welcome back.
In this video, let's talk about another built in API called low cost storage.
And this is the final project that we are going to build while exploring the low cost storage.
So let's get started.
As usual, I have provided the starter template for you.
And again, this section isn't about HTML or CSS or how to select an element.
So let's focus on the actual concept.
So now I have selected all the elements that is a drone and this is a semantic for the HTML.
We have a form with one input field with ID of input and a button, and this one is a section for displaying
lists of to dos or task.
So here we go.
So I have selected the UL as a list container and this one is what I'm referring to.
Let me show you here inside the DOM selection.
So let's go through how I select it.
So for the script, I selected the input element with an ID code input and which is this one.
The next element is the button for delete.
And this one is what I'm referring to with ID code delete.
The next one is going to be the output element, meaning the container where I want to inject the list
of to dos and this is what I'm referring to.
And then lastly, I selected the form where I can add the event listener to submit the form.
So let's get started with the actual concept.
If you open it, you're going to have something like this and this is a final one for the first one,
there is no interactivity with a static text, so let's see how we can make use of the looker storage.
So now let's close this one and now let's get started.
So first of all, let's see how we can add a task.
So here we go, add task.
So what is a low cost or a low cost storage?
It's like a database built in inside our browser where we can save data permanently, but ideally we
normally use to look at storage for authentication, meaning that we can save sessions and tokens inside
the local storage.
If we get to backend development and the authentication and authorization, we save tokens or cookies
or sessions inside local storage.
And one use case about local storage is that if you are developing e-commerce application, you can
save a cart of products of which you want to purchase or you can save the person's shipping address
inside the local storage.
You shouldn't save a bunch of data into local storage.
That is not ideal.
So first is let's see how we can make use of local storage.
And it's pretty simple.
On the window object we have what is called the local storage, but we normally use the local storage
without the window objects.
And this one is perfect.
So to be able to save item into local storage, we are going to use a method called set item and for
this one we pass in two agreements.
One is a key, meaning what is going to hold your values?
And for this our call, this one as a task.
For the meantime, let me call it as first name and then the value.
Let me call it as Emmanuel.
So if I save this one now let's have a look.
Let's open our console by right, click in inspect and now click on application and on the local storage.
Click on the link and you can see that we have key and then the value.
So in this technique we can make use of this to develop an application like this.
So how can we get something from local store, which is pretty simple.
So on the local storage, we have this one as get item.
So here we can assign the result to a variable and make use of local storage dot get item and forget
item.
And to provide the key and the key release here is called first theme.
Sorry I made some type of mistake here is supposed to be first name so guy.
So let's go ahead and then remove that one.
So let's remove everything right click and delete and then right click and delete and there you go.
So as soon as I save it, I'm going to get it back again.
Now it's been saved correctly, so now back here.
So we need to pass in the key, which is the first name here as codes at first.
Then you can use single code or double code.
So inside our console, if I make use of result, you can see I have the answer for Emmanuel and we
can also remove item for local storage.
As the name implies, we are going to use a method called remove and that is it.
So here we go.
Remove.
So you provide the local storage dot remove item, then you provide the key this time around and it
is first name if I save it and now let's check our local storage can see that it is empty.
So this is how we can use the local storage and this common methods like sets get and then remove.
So with this idea we can go ahead and then develop an application like this.
When I add an array, you see that it's been added into the local storage.
So let's get started.
So first step is that let's add task to the local storage.
And to do that we need to get a value.
A user is typing from the form.
So let's remove this once and this ones and this one.
Now let's go ahead and do that.
So cost add task is equal to four.
Therefore I have an event object as that.
So if I console that log the E is I click on add.
Now let's check our console.
You can see that I don't see the event object, meaning that we are not binding the event listener to
the form and to get it done.
You come down here and here we go.
Event listener and together one we bring in the form and on that we add the event listener.
And the event that I want to listen in is called Submit.
Then I'll pass in the ag task function.
So now let's see.
When I hit add you can see that something console.log, but all of a sudden it vanished.
It simply because as soon as I add task, it's refreshing the entire browser.
That's why I couldn't see the console to avoid this one on the event object, we have a method called
prevent default.
Let's try again when I hit st and you can see I have the methods and the properties.
So what I want is that I want the value the user is typing in and I can get it from the input value.
So here I'll make this all the input dot value.
Now let's check it out again.
Let me add let's say shopping and you can see I have shopping.
So with this one I can take this one and save it into local storage.
So let's continue on.
So let's have some road map, meaning some step.
Step number one is we want to check if input is empty, meaning it is a is trying to submit an empty
data.
If look at it, find out why.
If I try to add task without a value, let's look at it.
You can see that I have a message that I please enter it to do or task.
So let's handle this one here.
So here we go.
We make use of eve input element.
The value is equal to empty string meaning empty.
Then we can go ahead and then elect and save that place.
Enter a task.
Okay, so let's see.
Not this one.
This one.
Now let me collapse this one.
Let me hits add.
I can see that.
Please enter a task.
Now we are done with the step one.
Step number two is let's get the item.
Meaning that what I'm trying to save when it be cons task is equal to input element's value.
So here let's check if a user is entering a task.
The first step is that we want to check if we have a variable called task inside our local storage.
So let's declare a variable called tasks here.
So now let's make a check inside our local storage if we have a variable called task.
So let's see, look at storage.
Don't get item name pass in the task.
Great, good.
And then quote here.
If the value is equal to now, then it means that there is no variable called task inside BlueKai storage.
In that way we want to assign to an array because we want to keep array of task that is it.
So else at this point we have a value inside the local storage, so we are going to assign to that and
want to be as low cost storage don't get item and we pass in the tasks.
So let's console.log the tasks and let's see what we are going to get.
I start inside here and then inside here also now moment of truth, right click and let's inspect and
console log and let me add task where I add a value and you can see that I have empty array meaning
that there is no variable called task inside the local storage and indeed there is no variable or task
here.
So let's go ahead and then push a real code into that.
Great.
So after that down here, we know that there is no value inside a task.
So we can go ahead outside the errors, then we take the task array, then we add a push to it and here
we go, because you want to have task of object.
And for this we can add an ID three so that we can easily use it to delete from the local storage and
you can use date to add some dynamic ID into it as date dot.
Now
great.
Then you pass in the title of the task as what the task above, which is this one.
Great.
So in this one we are all set.
So after this one, we need to push the data task into the local storage.
So here we go again, make use of local storage.
Let me say let me have some space here.
And it says that save to storage.
And you're going to be the low cost storage dirt set item.
Then I'm going to pass in the task.
Great.
So now let's save it.
And now let's check.
Let's go paint our look at storage here.
And let me add, let's say shopping.
Okay, I got some error.
And you can see that type error failed to execute set item on storage to remain required.
But only one present.
Sorry.
It means that I need to add a value also as task.
Great.
So now let's add again as shopping.
Let's add and let's check the storage.
And this time around, we can see that we have objects.
Objects.
Okay.
So why is it so?
So to be able to save item into local storage unless we work with string to find it.
So here we are waiting to pass this one to chasing dot string file.
Then we add the task.
So again, let's remove everything from here.
And now let's add a task and let's say shopping.
They can see that I go back a valid object because of the JSON string file and to be able to get back
the actual objects, we need to also pass this one to Jason.
So here we go.
So we're going to cut this one.
The value go to Jason Dot pass.
Then we place our entire value for our storage.
Now everything is intact.
So if I add, for example, let's say walk in, it is being added.
When I say 18 is being added and I can see that I have the ID and a title.
The next step is that I need to vote, inject into the DOM and when I be pretty easy to implement.
So here we go.
It means that we are going to get items from local storage, going to be get items.
So here we go.
Can't get items or get tasks is equal to error function let's task is equal to on define and now let's
search for the task inside.
Look at storage as we did before.
If look at storage, don't get items.
If there is no value on the task which is equal to now meaning there is no value on the task, then
we can go ahead and then re assign task to empty array.
Otherwise we are going to fetch and put it inside the task array and that is equal to Jason Dot pass
as we did before.
Then we pass the entire low cost storage object called get items.
They pass in the variable called task and that is it.
So if I console or log the task now, let's have a look.
So as soon as I add, I want to call this function.
So inside here that is inside our ADD function, I'm going to call the function inside here as get task.
All right, so let's save it.
And now let's check the console and let's add a value call.
Walk in eight.
When I hit add, I can see that I go back all the task inside my local storage.
And for this, in case we have some problem saying that that task is undefined, we need to create a
function before using it so we can bring it here before even adding it.
So it can be here and we can add a command says that get tasks great.
Everything remains the same.
This one is in order, right?
So the next step is that after getting this one, I want to inject into the DOM.
So how are we going to get it done?
Is pretty simple.
So inside a get task here we can create a function to display the data into the DOM, but this one is
not a much.
So let's do everything inside the gate task.
So you're going to be display to Dom.
So let's go.
Let's declare a variable called output and it's undefined and let's declare a variable cost or or task
and it's equal to we take the task we got and then we mop through it, then pass in a callback function.
And in that we have individual task and here you go, we are going to return.
So here we are going to return multiple HTML here.
So I just back tick and some space and inside the HTML this what I want to render this one inside the
container so I will select the item here like that and then back here I will paste it inside here.
And now for the value we're going to get it from the task dot title.
So you bring in the dollar sign carrier basis.
I'm going to be task dot title.
And for the delayed.
There is no event handler for now.
So don't worry.
The next step is that we need to inject the whole of this one into the DOM and this is an output element,
meaning that we are going to inject this element dynamically inside the UL.
So for the meantime, let's comment this one and now let's check and see that nothing seems to be displaying
but going to use JavaScript to add it dynamically.
So here we go.
So after that we are going to use the output element and here you go is going to be the output.
We are assigning this one to the our task supposed to be our task and let's join with the code that
is this.
Paste So with this one, if you console.log the output, let's have a look at the results.
Now, moment of truth.
Let's open our console here and now let's add any value and you can see that this is a valid HTML and
this what I want to render into the DOM.
But if I refuse to join them, let's have a look so I can move this one.
And now let's output the odd task and let's see the structure.
Let me add anything here and you can see that it looks messy.
That is why we are joining all the empty spacing like that.
So here we go from the previous implementation.
Now everything looks nice.
So now that we have a valid HTML, we can go ahead and then take the output element and now we're going
to be the output element dot in HTML and then it's equal to the output.
Hey, now let's remove this one and let me add something.
Let's say walk in and let me hit add and here we go.
We have all of them.
So here what I want to do is that I want to fetch our task as soon as the page load than clicking it
before I will see the task.
So here I can go get task here.
So let me see where the function ends and our call the task and let's see.
And indeed I have list of task and I can add some to it and can see that it's being added.
But I want to clear my input as soon as I add a task.
And we need pretty simple here.
So to clear the input, where is my task, which is this one?
So down here, after everything that's after saving, I want to empty the input as empty.
And easy as the impute value is equal to empty string.
So now let's have a look.
If I add something here.
It's been cleared.
You can see that it's been added down here.
So let's say that I want to add a newly created task at the beginning of my list.
We need to change the push to on shift.
And with this one, we're going to have the new task being on top.
Let's say slipping, hit add.
And you can see that I have sleeping.
So the last concept is how can we delete?
And I want to be pretty simple because we have the ID.
So let's add the comment here called delete task and it's going to be as const remove task.
And for this, we need the ID to move the task.
So here we go.
Let's fetch all the task from the local storage, as we did before.
And let's check if the local storage does not get item and pass in the variable called task.
If it is equal to now, then we can go ahead and then reassign the task to an array.
And if there are some values, then we can go ahead and assign the value to the array so that we can
manipulate that one.
So a here task is equal to JSON dot pass.
Then we pass in the local storage dot get item and then pass in the task and then the task we got in
case we have one.
Now down here we have access to the task.
Right.
So here we go.
We are going to re assign the task to this variable called task.
And here we are going to filter all the tasks using the filter method.
And here we go.
And for this one, we have access to the individual task.
So let's implement the logic.
So we are going to return if the task dot ID is not equal to the one that you pass in upon calling the
function, then we can go ahead and then display the newly array.
So here we can go ahead and then save to the local storage.
So here we go.
Look at storage, dot set item.
Then here we pass in the task and then the change task.
And that is the task.
And lastly, we need to call the function or get task so that we can display the updated one onto the
page.
So lastly, we need to add the event listener on the bottom.
So let's see how we can do that one.
So inside the body here, we are going to add what is called on click and it's equal to the name of
our function, going to be double code.
And here the function is called remove task as a function call.
And here we pass in the value.
And for this we are going to use single code here as that.
And next is we add the dollar sign and then curly braces as that they pass in the task dot ID and that
is it.
So let's save it.
And now let's check our luck and let's click on this one.
Oh, nothing seems to be happening.
So what is a problem?
So first is let's make sure that it's being code.
So inside the remove, let's try to elect and let's see that the event has been called any message.
Everything has been removed.
Let me check mine and let's see the local storage.
Or remember, we saved this kind of data in such low cost storage because we didn't import string or
find it.
So let's empty everything and now let's go ahead and add a new task.
So here you're going to be shopping.
And now let's click on that again and see that the function has been called.
If I click on that and now I think so we have some error here and let's check and you can see that syntax
error object is not a valid JSON.
So let's have a look.
What is the problem here?
So let's remove this one.
The problem is that upon saving, we need to string a file ID.
Sorry, guys, we're going to be as Jason Dot stringer.
Fine.
Then you pass in the newly updated task.
So now let's save it.
Or we can even trash the local storage.
Let's start from scratch.
Great.
So let's add, let's say walk in here and let's hit add.
And indeed I have it.
So if I click on move, well it cannot remove.
The problem is that the ID we got from the function core is a string, but the ID inside a task is a
number.
So if you console.log this that is the task dot id is equal to the ID of God from the function call
you're going to see fault.
So let's check our console here and let's click on remove and indeed it is false.
So we need to convert this ID to a number and we can get that one done in a couple of ways.
We can pass this one to a number and everything we find or we can add plus an ID and it's going to be
the same.
So this one, let's see if I click on this one.
Now you can see that it is true, right?
So now I will change this one to plus meaning I've converted a string to a number.
So now let me collapse this one and let me click on Remove and now everything has to move.
I can add anything here and I can remove.
So here ends the project and look at the rate for our task manager application.