In this lesson, we're going to make our list content interactive, so it initially loads that from
the JSON data and it stores that within the local storage.
So that's going to make it persistent.
Whenever we refresh the page.
Any changes that we've made are going to stay consistent.
And we're also going to be adding and removing the classes by making the elements interactive and making
them clickable.
And one of the thing that we need to do to make sure within this lesson is that we have a consistent
local data that's going to be consistent with the data that we're saving and that the user is able to
see.
So whenever we make any updates to any of the items on the page, we want to make sure that the statuses
change as well within the local storage so that we're saving the data properly.
So whenever the user refreshes the page and they've made updates to the list, they can still see their
list content available.
So that's what we're doing in this lesson, making it more dynamic and interactive.
In the last lesson, we set up a JSON file and we loaded the data into the Web application that we're
constructing.
So this lesson, we want to make it more interactive so that we can toggle and add the confirmed off
and on and also keep basic global object of the list so that we can start to local storage.
So this is going to be our list object.
I'm going to use let and I'll just call it my list.
So we'll start out by just creating a blank object.
And actually this is going to be an array, so creating a blank list array.
And then as we loop through each one of the list items that we can add that onto the list array.
So taking the list and let's push that element object into it.
And then as we make the list, we can update and we'll actually.
Console, log and output the list content, so that gives us a full list of all of the items that are
coming from the JSON file, and this also gives us a container that we can use in order to store the
contents in there and also just log out the list as we go through.
So we start out by having just one item within the list and then we go to two, three, four and ultimately
five items in the list as we're looping through and we're outputting the list contents and other option
that we have and which probably work a little bit better than this, is to take the my list and equal
the data into the my list.
And then instead of looping through the data, will loop through the my list.
And we don't have to add to the list itself.
So that will allow us to update and add the content of the list.
And now if we check the mildest contents, we see that we have that loaded data, and so now we have
an opportunity to load the data into my list, either from the Fach request or we can load it from the
local storage.
So we want to make and have an option to save it and local save it and load it from the local storage.
So let's set that up as well.
So we're check to see once the page loads and we can separate this out into separate functions, which
is going to make it a lot easier to call the content and just create one called maker.
And once we've got contents in the list, then we can run through Maker.
And this is where we can clear out the output of the HTML, having separate functions to handle all
of these.
Well, make your code a lot cleaner.
Let's also create another one that's going to be local data.
And this is actually going to be getting the content from the browsers local storage, so using the
local storage and we'll also set the content in there.
So checking the local storage.
Let's get the item and we'll look for an item called my list, so we'll load that.
And this is where we can place the conditions once Saddam content has lauded.
Before we make our Futch request, we can check to see if local data.
And if it does exist, then we can look at it from the local data, otherwise we can make our request
to update the list contents.
So let's set my list and set it to the local data.
And using local storage and get item.
And the item that we're getting is the my list.
So let's try that, and we should also be setting the list, so once we make a request, after we run
the maker, let's use the local storage and set item and we'll set the item, my list, and we're going
to equal that to the Jason.
String of fied version of the list.
Data, and as we load it from local, we also need to run through the maker function in order to add
the content on the page.
And the one problem here is that when we get it from the local storage, the list itself isn't going
to be passed as JSON.
So you can add in the JSON pass, it's going to be coming through as a string object.
So we want to avoid that and we want it as a usable JavaScript object.
So that's where you can use the JSON pass.
And then in order to set it into local storage, we need to string of by the JSON data.
So this is going to be an array of data and at any point as well, you could console log out the my
list so you can see the contents that are there.
Also, if you load the local data and you want to see the how it's being contained in there, so it's
going to be saved as a string value in there.
So you see, it's the JSON data is all just regular string content that's sitting within there.
So now we've got a way to store and set the local storage.
We also want to make the list interactive.
So let's add the ability to click on the list and set it to status to true or not.
So let's select the item information.
And as we're making the list, we're also going to send over the index value.
So it's going to send both of the element information and the index and we're going to use the index
in order to update my list data as we're making updates and we're clicking.
So we need a way to make that update.
So let's instead of sending it over to make the list, it's going to also add in the index value.
And the index value can be a way that we can detect what item is needs to be updated in the list.
So let's adding in an event listener.
So add event listener.
The event that we're listening for is a click on the object.
So when it gets clicked, we're going to run the function here.
So whenever it gets clicked.
We're going to toggle these two classes, so let's see if that works.
So now we have an option to toggle the classes and it's not updating the list yet.
So the one that we need to update is the my list.
So whenever it gets clicked, we'll consider log out the list.
And so that way we can make sure that we have a consistent what we've got viewed out on the page is
going to be consistent to what we're using within the my list.
So that third one right now is true, still within the list, but we have to update it still.
So we want to make an update to the content and we want to update the status either to true or to false.
So let's add in one more condition and we'll check to see what the current status is and then we'll
update it accordingly so we can do a condition if div class list contains.
If it contains confirmed and it will contain confirmed now, because we're toggling the confirmed,
so if it contains confirmed solid console lockout's, the class list information, so clear the console.
So we're tracking and we're seeing that now.
It's true and it's true when it's green.
So if it is confirmed, then we're going to take the my list using the index value of index, which
we're passing in over here within the make list.
And we're going to update the status to be true otherwise or else we can update the status to be false.
So it's clear our console.
So right now, Mary is false.
Let's check and make sure that our data is consistent.
So set them all to be false.
And they're all false.
So the one other thing that we need to do when we reload, we're going back to the stored local version.
So whenever we make any updates, we need to once again store the list contents and don't forget to
JSON string of it to store it as a string list.
So now whenever we make updates and we refresh the list, it's going to stay consistent with the existing
content that's on the page.
So go ahead and add the interaction using the classes into your project.
And coming up next, we're going to finish and we'll wrap up the project.
So that's still to come in the next lesson.
Challenge for this lesson is to create a global variables that are going to track your current list,
items are going to need one to track the list current state, as well as the local data and set the
local data value.
Also, create and get the local storage value using the local storage so you can get item and also set
item into the local storage.
And this only takes a string value.
So you have to pass and stratify the JavaScript object from the JSON data in order to output it properly
on the page and also make the list items interactive.
So make them clickable.
Whenever you click on them, they should toggle the classes.
So toggling confirmed and not confirmed classes.
And you can also use and check to see if the element contains that class and checks to see the status,
value and updating those status values in the list.
So you have to also make sure that the current local my list is going to be consistent with what the
user sees on the screen.