In this lesson, we're going to be doing some quick bug fixes and just going over and reviewing the
content of the previous lesson as we're building out this application.
So the application and it's is an interactive list that you can add new items to the list and then also
remove items, check them, uncheck them and it stores to local stores so that you can fully save and
keep the content that you've updated and added to the list.
So going through originally we were loading the data from the list JSON file and we also have an option
to reload from JSON at any time.
There's also the index file where we added some styling to make it look a little bit better for the
page.
And you can also customize the styling as needed.
So this was just some basic styling or we've added some classes, we created a bunch of elements on
the page.
You can also do this with HTML and then select the elements on the page using the query selector.
So either one, it's your choice with the inputs.
We need it to still pick up and we need to connect to those to get the values and then also the buttons
which make those interactive.
So the only difference really is that you don't have to spend it if you've already got it within the
HTML.
And we also set some attributes.
This is also a good time to just go through your application and make sure everything is working as
expected.
One of the things that's missing is that we can still add blank items to the list.
So let's handle that where we're not going to provide the option to have blank input values.
So when we are making the items for the list and clicking the button.
So to add to list function from the button two and checking to see if there is a value for input one,
and we could take the length and just make sure that the length is larger than three, and if it is
there will add it to the list.
And also whenever we click, let's clear out the current content of the list.
So just set it to clear.
So now if we only have one item, it's not going to add to the list.
If we have four, if we have a value with three characters, it's not going to add it to the list.
So the minimum length is going to be four.
You can adjust that as needed.
And in addition, it's clearing out whatever we've got within the input.
So that gives us the ability to have a blank input and check for that blank input.
So that was one of the things that we did where we split off some of the functionality which made it
easier to select.
We have the main window of that listener that listens whenever the DOM content is loaded.
So that means that the DOM is ready, the elements are on the page and we can start updating.
So this is where we update the current output content to loading.
And we either get it from local storage or we get it from the Thach request.
We create a function to do the loading for the fetch request.
So this also gave us an option to have a button that will quickly launch the same function that loads
the data from the Web you URL.
And in this case, it's going to be loading from the local list duchies on file.
When we're adding to the list, we had to make sure that the structure of the object data is going to
be the same as we've got within our list already.
So that's the most important part of creating these arrays with objects in them that we have the same
structure.
And then that way we don't have to have anything different there.
And we can easily select the name guests and status.
As we know, each one of those is going to contain those values.
And that also makes it easy to add to the list.
We're getting the current list length and that can also serve as the index value when we add a new item
to the end of the list that will then become the index.
Values of the list has five items and that's the length.
The last item within the array is going to have an index of four.
But when we add in one more, that will go up to five and that's where we're able to dynamically generate
that index value.
And that's one of the requirements that we had within the make list function where we've got the object
data and then also the value that we want to add in.
This is the function where we're making the list contents.
So we're looping through the my list and we're generating the visuals for the user to also make it interactive.
And we've got one main core function that creates the page elements, also creates the event listeners
for each one of those.
So that provides some consistency to the elements on the page.
So whether we're adding them from adding to the list or whether they're loaded from the JSON file or
loaded from the local storage, it actually doesn't matter because they're all getting the same output
and the same event listeners added to them.
We also have a function that we were numerous times receiving to local storage.
So we created a function that just saves to the local storage.
So now it's up to you to take what you've learned in the earlier lessons.
Update your JSON file, make it more interactive, and you can also update and upload the JSON file
to a Web URL and then update the Eurail path and load the JSON file into your local in order to practice
and get more familiar with pulling in the JSON data into your JavaScript Web applications.
And one of the best ways to learn is to try the code out for yourself, experiment with it, make some
updates to it and adjustments and customize it to really get familiar with the code that we've covered
in the previous lessons.