1 00:00:00,330 --> 00:00:05,970 In this lesson, we're going to make our list content interactive, so it initially loads that from 2 00:00:05,970 --> 00:00:10,740 the JSON data and it stores that within the local storage. 3 00:00:10,760 --> 00:00:12,440 So that's going to make it persistent. 4 00:00:12,450 --> 00:00:14,210 Whenever we refresh the page. 5 00:00:14,370 --> 00:00:17,300 Any changes that we've made are going to stay consistent. 6 00:00:17,580 --> 00:00:22,770 And we're also going to be adding and removing the classes by making the elements interactive and making 7 00:00:22,770 --> 00:00:23,420 them clickable. 8 00:00:23,970 --> 00:00:29,520 And one of the thing that we need to do to make sure within this lesson is that we have a consistent 9 00:00:29,730 --> 00:00:35,190 local data that's going to be consistent with the data that we're saving and that the user is able to 10 00:00:35,190 --> 00:00:35,480 see. 11 00:00:35,730 --> 00:00:42,420 So whenever we make any updates to any of the items on the page, we want to make sure that the statuses 12 00:00:42,420 --> 00:00:47,810 change as well within the local storage so that we're saving the data properly. 13 00:00:47,940 --> 00:00:53,160 So whenever the user refreshes the page and they've made updates to the list, they can still see their 14 00:00:53,160 --> 00:00:54,780 list content available. 15 00:00:55,050 --> 00:00:59,640 So that's what we're doing in this lesson, making it more dynamic and interactive. 16 00:01:00,420 --> 00:01:06,690 In the last lesson, we set up a JSON file and we loaded the data into the Web application that we're 17 00:01:06,690 --> 00:01:07,300 constructing. 18 00:01:07,320 --> 00:01:14,310 So this lesson, we want to make it more interactive so that we can toggle and add the confirmed off 19 00:01:14,310 --> 00:01:21,940 and on and also keep basic global object of the list so that we can start to local storage. 20 00:01:22,230 --> 00:01:24,620 So this is going to be our list object. 21 00:01:24,630 --> 00:01:29,280 I'm going to use let and I'll just call it my list. 22 00:01:29,760 --> 00:01:33,180 So we'll start out by just creating a blank object. 23 00:01:33,630 --> 00:01:38,760 And actually this is going to be an array, so creating a blank list array. 24 00:01:39,150 --> 00:01:46,450 And then as we loop through each one of the list items that we can add that onto the list array. 25 00:01:46,980 --> 00:01:53,180 So taking the list and let's push that element object into it. 26 00:01:53,820 --> 00:01:59,340 And then as we make the list, we can update and we'll actually. 27 00:02:01,850 --> 00:02:13,310 Console, log and output the list content, so that gives us a full list of all of the items that are 28 00:02:13,310 --> 00:02:21,830 coming from the JSON file, and this also gives us a container that we can use in order to store the 29 00:02:21,830 --> 00:02:27,570 contents in there and also just log out the list as we go through. 30 00:02:29,960 --> 00:02:38,720 So we start out by having just one item within the list and then we go to two, three, four and ultimately 31 00:02:38,720 --> 00:02:46,070 five items in the list as we're looping through and we're outputting the list contents and other option 32 00:02:46,070 --> 00:02:54,950 that we have and which probably work a little bit better than this, is to take the my list and equal 33 00:02:54,950 --> 00:02:56,660 the data into the my list. 34 00:02:57,140 --> 00:03:02,300 And then instead of looping through the data, will loop through the my list. 35 00:03:02,300 --> 00:03:04,330 And we don't have to add to the list itself. 36 00:03:05,540 --> 00:03:10,160 So that will allow us to update and add the content of the list. 37 00:03:11,660 --> 00:03:18,290 And now if we check the mildest contents, we see that we have that loaded data, and so now we have 38 00:03:18,290 --> 00:03:26,690 an opportunity to load the data into my list, either from the Fach request or we can load it from the 39 00:03:26,690 --> 00:03:27,770 local storage. 40 00:03:27,990 --> 00:03:34,410 So we want to make and have an option to save it and local save it and load it from the local storage. 41 00:03:35,030 --> 00:03:37,040 So let's set that up as well. 42 00:03:37,670 --> 00:03:46,190 So we're check to see once the page loads and we can separate this out into separate functions, which 43 00:03:46,190 --> 00:03:53,420 is going to make it a lot easier to call the content and just create one called maker. 44 00:03:55,310 --> 00:03:59,950 And once we've got contents in the list, then we can run through Maker. 45 00:04:01,640 --> 00:04:08,570 And this is where we can clear out the output of the HTML, having separate functions to handle all 46 00:04:08,570 --> 00:04:09,190 of these. 47 00:04:09,200 --> 00:04:11,270 Well, make your code a lot cleaner. 48 00:04:11,720 --> 00:04:15,470 Let's also create another one that's going to be local data. 49 00:04:15,890 --> 00:04:22,730 And this is actually going to be getting the content from the browsers local storage, so using the 50 00:04:22,730 --> 00:04:26,440 local storage and we'll also set the content in there. 51 00:04:26,720 --> 00:04:29,060 So checking the local storage. 52 00:04:30,470 --> 00:04:37,850 Let's get the item and we'll look for an item called my list, so we'll load that. 53 00:04:38,300 --> 00:04:42,350 And this is where we can place the conditions once Saddam content has lauded. 54 00:04:42,560 --> 00:04:47,570 Before we make our Futch request, we can check to see if local data. 55 00:04:50,610 --> 00:04:57,180 And if it does exist, then we can look at it from the local data, otherwise we can make our request 56 00:04:57,420 --> 00:04:59,630 to update the list contents. 57 00:05:00,060 --> 00:05:05,310 So let's set my list and set it to the local data. 58 00:05:06,750 --> 00:05:11,610 And using local storage and get item. 59 00:05:13,210 --> 00:05:16,240 And the item that we're getting is the my list. 60 00:05:18,130 --> 00:05:25,180 So let's try that, and we should also be setting the list, so once we make a request, after we run 61 00:05:25,180 --> 00:05:36,070 the maker, let's use the local storage and set item and we'll set the item, my list, and we're going 62 00:05:36,070 --> 00:05:38,770 to equal that to the Jason. 63 00:05:40,700 --> 00:05:44,390 String of fied version of the list. 64 00:05:45,830 --> 00:05:54,770 Data, and as we load it from local, we also need to run through the maker function in order to add 65 00:05:54,770 --> 00:05:56,060 the content on the page. 66 00:05:57,110 --> 00:06:02,630 And the one problem here is that when we get it from the local storage, the list itself isn't going 67 00:06:02,630 --> 00:06:04,760 to be passed as JSON. 68 00:06:05,240 --> 00:06:11,150 So you can add in the JSON pass, it's going to be coming through as a string object. 69 00:06:11,170 --> 00:06:15,200 So we want to avoid that and we want it as a usable JavaScript object. 70 00:06:15,860 --> 00:06:18,410 So that's where you can use the JSON pass. 71 00:06:18,620 --> 00:06:24,620 And then in order to set it into local storage, we need to string of by the JSON data. 72 00:06:24,630 --> 00:06:30,840 So this is going to be an array of data and at any point as well, you could console log out the my 73 00:06:30,860 --> 00:06:36,080 list so you can see the contents that are there. 74 00:06:36,560 --> 00:06:42,830 Also, if you load the local data and you want to see the how it's being contained in there, so it's 75 00:06:42,830 --> 00:06:45,550 going to be saved as a string value in there. 76 00:06:45,950 --> 00:06:51,230 So you see, it's the JSON data is all just regular string content that's sitting within there. 77 00:06:51,500 --> 00:06:55,790 So now we've got a way to store and set the local storage. 78 00:06:56,360 --> 00:06:58,600 We also want to make the list interactive. 79 00:06:59,000 --> 00:07:07,000 So let's add the ability to click on the list and set it to status to true or not. 80 00:07:07,010 --> 00:07:09,830 So let's select the item information. 81 00:07:11,240 --> 00:07:16,050 And as we're making the list, we're also going to send over the index value. 82 00:07:19,040 --> 00:07:25,460 So it's going to send both of the element information and the index and we're going to use the index 83 00:07:25,460 --> 00:07:30,550 in order to update my list data as we're making updates and we're clicking. 84 00:07:30,800 --> 00:07:32,700 So we need a way to make that update. 85 00:07:32,720 --> 00:07:38,690 So let's instead of sending it over to make the list, it's going to also add in the index value. 86 00:07:39,560 --> 00:07:45,310 And the index value can be a way that we can detect what item is needs to be updated in the list. 87 00:07:45,650 --> 00:07:48,050 So let's adding in an event listener. 88 00:07:48,170 --> 00:07:50,030 So add event listener. 89 00:07:50,330 --> 00:07:54,370 The event that we're listening for is a click on the object. 90 00:07:54,380 --> 00:07:58,540 So when it gets clicked, we're going to run the function here. 91 00:07:59,060 --> 00:08:00,350 So whenever it gets clicked. 92 00:08:01,620 --> 00:08:07,200 We're going to toggle these two classes, so let's see if that works. 93 00:08:07,710 --> 00:08:13,130 So now we have an option to toggle the classes and it's not updating the list yet. 94 00:08:13,710 --> 00:08:16,920 So the one that we need to update is the my list. 95 00:08:17,280 --> 00:08:22,680 So whenever it gets clicked, we'll consider log out the list. 96 00:08:23,640 --> 00:08:29,790 And so that way we can make sure that we have a consistent what we've got viewed out on the page is 97 00:08:29,790 --> 00:08:35,300 going to be consistent to what we're using within the my list. 98 00:08:37,980 --> 00:08:44,480 So that third one right now is true, still within the list, but we have to update it still. 99 00:08:44,880 --> 00:08:51,510 So we want to make an update to the content and we want to update the status either to true or to false. 100 00:08:55,120 --> 00:09:02,500 So let's add in one more condition and we'll check to see what the current status is and then we'll 101 00:09:02,500 --> 00:09:13,000 update it accordingly so we can do a condition if div class list contains. 102 00:09:16,430 --> 00:09:24,770 If it contains confirmed and it will contain confirmed now, because we're toggling the confirmed, 103 00:09:25,340 --> 00:09:35,960 so if it contains confirmed solid console lockout's, the class list information, so clear the console. 104 00:09:35,970 --> 00:09:38,690 So we're tracking and we're seeing that now. 105 00:09:38,780 --> 00:09:41,020 It's true and it's true when it's green. 106 00:09:41,240 --> 00:09:48,950 So if it is confirmed, then we're going to take the my list using the index value of index, which 107 00:09:48,950 --> 00:09:51,590 we're passing in over here within the make list. 108 00:09:51,950 --> 00:10:06,460 And we're going to update the status to be true otherwise or else we can update the status to be false. 109 00:10:07,730 --> 00:10:09,950 So it's clear our console. 110 00:10:09,980 --> 00:10:12,350 So right now, Mary is false. 111 00:10:12,380 --> 00:10:15,700 Let's check and make sure that our data is consistent. 112 00:10:16,040 --> 00:10:17,780 So set them all to be false. 113 00:10:20,180 --> 00:10:21,380 And they're all false. 114 00:10:21,680 --> 00:10:27,100 So the one other thing that we need to do when we reload, we're going back to the stored local version. 115 00:10:27,440 --> 00:10:34,100 So whenever we make any updates, we need to once again store the list contents and don't forget to 116 00:10:34,100 --> 00:10:37,790 JSON string of it to store it as a string list. 117 00:10:38,090 --> 00:10:45,920 So now whenever we make updates and we refresh the list, it's going to stay consistent with the existing 118 00:10:45,920 --> 00:10:48,420 content that's on the page. 119 00:10:50,180 --> 00:10:55,880 So go ahead and add the interaction using the classes into your project. 120 00:10:56,180 --> 00:10:59,670 And coming up next, we're going to finish and we'll wrap up the project. 121 00:11:00,380 --> 00:11:01,960 So that's still to come in the next lesson. 122 00:11:03,300 --> 00:11:08,070 Challenge for this lesson is to create a global variables that are going to track your current list, 123 00:11:08,070 --> 00:11:15,330 items are going to need one to track the list current state, as well as the local data and set the 124 00:11:15,330 --> 00:11:16,570 local data value. 125 00:11:16,830 --> 00:11:23,940 Also, create and get the local storage value using the local storage so you can get item and also set 126 00:11:23,940 --> 00:11:26,070 item into the local storage. 127 00:11:26,280 --> 00:11:28,500 And this only takes a string value. 128 00:11:28,710 --> 00:11:36,060 So you have to pass and stratify the JavaScript object from the JSON data in order to output it properly 129 00:11:36,060 --> 00:11:40,800 on the page and also make the list items interactive. 130 00:11:40,800 --> 00:11:42,450 So make them clickable. 131 00:11:42,630 --> 00:11:46,440 Whenever you click on them, they should toggle the classes. 132 00:11:46,650 --> 00:11:50,850 So toggling confirmed and not confirmed classes. 133 00:11:50,970 --> 00:11:57,150 And you can also use and check to see if the element contains that class and checks to see the status, 134 00:11:57,150 --> 00:11:59,880 value and updating those status values in the list. 135 00:12:00,130 --> 00:12:06,240 So you have to also make sure that the current local my list is going to be consistent with what the 136 00:12:06,240 --> 00:12:08,030 user sees on the screen.