1
00:00:00,690 --> 00:00:05,580
In this lesson, we're going to be doing some quick bug fixes and just going over and reviewing the

2
00:00:05,790 --> 00:00:09,230
content of the previous lesson as we're building out this application.

3
00:00:09,540 --> 00:00:15,510
So the application and it's is an interactive list that you can add new items to the list and then also

4
00:00:15,510 --> 00:00:21,750
remove items, check them, uncheck them and it stores to local stores so that you can fully save and

5
00:00:21,750 --> 00:00:25,930
keep the content that you've updated and added to the list.

6
00:00:26,730 --> 00:00:32,940
So going through originally we were loading the data from the list JSON file and we also have an option

7
00:00:32,940 --> 00:00:35,380
to reload from JSON at any time.

8
00:00:36,000 --> 00:00:41,820
There's also the index file where we added some styling to make it look a little bit better for the

9
00:00:41,820 --> 00:00:42,210
page.

10
00:00:44,210 --> 00:00:46,740
And you can also customize the styling as needed.

11
00:00:47,150 --> 00:00:53,060
So this was just some basic styling or we've added some classes, we created a bunch of elements on

12
00:00:53,060 --> 00:00:53,540
the page.

13
00:00:54,020 --> 00:00:59,930
You can also do this with HTML and then select the elements on the page using the query selector.

14
00:00:59,960 --> 00:01:02,570
So either one, it's your choice with the inputs.

15
00:01:03,080 --> 00:01:08,320
We need it to still pick up and we need to connect to those to get the values and then also the buttons

16
00:01:08,340 --> 00:01:09,770
which make those interactive.

17
00:01:10,010 --> 00:01:13,400
So the only difference really is that you don't have to spend it if you've already got it within the

18
00:01:13,400 --> 00:01:14,060
HTML.

19
00:01:14,630 --> 00:01:16,470
And we also set some attributes.

20
00:01:17,120 --> 00:01:21,830
This is also a good time to just go through your application and make sure everything is working as

21
00:01:21,830 --> 00:01:22,380
expected.

22
00:01:22,850 --> 00:01:26,900
One of the things that's missing is that we can still add blank items to the list.

23
00:01:27,140 --> 00:01:32,870
So let's handle that where we're not going to provide the option to have blank input values.

24
00:01:33,410 --> 00:01:37,430
So when we are making the items for the list and clicking the button.

25
00:01:38,960 --> 00:01:45,860
So to add to list function from the button two and checking to see if there is a value for input one,

26
00:01:46,430 --> 00:01:53,330
and we could take the length and just make sure that the length is larger than three, and if it is

27
00:01:54,800 --> 00:01:56,720
there will add it to the list.

28
00:01:58,880 --> 00:02:04,500
And also whenever we click, let's clear out the current content of the list.

29
00:02:05,660 --> 00:02:06,950
So just set it to clear.

30
00:02:07,730 --> 00:02:11,810
So now if we only have one item, it's not going to add to the list.

31
00:02:12,590 --> 00:02:18,940
If we have four, if we have a value with three characters, it's not going to add it to the list.

32
00:02:19,190 --> 00:02:21,230
So the minimum length is going to be four.

33
00:02:21,380 --> 00:02:23,140
You can adjust that as needed.

34
00:02:23,480 --> 00:02:27,130
And in addition, it's clearing out whatever we've got within the input.

35
00:02:27,350 --> 00:02:32,890
So that gives us the ability to have a blank input and check for that blank input.

36
00:02:33,230 --> 00:02:38,120
So that was one of the things that we did where we split off some of the functionality which made it

37
00:02:38,120 --> 00:02:39,230
easier to select.

38
00:02:39,750 --> 00:02:44,750
We have the main window of that listener that listens whenever the DOM content is loaded.

39
00:02:44,870 --> 00:02:49,820
So that means that the DOM is ready, the elements are on the page and we can start updating.

40
00:02:49,970 --> 00:02:54,080
So this is where we update the current output content to loading.

