This lesson, we're going to be making the list fully interactive, so so far we have content coming
from a JSON file that also stores to local storage, and that gives us the ability to make some updates.
So variable to toggle the active and not active.
So the different statuses in that state consistent within the my list.
This lesson, we're taking it one step further.
We're going to have the option to remove items from the list and also still be able to refresh the page,
also reload the initial JSON data.
So make a request to the JSON data and load that onto the page.
And then also finally also add to the list.
So adding in additional items into the list.
And these are also going to be interactive.
They're also going to get stored to the local storage.
And then you can also remove these if you need.
This lesson is going to be covering quite a bit.
So let's get start in the last one, we made the list items clickable so we can click on each one of
the list items.
And in this lesson, we want to make them even more dynamic where we can set and make these interactive.
I'm also going to be adding in to the list item, creating a class called Box and adding the box padding
to each one of the items and will set a default width of that and also setting margin.
So top and bottom of 10 picks and right and left of zero and going into the JavaScript as we're constructing
the device.
We can do a class list and add the box class to the elements, so it's going to space them out a little
bit more and also actually let's make this slightly less, so do five and then also adding in a border
and really feint type of border around it so we can see each one of the list items.
So we wanted to have an option that we can add items to the list.
And we also want to have an option where we can remove items from the list.
So right now we've got the ability to click.
We also want to have an option to remove it from the list entirely.
So let's add that in.
And as we're constructing the elements, we're going to append and add in a span to the div and the
span is going to give us an option to remove the items.
So just creating and just as we created the div, we're using create elements and we'll create the span
and then within the span it'll just have some tax content.
And right now we can just have it as an X and then for the div append the span content.
So that gives us our X there.
And also we want to apply some styling to the spane.
We don't have to do anything specific because it's already going to be contained within the box.
So box span and you can set with four of 20 picks, heights of 20 picks.
Border.
And America, red border around it.
And of course, you can style it as needed.
And actually, they're going to decrease the border radius, so it's not as around.
And we'll transform it into an uppercase X, so that gives us an X where we can delete content and also
the color to this to be red.
So it's always going to be red within that element.
So now we've got the Xs and also add in.
Margin to the left, so that keeps the ex slightly off and spend let's add an event listener.
So this event that we're listening for is going to be a click event and fires off the object and well,
right now we'll just track it into the console.
So we're clicking whether we click on the X or not, it's still taking and firing off both click events.
So we want to stop that from happening where it's only going to fire off only the event for the X button.
And there's a method within JavaScript that you can stop the propagation.
And what this will do is this will stop it from moving up to the next level.
So now when I click the X, it's no longer toggling.
It's just firing off that one event.
But if I click the parent and not clicking the span, it's going to allow me to still click and underline
and actually don't like that it is doing the text decoration of the underlying.
So how about we get rid of that altogether?
And there's also options as well that you could do that.
So what we want to do is we want to remove out the X and also for the box span.
Once we hover over it, let's set the cursor to pointer and we'll also update the background color.
So that's slightly off.
So whenever we hover over it, we see there's a slight tint to the X for the color.
And also set the ex to be black, so now whenever they get clicked, what we want to do is we want to
actually remove that particular element.
We have the index value of the element from the list that we can remove.
And we also know which element it is on the page that we can remove as well.
So let's select the parent so div remove and then we're also take the element out of my list.
And because this is an array, we have a way to remove the item using splice.
So within my list, and I'm actually going to move the span down to the bottom.
So it's in my list.
Using JavaScript splice method and we have the index value of where we want to slice, and we were to
remove out one item from the list and we'll console logged on my list just to make sure that it's still
consistent.
And that's one of the real challenges, is to make sure that we're consistent with what the user sees
as well as what we've got within our list.
So we're able to effectively update the list, and that means that we should save it to the local storage
as well.
And I'll create a function.
And I'll create a function just called Sèvres to storage.
So what this one will do is since we're doing the same thing multiple times, it's easier if we just
create and every time we do an update to it, we just run the one function that saves it to storage.
So that's also going to clean up your code as well.
So every time we make an update to the list, make sure that you are saving it to the storage.
So we also want to.
So now that we've removed items, it's actually removed it from the local storage.
So we want to have a way to reload the contents from the JSON file into the local storage.
So let's set that up as well and we'll call it function reload.
So what this will do is this is actually going to reload the contents and that will just run the fetch.
So it gives us an opportunity to kick that off and reload the content from the Web you URL and we can
create a button on the page that will run that.
So button one and using the documents create elements that's creating elements on the page and the element
is going to be a regular button and button one, set the text content, reload JSON data and then whenever
the button one and add an event listener and whatever the button gets clicked, what will happen is
it will run the reloader function.
So let's do a refresh and we need to also add the button on the page, button one, and actually I don't
want to send it to the output as we're clearing the output so we can append it to the document body
and append the button one object to the body.
So that will always give us an opportunity to reload the data back to its initial loading coming from
the adjacent file.
So also, if you want to add to the list, so we just got to make sure that the structure is going to
be the same.
So we need to create two input areas and we can set those up to add to the list.
So let's cretz the inputs as well as the button.
So input one and using the documents and you could do this in regular HTML as well.
So I'm just creating the input and also inputs too.
And this is going to be the number of guests.
So create elements and it's also going to be an input and will change the types.
And then we also need another button and this will be the one that adds up to to the list.
So it creates elements and the element that we're creating is going to be a button.
So let's add all of this to the page will create one main container.
So using the documents create and this is just going to be a div so we can add both the inputs and the
content into the div.
So let's add that in and append to the div.
So div one append and input one div one append inputs two and if one I turned the button two.
And then lastly let's add it to the page so I'd give one to the page.
So that gives us our inputs.
Now let's update it.
So button to text content add to the list.
So give us a button that will add content to the list.
Let's turn this into input one and add via a placeholder so the
input one and set attributes.
So the placeholder
will just say name, so there's the attribute added to that and also for input, two will set the number.
We we don't actually need a placeholder for this because this is actually going to be our type and the
type is going to be No.
So let's do a quick inspect on our Temel, so now that it's a no type, we can move it up and down with
the number.
Also, let's set some default values so and put two and set the value for that to be two.
So it always has a default value.
So that way we don't need the placeholder for it.
And so what we want to happen is whenever the user clicks add to the list, we want to add it to the
list.
So we need to add an event listener to the button.
So taking the button to let's add our event listener to the button to say whenever that button gets
clicked, we want to run the function and we'll just call add to the list and they will create that
function down here where we've got the rest of the functions.
To list and we don't need to pass in any parameters, it's going to get the content from the inputs
and these are global.
So the input one input to our global, let's select those values.
And for now, we're just console lockout's, the input one value.
So we want the current value of whatever the button gets clicked and input to value and let's save that.
So now when we add to here to the list and let me open up the console and we'll clear it so we get the
content from the inputs.
And we also have to make sure that it's consistent with what we have within the JavaScript, the JSON
object.
So we need to have a value for name guests and status.
So let's construct that object.
So our temporary object and having a name and the value for the name is can be whatever we've got for
input, one value and then just comma separated out and then we had four guests and call that input
to value.
So it's the number and then the status by default can always be a boolean value.
So just set it to be false.
So it's going to create the object.
So next up, we want to add this object.
So we want to add it to the list and we also want to add it to our current list.
So my list and push were pushed my object into the my list and want to run the save to storage of the
my list.
So going down to where we're pushing the object into the my list, so always add it into the storage,
so let's see what happens.
So now whenever we refresh, we've got that new item.
But we also want to add it right to the page.
So make to the list so we can get the index value of this item.
And that index values can be whatever the current list.
Length is going to be.
So let's set up, get the value, and this is going to be whatever temporary my list like this.
So this is whatever we've got for the first item there and then before as we're making the list.
We can send the value, which is going to be the index value of the item and then also the might object,
which we can also add to the list.
So that way, as long as our structure is consistent, we should be able to add items to the list and
then they should still function the same way.
We should be able to do a refresh and have all of the items in the list.
We can remove stuff from the list, refresh it, add new items into the list.
Remove items from the list, so they're all interactive and clickable and our list is fully dynamic,
saved into local storage, and if we ever want to refresh our JSON, we could just do a reload of the
geoscience we're getting from the Jason list.
So if we're updating the JSON list, then we can always update and do an update of the content within
the JSON list.
And this lesson, we're going to be almost wrapping up the project where we're going to be adding the
option to reload the JSON data and also adding another button that we can click to remove items from
the list, also having different functions that are going to handle some of the functionality that we've
been creating.
So separating those out so it's more logical within the application and then also adding input elements
that can add to the list.
So dynamically creating those adding those to the page so that whenever we click a button, we can add
items to the end of the list and then also remove stuff from the list and reload the Jason.
So creating the fully dynamic interactive list object.
That's what we're doing in this lesson.
So go ahead and add those to your own project.
And coming up, we're just going to do a quick finalization of the app.