Welcome back, my friends.
Welcome to another lecture here, we're going to continue working with our application, our To-Do list
and the things that I want to show you what we are going to build.
Let's build it real quick.
Now, the local storage already commented that one.
I'll just comment that one in the script.
I'm not going to use the local storage anymore.
I'm just going to create new file called to do to do Digest's in here.
I will just link that one in the bottom of this.
And to do now, the thing is that we need to do a couple of things here, the first thing that you need
to do is let's first test it out.
If I still now also sometimes you need to clear the cookies because, yeah, the cookies can be can
make your problem with the application.
So let's see if it's working.
So when I do it here, it's not working.
OK, cool.
Now, one change that I did here, I had a hash.
Just remove that hash if you want.
You don't you're not going to need it in the next part of the course.
So from the local storage, we need this port and let's put it here uncommented and see if it's going
to work.
So local storage is not needed anymore.
Just going to.
And here it is.
It's working now.
One more thing that I just want to say here, there we have a problem here in this, we need to get
it with the hash.
Otherwise this input is not going to work.
Right.
So because we have the idea of Eitam and we just calling without it.
Now, that is pretty much what we need.
So first, I'm going to show you I'm just going to copy this, how you can create this list.
Oops.
And these are the comments from the HTML.
It's not they are not applicable here.
I'm just going to create a multiple comment.
Now, the first thing that I want to do is to create that point.
And after that, we're going to cut it.
So now we're going to say, OK, create an ally element and we're going to use const elai and document
that will be able to document create element in that will be alive.
Now I'm just going to cons along the line, but I'm going to do a couple of things before we do that,
before I showed you.
Now we're going to add a class here allied up class name and not least.
And to do this, I'm just going to copy because I'm going to make mistake.
And then after that, it's not going to work.
Now, the second part that I want to do is you can add an idea if you want.
So Allai idea, but I'm not going to do it.
So the second thing is that you can do is to open the text like text content input.
Text goes here, very good now appen text, this text will come from the form later.
Don't worry about it now.
So we need to create the link now.
So don't worry about this span, because when we create the text is actually going to replace the spent.
I don't need this plan in my application because it's going to.
Yeah, we don't need it.
It's not going to have any difference.
So but I need this one because Ella has two trials at the moment and I need at least this one now.
I'm just going to create again.
But element.
But it's not going to be Ella.
It's going to be a trap.
And I'm going to call it what link and so create element that should be inside that a link.
We should give it a class name link.
That class name in the class name should be this.
Right.
So we are almost done now inside this atrip element, we have another one similar like L.A. have to
Charles, but ATRIP have this one.
So how we can do it, we can just use in our e-mail.
Right.
And create a pen.
Yeah, we can just use inner HTML.
So I'm going to say link that in our e-mail, in quotations.
I'm going to put this in quotes.
I'm going to put this one.
So make sure that you just copy the right thing.
Now, the last thing that we want is to ally to have this child and let's do it.
Not this link, actually.
Now I'm going to refresh and I expect, oops, what happened?
And I expected this one ally class to have this.
Texaco's here.
And we do have.
Let's hope.
Yeah, everything is working.
So we have a class we have the ally, the techies here before we spend, but we remove it now.
It's all good.
One more thing that I need to show you is that we can appended here, right?
It's not in our graphical user interface, but that's easy because you know how to append things.
Now, you can append this to any URL.
And I'm going to see you, all right, because we have created constants for you, though, in Japan,
not bowling alley.
And if I refresh now, it will go here.
OK, now, so we're going to use this, but we're going to put it inside, make ally constants so you
will see why.
So I'm just going to explain a little bit what we're going to do.
So what we are going to do is that we are need to make a function that creates an allied element.
So because we will call it more than once in, we can just call this one line maker.
So I'm going to do it like this.
I'm just going to create a constants.
And the name of that constants will be Mique Ally.
And it will be equal to text, this text will come from the input you will see in a minute and I'm going
to paste here whatever we created, right.
So we are done here.
Actually, I don't want that kind of luck to be visible, and that is pretty much it.
But now it's the time to an event listener in D.C. that listener will watch for a summit event that
every time when we press enter here, I'm just going to refresh.
And I didn't save it.
Oh, OK, yeah, because we spend it here nice.
Doesn't matter.
So every time when we press here and we enter, I just want that to be their right to be visible.
So we're going to create an event listener.
It will be on some me.
So what we're going to do below here, are we going to say form that and even a listener while we attach
the form because the form is actually holding that that input.
Right.
So we're not going to do that with the button you will see in a minute.
So at least one listener, I'm going to say submit here and I'm going to give it the function of this.
Make sure that you close this one.
So either prevent default.
Now, we are just going to call make Elai this councillor's here and we're going to pass input that
value.
So where we're where I have this input, it is the input is there.
Remember, the input is there with the grap with this item and the value is the value actually of this
one.
So actually this will go here, the text.
Now we have one more problem.
You will see why I'm just going to come on.
What's happening here.
So one in text goes here and I need to delete it and say two text goes here.
Right.
Why this is happening?
Because this is hard coded.
Text goes here and you can just add that was just for show.
And I'm just going to say I like text content
and that will be equal to this text, to this text variable.
So if it comes along, it will hold it will hold whatever you put here.
One, two, three.
Now, this bothers me.
I need to constantly.
So now it's working.
But if I refresh, it's all gone because this is not stored in localhost here.
Right.
So stored some gibberish there.
So now I need to say input value to empty why I'm doing this because I'm constantly being annoyed when
I put something here, when I hit enter, it's there now.
One more thing that you can have if you don't have it and it lets it out to complete off right at this
hour to complete because if it wasn't like this before.
So if you follow.
So it will give you whatever you put before.
And I don't want that.
That's annoying as well.
So I completely off and let's say one, two, three, four, five.
Now it's working, but it's not stored in our local storage.
That's why we did it like that's why we had local storage.
We learn about local storage a little bit and we need now to implement it.
So what I'm going to show you now, I'm just going to give it to you a little bit of what we are going
to do.
So below here, actually, we don't need this, actually, we don't need any of this.
But make sure that if you delete something, you don't need it in the future.
Right now, let's create an empty array to start in that empty array.
What we need is and also we need to create a local story to called items now local storage can support
strong values.
Right.
But we want to store our to do list items in an area.
Right.
So that's going to be a little bit tricky.
But we're going to do it so we can get around this by using Jason's Wi-Fi.
And after that, we can convert it to Jason to pass to get the contents of the localhost local storage.
Yeah.
And also, we going to get all that from the local storage into a data variable so we can work a little
bit later.
So everything that I've told you now, we're going to just do it in a couple of lines.
So I'm just going to let.
I am sorry.
So these are really what I'm going to do is I'm going to use the three operators, I'm going to say
local storage like this, get item number.
So and I will say items.
Now, if this is true, so if if the log if the items are we holds this one right at the moment, that's
not true.
I'm just going to say Jason Haaz local storage that get item.
Items.
Now, as I told you, we local storage only supports strong values and we want to store it as item as
an area so we can get around with the adjacent string givi and to convert the data area to a string.
And we also use this adjacent part.
To convert the content of the local storage back to something that we can use right now, this is if.
That is true, or else I'm just going to create an empty array.
That's it.
So we are all covered.
What else we need to do here?
I'm going to see a local storage.
I need to set the item now.
Set item and the key will be items.
Right.
As I explained before, and I need to say, Jason, that stringy five items array.
So why are you saying goodbye?
Because the local storage only supports strong values and I need to convert this area to using Jason's
finger.
So that's pretty much it.
Now, being in, say, constant data that will be equal to Jason that pass.
I'm going to use the same thing to local storage.
Actually, we can copy it, but let's do it again, get item in items.
So now we need this one to convert the contents of the local storage back to something that we can work
and stored in this constant need.
A variable.
Right.
So you can count a lot here.
So lock the items array just to see what's happening.
So at the moment, it's not going to be there and nothing will be there.
It's going to be empty right now.
So here we just push into our console here.
But we're not just saving anything so we can change.
We can upgrade this method here where we are submitting things.
So that is very easy.
So we can add an element here to the items array.
So how we can add we can just push it and I will say input value, whatever we do here, whatever we
do here, it will be pushed to the area.
But what I want also is I want also to push this one to the local storage.
Now, the local storage will not be empty set item.
And I will say, OK, items
here.
Akama, Jason to come on stream if I.
I am sorry, no, let's hope it's going to work.
So one, two, three, now is one to three in the I'm sorry.
Let's see if it is sudheer in one to three in a string format.
But they are the.
Yeah.
So we use Berzon Jassam the string you find just in the past.
So how cool is this.
But the thing is that when I refresh they stay there, but they are not here because they are not coming
from our local storage.
So we will fix that one in future.
It's also good is we will fix it, but at least we know it's working.
And now we do have these.
One, two, three.
How cool is this?
No, we will continue working with our application a little bit later and make sure that you understand
what we have done.
And we will do we will continue working in our next lecture.
We will just yeah, we will just make sure that we are bringing these values here from local storage.
Right.
And the local storage will be like that.
So I have four items when I refresh.
I don't have anything now.
So I just want these four items here from the local storage to be displayed here.
And we will do it with yeah, you will see with a while for loop, we will just loop them here.
Thank you very much.
I hope you enjoyed this one and I will see you in the next one.