41
00:02:54,260 --> 00:02:59,180
And we either get it from local storage or we get it from the Thach request.

42
00:02:59,390 --> 00:03:03,450
We create a function to do the loading for the fetch request.

43
00:03:03,710 --> 00:03:09,530
So this also gave us an option to have a button that will quickly launch the same function that loads

44
00:03:09,530 --> 00:03:11,940
the data from the Web you URL.

45
00:03:12,650 --> 00:03:16,970
And in this case, it's going to be loading from the local list duchies on file.

46
00:03:17,240 --> 00:03:23,270
When we're adding to the list, we had to make sure that the structure of the object data is going to

47
00:03:23,270 --> 00:03:25,930
be the same as we've got within our list already.

48
00:03:26,510 --> 00:03:33,080
So that's the most important part of creating these arrays with objects in them that we have the same

49
00:03:33,080 --> 00:03:33,830
structure.

50
00:03:33,950 --> 00:03:37,550
And then that way we don't have to have anything different there.

51
00:03:37,550 --> 00:03:40,550
And we can easily select the name guests and status.

52
00:03:40,700 --> 00:03:43,330
As we know, each one of those is going to contain those values.

53
00:03:43,670 --> 00:03:46,250
And that also makes it easy to add to the list.

54
00:03:46,850 --> 00:03:52,880
We're getting the current list length and that can also serve as the index value when we add a new item

55
00:03:52,880 --> 00:03:56,270
to the end of the list that will then become the index.

56
00:03:56,270 --> 00:04:00,050
Values of the list has five items and that's the length.

57
00:04:00,200 --> 00:04:03,950
The last item within the array is going to have an index of four.

58
00:04:04,070 --> 00:04:08,870
But when we add in one more, that will go up to five and that's where we're able to dynamically generate

59
00:04:08,870 --> 00:04:10,670
that index value.

60
00:04:10,850 --> 00:04:15,860
And that's one of the requirements that we had within the make list function where we've got the object

61
00:04:15,860 --> 00:04:18,560
data and then also the value that we want to add in.

62
00:04:19,160 --> 00:04:23,270
This is the function where we're making the list contents.

63
00:04:23,570 --> 00:04:30,380
So we're looping through the my list and we're generating the visuals for the user to also make it interactive.

64
00:04:30,620 --> 00:04:37,550
And we've got one main core function that creates the page elements, also creates the event listeners

65
00:04:37,550 --> 00:04:38,330
for each one of those.

66
00:04:38,570 --> 00:04:42,170
So that provides some consistency to the elements on the page.

67
00:04:42,170 --> 00:04:47,780
So whether we're adding them from adding to the list or whether they're loaded from the JSON file or

68
00:04:47,780 --> 00:04:53,120
loaded from the local storage, it actually doesn't matter because they're all getting the same output

69
00:04:53,120 --> 00:04:55,540
and the same event listeners added to them.

70
00:04:56,180 --> 00:05:01,190
We also have a function that we were numerous times receiving to local storage.

71
00:05:01,910 --> 00:05:05,540
So we created a function that just saves to the local storage.

72
00:05:06,620 --> 00:05:09,800
So now it's up to you to take what you've learned in the earlier lessons.

73
00:05:10,070 --> 00:05:16,280
Update your JSON file, make it more interactive, and you can also update and upload the JSON file

74
00:05:16,280 --> 00:05:24,800
to a Web URL and then update the Eurail path and load the JSON file into your local in order to practice

75
00:05:24,800 --> 00:05:29,410
and get more familiar with pulling in the JSON data into your JavaScript Web applications.

76
00:05:30,590 --> 00:05:35,720
And one of the best ways to learn is to try the code out for yourself, experiment with it, make some

77
00:05:35,720 --> 00:05:42,650
updates to it and adjustments and customize it to really get familiar with the code that we've covered

78
00:05:42,650 --> 00:05:43,640
in the previous lessons.