1 00:00:00,540 --> 00:00:01,530 Welcome back, my friends. 2 00:00:01,820 --> 00:00:06,690 Welcome to another lecture here, we're going to continue working with our application, our To-Do list 3 00:00:06,690 --> 00:00:09,620 and the things that I want to show you what we are going to build. 4 00:00:09,870 --> 00:00:11,410 Let's build it real quick. 5 00:00:11,500 --> 00:00:15,030 Now, the local storage already commented that one. 6 00:00:15,060 --> 00:00:17,500 I'll just comment that one in the script. 7 00:00:17,590 --> 00:00:19,380 I'm not going to use the local storage anymore. 8 00:00:19,620 --> 00:00:24,870 I'm just going to create new file called to do to do Digest's in here. 9 00:00:25,140 --> 00:00:29,220 I will just link that one in the bottom of this. 10 00:00:31,090 --> 00:00:40,180 And to do now, the thing is that we need to do a couple of things here, the first thing that you need 11 00:00:40,180 --> 00:00:43,600 to do is let's first test it out. 12 00:00:43,600 --> 00:00:49,840 If I still now also sometimes you need to clear the cookies because, yeah, the cookies can be can 13 00:00:49,840 --> 00:00:51,540 make your problem with the application. 14 00:00:51,700 --> 00:00:53,000 So let's see if it's working. 15 00:00:53,260 --> 00:00:55,390 So when I do it here, it's not working. 16 00:00:55,420 --> 00:00:56,320 OK, cool. 17 00:00:56,890 --> 00:01:00,160 Now, one change that I did here, I had a hash. 18 00:01:01,210 --> 00:01:02,790 Just remove that hash if you want. 19 00:01:03,250 --> 00:01:07,310 You don't you're not going to need it in the next part of the course. 20 00:01:07,810 --> 00:01:18,970 So from the local storage, we need this port and let's put it here uncommented and see if it's going 21 00:01:18,970 --> 00:01:19,270 to work. 22 00:01:19,280 --> 00:01:21,550 So local storage is not needed anymore. 23 00:01:21,980 --> 00:01:22,480 Just going to. 24 00:01:23,190 --> 00:01:23,880 And here it is. 25 00:01:23,880 --> 00:01:25,690 It's working now. 26 00:01:28,130 --> 00:01:35,600 One more thing that I just want to say here, there we have a problem here in this, we need to get 27 00:01:35,600 --> 00:01:36,530 it with the hash. 28 00:01:36,530 --> 00:01:38,540 Otherwise this input is not going to work. 29 00:01:38,960 --> 00:01:39,310 Right. 30 00:01:39,710 --> 00:01:44,420 So because we have the idea of Eitam and we just calling without it. 31 00:01:45,380 --> 00:01:48,290 Now, that is pretty much what we need. 32 00:01:48,320 --> 00:01:53,900 So first, I'm going to show you I'm just going to copy this, how you can create this list. 33 00:01:55,400 --> 00:01:55,800 Oops. 34 00:01:56,180 --> 00:01:58,870 And these are the comments from the HTML. 35 00:01:58,880 --> 00:02:00,850 It's not they are not applicable here. 36 00:02:01,020 --> 00:02:02,870 I'm just going to create a multiple comment. 37 00:02:03,450 --> 00:02:07,250 Now, the first thing that I want to do is to create that point. 38 00:02:07,430 --> 00:02:08,580 And after that, we're going to cut it. 39 00:02:08,600 --> 00:02:18,050 So now we're going to say, OK, create an ally element and we're going to use const elai and document 40 00:02:19,010 --> 00:02:25,010 that will be able to document create element in that will be alive. 41 00:02:25,820 --> 00:02:34,790 Now I'm just going to cons along the line, but I'm going to do a couple of things before we do that, 42 00:02:35,090 --> 00:02:36,110 before I showed you. 43 00:02:36,140 --> 00:02:40,970 Now we're going to add a class here allied up class name and not least. 44 00:02:42,170 --> 00:02:48,890 And to do this, I'm just going to copy because I'm going to make mistake. 45 00:02:48,890 --> 00:02:50,720 And then after that, it's not going to work. 46 00:02:51,380 --> 00:02:56,480 Now, the second part that I want to do is you can add an idea if you want. 47 00:02:56,480 --> 00:02:58,890 So Allai idea, but I'm not going to do it. 48 00:02:59,480 --> 00:03:06,050 So the second thing is that you can do is to open the text like text content input. 49 00:03:09,390 --> 00:03:17,880 Text goes here, very good now appen text, this text will come from the form later. 50 00:03:17,900 --> 00:03:19,540 Don't worry about it now. 51 00:03:20,660 --> 00:03:22,880 So we need to create the link now. 52 00:03:23,000 --> 00:03:28,250 So don't worry about this span, because when we create the text is actually going to replace the spent. 53 00:03:28,280 --> 00:03:32,620 I don't need this plan in my application because it's going to. 54 00:03:32,810 --> 00:03:33,740 Yeah, we don't need it. 55 00:03:33,740 --> 00:03:35,560 It's not going to have any difference. 56 00:03:35,900 --> 00:03:42,680 So but I need this one because Ella has two trials at the moment and I need at least this one now. 57 00:03:42,680 --> 00:03:44,300 I'm just going to create again. 58 00:03:45,110 --> 00:03:46,100 But element. 59 00:03:46,100 --> 00:03:47,980 But it's not going to be Ella. 60 00:03:47,990 --> 00:03:49,070 It's going to be a trap. 61 00:03:50,540 --> 00:04:00,890 And I'm going to call it what link and so create element that should be inside that a link. 62 00:04:01,400 --> 00:04:05,570 We should give it a class name link. 63 00:04:06,500 --> 00:04:12,200 That class name in the class name should be this. 64 00:04:13,780 --> 00:04:14,210 Right. 65 00:04:16,330 --> 00:04:26,890 So we are almost done now inside this atrip element, we have another one similar like L.A. have to 66 00:04:26,890 --> 00:04:29,710 Charles, but ATRIP have this one. 67 00:04:29,740 --> 00:04:34,990 So how we can do it, we can just use in our e-mail. 68 00:04:35,110 --> 00:04:35,550 Right. 69 00:04:35,590 --> 00:04:36,920 And create a pen. 70 00:04:37,600 --> 00:04:41,230 Yeah, we can just use inner HTML. 71 00:04:41,530 --> 00:04:47,700 So I'm going to say link that in our e-mail, in quotations. 72 00:04:47,710 --> 00:04:49,270 I'm going to put this in quotes. 73 00:04:49,270 --> 00:04:50,200 I'm going to put this one. 74 00:04:50,800 --> 00:04:53,650 So make sure that you just copy the right thing. 75 00:04:54,580 --> 00:05:00,880 Now, the last thing that we want is to ally to have this child and let's do it. 76 00:05:01,360 --> 00:05:03,170 Not this link, actually. 77 00:05:03,760 --> 00:05:08,770 Now I'm going to refresh and I expect, oops, what happened? 78 00:05:09,640 --> 00:05:13,000 And I expected this one ally class to have this. 79 00:05:13,000 --> 00:05:13,960 Texaco's here. 80 00:05:14,260 --> 00:05:15,730 And we do have. 81 00:05:15,820 --> 00:05:16,410 Let's hope. 82 00:05:16,420 --> 00:05:17,770 Yeah, everything is working. 83 00:05:17,920 --> 00:05:23,950 So we have a class we have the ally, the techies here before we spend, but we remove it now. 84 00:05:23,950 --> 00:05:24,550 It's all good. 85 00:05:24,790 --> 00:05:29,270 One more thing that I need to show you is that we can appended here, right? 86 00:05:29,290 --> 00:05:34,550 It's not in our graphical user interface, but that's easy because you know how to append things. 87 00:05:34,780 --> 00:05:37,030 Now, you can append this to any URL. 88 00:05:41,180 --> 00:05:48,840 And I'm going to see you, all right, because we have created constants for you, though, in Japan, 89 00:05:48,910 --> 00:05:50,430 not bowling alley. 90 00:05:51,550 --> 00:05:54,700 And if I refresh now, it will go here. 91 00:05:55,420 --> 00:06:04,480 OK, now, so we're going to use this, but we're going to put it inside, make ally constants so you 92 00:06:04,480 --> 00:06:05,670 will see why. 93 00:06:05,920 --> 00:06:09,050 So I'm just going to explain a little bit what we're going to do. 94 00:06:09,520 --> 00:06:16,380 So what we are going to do is that we are need to make a function that creates an allied element. 95 00:06:16,630 --> 00:06:22,290 So because we will call it more than once in, we can just call this one line maker. 96 00:06:22,540 --> 00:06:24,040 So I'm going to do it like this. 97 00:06:24,040 --> 00:06:25,600 I'm just going to create a constants. 98 00:06:26,410 --> 00:06:29,890 And the name of that constants will be Mique Ally. 99 00:06:31,190 --> 00:06:38,330 And it will be equal to text, this text will come from the input you will see in a minute and I'm going 100 00:06:38,330 --> 00:06:41,170 to paste here whatever we created, right. 101 00:06:41,990 --> 00:06:43,080 So we are done here. 102 00:06:43,100 --> 00:06:49,040 Actually, I don't want that kind of luck to be visible, and that is pretty much it. 103 00:06:49,520 --> 00:06:57,020 But now it's the time to an event listener in D.C. that listener will watch for a summit event that 104 00:06:57,230 --> 00:07:00,410 every time when we press enter here, I'm just going to refresh. 105 00:07:02,280 --> 00:07:03,660 And I didn't save it. 106 00:07:05,160 --> 00:07:08,530 Oh, OK, yeah, because we spend it here nice. 107 00:07:08,580 --> 00:07:09,030 Doesn't matter. 108 00:07:10,770 --> 00:07:17,930 So every time when we press here and we enter, I just want that to be their right to be visible. 109 00:07:18,090 --> 00:07:20,310 So we're going to create an event listener. 110 00:07:20,670 --> 00:07:22,730 It will be on some me. 111 00:07:23,610 --> 00:07:24,970 It will be on some me. 112 00:07:25,260 --> 00:07:32,490 So what we're going to do below here, are we going to say form that and even a listener while we attach 113 00:07:32,490 --> 00:07:36,860 the form because the form is actually holding that that input. 114 00:07:36,870 --> 00:07:37,240 Right. 115 00:07:37,800 --> 00:07:41,100 So we're not going to do that with the button you will see in a minute. 116 00:07:41,880 --> 00:07:49,670 So at least one listener, I'm going to say submit here and I'm going to give it the function of this. 117 00:07:51,030 --> 00:07:52,450 Make sure that you close this one. 118 00:07:52,470 --> 00:07:54,460 So either prevent default. 119 00:07:55,560 --> 00:08:05,060 Now, we are just going to call make Elai this councillor's here and we're going to pass input that 120 00:08:05,070 --> 00:08:05,690 value. 121 00:08:06,120 --> 00:08:10,820 So where we're where I have this input, it is the input is there. 122 00:08:11,010 --> 00:08:19,890 Remember, the input is there with the grap with this item and the value is the value actually of this 123 00:08:19,890 --> 00:08:20,020 one. 124 00:08:20,040 --> 00:08:23,490 So actually this will go here, the text. 125 00:08:23,520 --> 00:08:24,780 Now we have one more problem. 126 00:08:24,780 --> 00:08:27,570 You will see why I'm just going to come on. 127 00:08:27,570 --> 00:08:28,560 What's happening here. 128 00:08:28,950 --> 00:08:36,390 So one in text goes here and I need to delete it and say two text goes here. 129 00:08:36,630 --> 00:08:36,940 Right. 130 00:08:37,320 --> 00:08:38,580 Why this is happening? 131 00:08:38,580 --> 00:08:40,110 Because this is hard coded. 132 00:08:40,110 --> 00:08:43,410 Text goes here and you can just add that was just for show. 133 00:08:43,560 --> 00:08:45,960 And I'm just going to say I like text content 134 00:08:49,780 --> 00:08:53,010 and that will be equal to this text, to this text variable. 135 00:08:53,160 --> 00:08:58,670 So if it comes along, it will hold it will hold whatever you put here. 136 00:08:58,890 --> 00:09:03,780 One, two, three. 137 00:09:04,110 --> 00:09:05,130 Now, this bothers me. 138 00:09:05,130 --> 00:09:06,670 I need to constantly. 139 00:09:06,720 --> 00:09:07,620 So now it's working. 140 00:09:07,620 --> 00:09:13,530 But if I refresh, it's all gone because this is not stored in localhost here. 141 00:09:13,740 --> 00:09:14,140 Right. 142 00:09:14,910 --> 00:09:16,300 So stored some gibberish there. 143 00:09:16,570 --> 00:09:27,720 So now I need to say input value to empty why I'm doing this because I'm constantly being annoyed when 144 00:09:27,720 --> 00:09:31,170 I put something here, when I hit enter, it's there now. 145 00:09:31,560 --> 00:09:39,390 One more thing that you can have if you don't have it and it lets it out to complete off right at this 146 00:09:39,390 --> 00:09:42,820 hour to complete because if it wasn't like this before. 147 00:09:43,170 --> 00:09:44,070 So if you follow. 148 00:09:44,520 --> 00:09:47,160 So it will give you whatever you put before. 149 00:09:47,160 --> 00:09:48,060 And I don't want that. 150 00:09:48,150 --> 00:09:49,270 That's annoying as well. 151 00:09:49,500 --> 00:09:57,130 So I completely off and let's say one, two, three, four, five. 152 00:09:57,930 --> 00:10:01,320 Now it's working, but it's not stored in our local storage. 153 00:10:02,460 --> 00:10:06,930 That's why we did it like that's why we had local storage. 154 00:10:06,930 --> 00:10:12,030 We learn about local storage a little bit and we need now to implement it. 155 00:10:12,960 --> 00:10:16,800 So what I'm going to show you now, I'm just going to give it to you a little bit of what we are going 156 00:10:16,800 --> 00:10:17,150 to do. 157 00:10:17,340 --> 00:10:21,330 So below here, actually, we don't need this, actually, we don't need any of this. 158 00:10:21,330 --> 00:10:26,510 But make sure that if you delete something, you don't need it in the future. 159 00:10:26,520 --> 00:10:31,770 Right now, let's create an empty array to start in that empty array. 160 00:10:33,360 --> 00:10:40,650 What we need is and also we need to create a local story to called items now local storage can support 161 00:10:40,650 --> 00:10:41,600 strong values. 162 00:10:41,740 --> 00:10:41,960 Right. 163 00:10:43,230 --> 00:10:49,210 But we want to store our to do list items in an area. 164 00:10:49,260 --> 00:10:49,720 Right. 165 00:10:50,130 --> 00:10:51,540 So that's going to be a little bit tricky. 166 00:10:51,540 --> 00:10:55,580 But we're going to do it so we can get around this by using Jason's Wi-Fi. 167 00:10:55,890 --> 00:11:03,460 And after that, we can convert it to Jason to pass to get the contents of the localhost local storage. 168 00:11:04,810 --> 00:11:05,160 Yeah. 169 00:11:05,160 --> 00:11:12,090 And also, we going to get all that from the local storage into a data variable so we can work a little 170 00:11:12,090 --> 00:11:12,750 bit later. 171 00:11:12,780 --> 00:11:18,360 So everything that I've told you now, we're going to just do it in a couple of lines. 172 00:11:18,570 --> 00:11:19,860 So I'm just going to let. 173 00:11:21,030 --> 00:11:21,910 I am sorry. 174 00:11:23,680 --> 00:11:28,320 So these are really what I'm going to do is I'm going to use the three operators, I'm going to say 175 00:11:28,320 --> 00:11:31,700 local storage like this, get item number. 176 00:11:31,980 --> 00:11:34,290 So and I will say items. 177 00:11:35,310 --> 00:11:43,860 Now, if this is true, so if if the log if the items are we holds this one right at the moment, that's 178 00:11:43,860 --> 00:11:44,480 not true. 179 00:11:44,490 --> 00:11:51,510 I'm just going to say Jason Haaz local storage that get item. 180 00:11:53,660 --> 00:11:54,230 Items. 181 00:11:55,220 --> 00:12:04,210 Now, as I told you, we local storage only supports strong values and we want to store it as item as 182 00:12:04,220 --> 00:12:12,130 an area so we can get around with the adjacent string givi and to convert the data area to a string. 183 00:12:12,140 --> 00:12:14,210 And we also use this adjacent part. 184 00:12:15,490 --> 00:12:22,750 To convert the content of the local storage back to something that we can use right now, this is if. 185 00:12:24,130 --> 00:12:27,770 That is true, or else I'm just going to create an empty array. 186 00:12:27,790 --> 00:12:28,240 That's it. 187 00:12:28,750 --> 00:12:31,090 So we are all covered. 188 00:12:32,650 --> 00:12:34,330 What else we need to do here? 189 00:12:34,360 --> 00:12:35,790 I'm going to see a local storage. 190 00:12:35,800 --> 00:12:37,330 I need to set the item now. 191 00:12:37,690 --> 00:12:41,950 Set item and the key will be items. 192 00:12:41,950 --> 00:12:42,410 Right. 193 00:12:42,910 --> 00:12:50,800 As I explained before, and I need to say, Jason, that stringy five items array. 194 00:12:51,790 --> 00:12:52,980 So why are you saying goodbye? 195 00:12:52,990 --> 00:13:01,580 Because the local storage only supports strong values and I need to convert this area to using Jason's 196 00:13:01,600 --> 00:13:01,900 finger. 197 00:13:02,200 --> 00:13:03,790 So that's pretty much it. 198 00:13:04,360 --> 00:13:12,940 Now, being in, say, constant data that will be equal to Jason that pass. 199 00:13:13,840 --> 00:13:16,320 I'm going to use the same thing to local storage. 200 00:13:16,390 --> 00:13:22,020 Actually, we can copy it, but let's do it again, get item in items. 201 00:13:22,180 --> 00:13:30,940 So now we need this one to convert the contents of the local storage back to something that we can work 202 00:13:30,940 --> 00:13:32,530 and stored in this constant need. 203 00:13:32,530 --> 00:13:33,120 A variable. 204 00:13:33,280 --> 00:13:33,700 Right. 205 00:13:34,450 --> 00:13:36,430 So you can count a lot here. 206 00:13:38,400 --> 00:13:43,110 So lock the items array just to see what's happening. 207 00:13:43,420 --> 00:13:45,880 So at the moment, it's not going to be there and nothing will be there. 208 00:13:46,600 --> 00:13:49,320 It's going to be empty right now. 209 00:13:49,810 --> 00:13:53,980 So here we just push into our console here. 210 00:13:54,160 --> 00:13:56,560 But we're not just saving anything so we can change. 211 00:13:56,560 --> 00:14:01,240 We can upgrade this method here where we are submitting things. 212 00:14:01,390 --> 00:14:03,160 So that is very easy. 213 00:14:03,340 --> 00:14:08,230 So we can add an element here to the items array. 214 00:14:09,220 --> 00:14:17,410 So how we can add we can just push it and I will say input value, whatever we do here, whatever we 215 00:14:17,410 --> 00:14:19,450 do here, it will be pushed to the area. 216 00:14:19,690 --> 00:14:26,730 But what I want also is I want also to push this one to the local storage. 217 00:14:26,980 --> 00:14:30,070 Now, the local storage will not be empty set item. 218 00:14:31,120 --> 00:14:32,500 And I will say, OK, items 219 00:14:35,080 --> 00:14:35,410 here. 220 00:14:35,410 --> 00:14:41,980 Akama, Jason to come on stream if I. 221 00:14:44,030 --> 00:14:48,110 I am sorry, no, let's hope it's going to work. 222 00:14:50,210 --> 00:14:59,580 So one, two, three, now is one to three in the I'm sorry. 223 00:15:00,020 --> 00:15:05,540 Let's see if it is sudheer in one to three in a string format. 224 00:15:05,540 --> 00:15:07,730 But they are the. 225 00:15:07,730 --> 00:15:08,120 Yeah. 226 00:15:08,150 --> 00:15:12,030 So we use Berzon Jassam the string you find just in the past. 227 00:15:12,410 --> 00:15:13,540 So how cool is this. 228 00:15:13,790 --> 00:15:21,080 But the thing is that when I refresh they stay there, but they are not here because they are not coming 229 00:15:21,380 --> 00:15:23,510 from our local storage. 230 00:15:23,660 --> 00:15:25,650 So we will fix that one in future. 231 00:15:25,670 --> 00:15:29,660 It's also good is we will fix it, but at least we know it's working. 232 00:15:30,080 --> 00:15:31,460 And now we do have these. 233 00:15:31,460 --> 00:15:32,400 One, two, three. 234 00:15:32,450 --> 00:15:33,140 How cool is this? 235 00:15:33,350 --> 00:15:39,320 No, we will continue working with our application a little bit later and make sure that you understand 236 00:15:39,320 --> 00:15:40,100 what we have done. 237 00:15:41,300 --> 00:15:46,130 And we will do we will continue working in our next lecture. 238 00:15:46,130 --> 00:15:57,140 We will just yeah, we will just make sure that we are bringing these values here from local storage. 239 00:15:57,890 --> 00:15:58,270 Right. 240 00:15:59,060 --> 00:16:02,280 And the local storage will be like that. 241 00:16:02,480 --> 00:16:04,580 So I have four items when I refresh. 242 00:16:04,580 --> 00:16:06,020 I don't have anything now. 243 00:16:06,200 --> 00:16:10,430 So I just want these four items here from the local storage to be displayed here. 244 00:16:10,580 --> 00:16:15,950 And we will do it with yeah, you will see with a while for loop, we will just loop them here. 245 00:16:16,130 --> 00:16:16,730 Thank you very much. 246 00:16:16,730 --> 00:16:19,490 I hope you enjoyed this one and I will see you in the next one.