1 00:00:02,050 --> 00:00:05,850 So we did now build and test this API. 2 00:00:05,850 --> 00:00:07,870 This API which runs on a server 3 00:00:07,870 --> 00:00:10,170 and we tested it with Postman. 4 00:00:10,170 --> 00:00:12,780 Now I wanna come back to this slide, 5 00:00:12,780 --> 00:00:14,820 which I discussed earlier. 6 00:00:14,820 --> 00:00:17,410 I mentioned that you could be building an API, 7 00:00:17,410 --> 00:00:19,970 which is not that useful to companies 8 00:00:19,970 --> 00:00:21,630 from all over the world 9 00:00:21,630 --> 00:00:23,880 but which you plan on using yourselves 10 00:00:23,880 --> 00:00:26,040 but where you might have different clients 11 00:00:26,040 --> 00:00:27,320 that should talk to it, 12 00:00:27,320 --> 00:00:29,810 and that is what I wanna simulate now. 13 00:00:29,810 --> 00:00:31,780 Now, I don't have a mobile app here 14 00:00:31,780 --> 00:00:34,830 because building a mobile app is a totally different thing. 15 00:00:34,830 --> 00:00:36,660 You need different skills for that. 16 00:00:36,660 --> 00:00:38,720 There are entire courses on that, 17 00:00:38,720 --> 00:00:41,110 and we also got courses on that if you wanna learn 18 00:00:41,110 --> 00:00:42,950 building mobile apps. 19 00:00:42,950 --> 00:00:45,030 But instead here what I got for you 20 00:00:45,030 --> 00:00:48,070 is a decoupled web front end. 21 00:00:48,070 --> 00:00:49,500 And I'll explain what that is 22 00:00:49,500 --> 00:00:52,490 and why we might have that in just a second. 23 00:00:52,490 --> 00:00:54,930 Attached, you find this project here. 24 00:00:54,930 --> 00:00:57,300 A very simple separate project, 25 00:00:57,300 --> 00:00:59,860 which is a different project than this backend 26 00:00:59,860 --> 00:01:02,080 where I still have my server up and running. 27 00:01:02,080 --> 00:01:05,260 This attached project is a different project. 28 00:01:05,260 --> 00:01:08,210 And in the end, if you download and extract it, 29 00:01:08,210 --> 00:01:11,620 you will see that it's basically a static website. 30 00:01:11,620 --> 00:01:15,030 It just contains HTML, CSS 31 00:01:15,030 --> 00:01:18,060 and some browser-side JavaScript code. 32 00:01:18,060 --> 00:01:20,900 A lot of browser-side JavaScript code actually 33 00:01:20,900 --> 00:01:22,016 and I'll explain that code 34 00:01:22,016 --> 00:01:24,580 in a couple of minutes, no worries. 35 00:01:24,580 --> 00:01:27,170 What this attached project doesn't include 36 00:01:27,170 --> 00:01:28,973 is any backend code. 37 00:01:29,880 --> 00:01:31,140 It has no server 38 00:01:31,140 --> 00:01:32,360 and therefore, as mentioned, 39 00:01:32,360 --> 00:01:34,010 it's a static site 40 00:01:34,010 --> 00:01:36,850 and you could deploy it if you wanted to deploy it 41 00:01:36,850 --> 00:01:39,623 to any static site hosting provider. 42 00:01:40,490 --> 00:01:42,530 Now, this is a decoupled front end, 43 00:01:42,530 --> 00:01:45,200 which we will connect to our backend. 44 00:01:45,200 --> 00:01:48,750 I say decoupled because it's a separate project 45 00:01:48,750 --> 00:01:51,890 and we would run it on a totally different server, 46 00:01:51,890 --> 00:01:55,790 which has a different domain, a different IP address. 47 00:01:55,790 --> 00:01:58,200 It's not running on the same server 48 00:01:58,200 --> 00:02:00,640 as the server that hosts our backend. 49 00:02:00,640 --> 00:02:02,110 The API itself. 50 00:02:02,110 --> 00:02:04,693 These would be two different servers. 51 00:02:05,960 --> 00:02:08,520 Now, the idea with this static site here 52 00:02:08,520 --> 00:02:12,270 is that we have fairly simple HTML code. 53 00:02:12,270 --> 00:02:15,340 I just got a styles import, 54 00:02:15,340 --> 00:02:17,820 a script import, which will become important. 55 00:02:17,820 --> 00:02:19,320 And then a dummy header 56 00:02:19,320 --> 00:02:21,740 and then a main section with a form, 57 00:02:21,740 --> 00:02:25,500 and then a section with an empty unordered list. 58 00:02:25,500 --> 00:02:27,110 And this list is empty 59 00:02:27,110 --> 00:02:28,830 because it will be populated 60 00:02:28,830 --> 00:02:31,313 by the browser-size JavaScript code. 61 00:02:32,370 --> 00:02:33,750 Now, I'll skip the styles. 62 00:02:33,750 --> 00:02:35,680 Feel free to browse through them. 63 00:02:35,680 --> 00:02:37,800 It's nothing too fancy in there. 64 00:02:37,800 --> 00:02:40,580 Just a bunch of colors, margins, paddings, 65 00:02:40,580 --> 00:02:42,210 what we always add. 66 00:02:42,210 --> 00:02:45,963 Now, what is important is this JavaScript code here though. 67 00:02:47,010 --> 00:02:49,630 In this code, I do a lot of things. 68 00:02:49,630 --> 00:02:51,970 Therefore, it's quite a big file. 69 00:02:51,970 --> 00:02:53,540 And what I do in there 70 00:02:53,540 --> 00:02:57,380 is I start by getting hold of the FormElement 71 00:02:57,380 --> 00:02:59,040 with this first line of code 72 00:02:59,040 --> 00:03:01,600 and there I get hold of this from element, 73 00:03:01,600 --> 00:03:02,500 which we got here. 74 00:03:03,620 --> 00:03:05,360 Then in the next line of code, 75 00:03:05,360 --> 00:03:08,772 I get hold of the todoListElement. 76 00:03:08,772 --> 00:03:10,729 So of this empty unordered list, 77 00:03:10,729 --> 00:03:15,370 which I have here, I get hold of it by using its ID. 78 00:03:15,370 --> 00:03:18,500 I use that here to get this ElementById 79 00:03:18,500 --> 00:03:21,750 and I store both the form and the TodosListElement 80 00:03:21,750 --> 00:03:22,973 in separate constants. 81 00:03:24,540 --> 00:03:26,660 Then I have this helper variable here, 82 00:03:26,660 --> 00:03:28,600 which will become important later. 83 00:03:28,600 --> 00:03:31,693 And then I have a first function here, loadTodos. 84 00:03:32,810 --> 00:03:34,260 What I do in this function 85 00:03:34,260 --> 00:03:37,630 is I send a request, a Ajax request, 86 00:03:37,630 --> 00:03:41,280 a JavaScript-driven request as we did it many times before 87 00:03:41,280 --> 00:03:46,260 in this course to localhost:3000/todos. 88 00:03:46,260 --> 00:03:49,593 Now, keep in mind, this will be our backend server here. 89 00:03:50,650 --> 00:03:54,840 This is the server, which runs on port 3000 90 00:03:54,840 --> 00:03:57,900 and therefore, it's localhost:3000. 91 00:03:57,900 --> 00:04:00,760 So this is the API on which we worked 92 00:04:00,760 --> 00:04:04,060 over the previous minutes and lectures. 93 00:04:04,060 --> 00:04:05,430 I'm sending a request to this, 94 00:04:05,430 --> 00:04:08,690 and please note that unlike before in this course, 95 00:04:08,690 --> 00:04:12,330 I don't just send a request to some path, 96 00:04:12,330 --> 00:04:14,760 but instead, I include the full domain 97 00:04:14,760 --> 00:04:17,863 and have http:// in front of it. 98 00:04:18,760 --> 00:04:22,950 The reason for this is that here this will send a request 99 00:04:22,950 --> 00:04:24,700 to a different server. 100 00:04:24,700 --> 00:04:25,980 As I mentioned before, 101 00:04:25,980 --> 00:04:27,940 this front end will be decoupled 102 00:04:27,940 --> 00:04:30,980 and runs on a different server than the backend. 103 00:04:30,980 --> 00:04:33,880 If I would be sending a request to just some path, 104 00:04:33,880 --> 00:04:35,880 this would automatically be added 105 00:04:35,880 --> 00:04:38,780 to the domain on which this front end code runs. 106 00:04:38,780 --> 00:04:42,420 So which was responsible for serving that front end code. 107 00:04:42,420 --> 00:04:44,060 And that would be the wrong domain 108 00:04:44,060 --> 00:04:46,410 because the backend runs on a different server 109 00:04:46,410 --> 00:04:47,740 with a different domain, 110 00:04:47,740 --> 00:04:49,983 hence we have to enter the full domain here. 111 00:04:51,270 --> 00:04:54,020 Then I send the request, handle some errors, 112 00:04:54,020 --> 00:04:56,220 if the response is not OK and so on. 113 00:04:56,220 --> 00:05:00,690 And then ultimately, I parse the response data again 114 00:05:00,690 --> 00:05:03,200 as we did it before in the course. 115 00:05:03,200 --> 00:05:05,170 Then I extract the todos 116 00:05:05,170 --> 00:05:07,660 because keep in mind that on the backend code, 117 00:05:07,660 --> 00:05:09,960 when we get all the todos, 118 00:05:09,960 --> 00:05:12,890 we have this todos key in the response data, 119 00:05:12,890 --> 00:05:14,343 which holds this todos array. 120 00:05:15,570 --> 00:05:18,693 And I extract this here in line 21. 121 00:05:19,621 --> 00:05:21,970 And then I loop through all these todos 122 00:05:21,970 --> 00:05:25,693 to then call createTodoListItem for every todo. 123 00:05:26,570 --> 00:05:29,670 And to createTodoListItem to this function, 124 00:05:29,670 --> 00:05:31,090 which is defined down there, 125 00:05:31,090 --> 00:05:35,270 I pass todo.text and todo.id. 126 00:05:35,270 --> 00:05:37,100 These are the two data fields, 127 00:05:37,100 --> 00:05:39,163 which I did set up on the backend before. 128 00:05:40,330 --> 00:05:41,830 There in the todo.model, 129 00:05:41,830 --> 00:05:44,593 we make sure that every todo has a text and id field. 130 00:05:45,990 --> 00:05:47,170 So that's what I extract here 131 00:05:47,170 --> 00:05:49,577 and pass to createTodoListItem. 132 00:05:50,680 --> 00:05:53,280 Then in createTodoListItem, 133 00:05:53,280 --> 00:05:58,120 I create a bunch of HTML DOM elements in JavaScript. 134 00:05:58,120 --> 00:06:00,470 And that's also what we learned before in the course 135 00:06:00,470 --> 00:06:02,960 and what we did before in the course. 136 00:06:02,960 --> 00:06:05,940 I create those elements with document.createElement 137 00:06:05,940 --> 00:06:07,290 and I create a list item 138 00:06:07,290 --> 00:06:10,470 to which I add a data- attribute. 139 00:06:10,470 --> 00:06:13,900 So this adds such a data-todoid attribute. 140 00:06:13,900 --> 00:06:15,600 That's what this line does. 141 00:06:15,600 --> 00:06:16,970 And I store the todoId, 142 00:06:16,970 --> 00:06:20,280 which I got back in my response here 143 00:06:20,280 --> 00:06:22,590 on this data- attribute. 144 00:06:22,590 --> 00:06:24,053 We will need that later. 145 00:06:24,980 --> 00:06:26,450 Then I create a paragraph 146 00:06:26,450 --> 00:06:30,950 where I set the textContent equal to the todoText we got. 147 00:06:30,950 --> 00:06:32,630 And then I create two buttons, 148 00:06:32,630 --> 00:06:34,570 a Edit and a Delete button 149 00:06:34,570 --> 00:06:36,830 to which I add click listeners 150 00:06:36,830 --> 00:06:40,680 where I trigger startTodoEditing for the Edit button 151 00:06:40,680 --> 00:06:42,540 and where I trigger deleteTodo 152 00:06:42,540 --> 00:06:43,853 for the Delete button. 153 00:06:44,840 --> 00:06:48,320 And then here I create a wrapper div 154 00:06:48,320 --> 00:06:50,233 to which I add these two buttons, 155 00:06:51,120 --> 00:06:53,330 and I only create that for styling reasons 156 00:06:53,330 --> 00:06:55,580 to group these two buttons together in a div 157 00:06:56,450 --> 00:07:00,110 and then I add my todoTextElement, 158 00:07:00,110 --> 00:07:03,210 which I created before this paragraph. 159 00:07:03,210 --> 00:07:06,340 And this WrapperElement, which contains the button 160 00:07:06,340 --> 00:07:08,680 to the TodoItemElement. 161 00:07:08,680 --> 00:07:10,430 So to the list item element. 162 00:07:10,430 --> 00:07:12,750 I add the TextElement 163 00:07:12,750 --> 00:07:14,973 and the button's WrapperElement to this ItemElement. 164 00:07:16,290 --> 00:07:19,380 And then as a last step, I take this ItemElement itself 165 00:07:19,380 --> 00:07:21,570 and add it to my todosListElement, 166 00:07:21,570 --> 00:07:23,200 which is this unordered list, 167 00:07:23,200 --> 00:07:25,310 which then won't be empty anymore 168 00:07:25,310 --> 00:07:26,603 because I added a item. 169 00:07:28,850 --> 00:07:29,750 And keep in mind, 170 00:07:29,750 --> 00:07:31,920 this function's executed for all todos, 171 00:07:31,920 --> 00:07:34,070 so all these todos are created 172 00:07:34,070 --> 00:07:35,970 and added to this unordered list 173 00:07:35,970 --> 00:07:38,260 when I fetched them here. 174 00:07:38,260 --> 00:07:40,750 Of course, if I failed to fetch any todos, 175 00:07:40,750 --> 00:07:42,210 no todos will be added 176 00:07:42,210 --> 00:07:45,603 because then this for loop won't execute a single time. 177 00:07:47,040 --> 00:07:49,340 Now that's this loadTodos function. 178 00:07:49,340 --> 00:07:51,440 Before we have a look at that in greater detail, 179 00:07:51,440 --> 00:07:53,360 let's go to the bottom of this file 180 00:07:53,360 --> 00:07:56,940 because there you'll see I executed loadTodos at the end 181 00:07:56,940 --> 00:07:58,970 so that when this script is loaded, 182 00:07:58,970 --> 00:08:01,050 which happens when the page is loaded, 183 00:08:01,050 --> 00:08:03,350 I do execute loadTodos 184 00:08:03,350 --> 00:08:04,990 so that whenever I load the page, 185 00:08:04,990 --> 00:08:08,240 I load all todos and I then output them on the page 186 00:08:08,240 --> 00:08:10,983 with help of that JavaScript code I just showed you. 187 00:08:12,750 --> 00:08:14,690 Now, you also see that here at the bottom, 188 00:08:14,690 --> 00:08:17,030 I add an EventListener to the todoFormElement 189 00:08:17,920 --> 00:08:20,423 to which we go hold in the first line before. 190 00:08:21,500 --> 00:08:23,470 And I add an EventListener where I listen 191 00:08:23,470 --> 00:08:25,770 for the submit event to then execute saveTodo. 192 00:08:26,960 --> 00:08:28,670 Now, we'll have a look at that in a second. 193 00:08:28,670 --> 00:08:29,660 First of all here, 194 00:08:29,660 --> 00:08:32,929 we see that there is the startTodoEditing function, 195 00:08:32,929 --> 00:08:35,350 and that was the function which I triggered 196 00:08:35,350 --> 00:08:38,039 when this Edit button was clicked. 197 00:08:38,039 --> 00:08:39,610 So the code I just show you, 198 00:08:39,610 --> 00:08:41,110 there we have this EventListener 199 00:08:41,110 --> 00:08:43,400 where we call startTodoEditing 200 00:08:43,400 --> 00:08:45,490 when the Edit button is clicked. 201 00:08:45,490 --> 00:08:48,060 That function is defined down there. 202 00:08:48,060 --> 00:08:50,500 And what I do in startTodoEditing 203 00:08:50,500 --> 00:08:53,370 is I get the button on which we clicked. 204 00:08:53,370 --> 00:08:55,890 Then I use this button to go up one level 205 00:08:55,890 --> 00:08:58,670 and a second level to select the list item 206 00:08:58,670 --> 00:09:00,950 because keep in mind that the buttons are inside 207 00:09:00,950 --> 00:09:02,530 of a div, as I showed you, 208 00:09:02,530 --> 00:09:04,720 so that's the first parent element 209 00:09:04,720 --> 00:09:07,300 and then that div is inside of the list item, 210 00:09:07,300 --> 00:09:09,040 hence I have parentElement again 211 00:09:09,040 --> 00:09:10,803 to get access to that list item. 212 00:09:11,680 --> 00:09:14,360 And then I get the currentText of that todo 213 00:09:14,360 --> 00:09:16,178 for which I clicked on a button 214 00:09:16,178 --> 00:09:19,442 by accessing the first element child 215 00:09:19,442 --> 00:09:21,566 of the edited todo element, 216 00:09:21,566 --> 00:09:25,441 which will be that paragraph that I added, 217 00:09:25,441 --> 00:09:28,690 the paragraph, the todoTextElement here 218 00:09:28,690 --> 00:09:31,886 is the first child I add to the new todoItem, 219 00:09:31,886 --> 00:09:34,230 so therefore it's the first element child, 220 00:09:34,230 --> 00:09:36,320 this paragraph here. 221 00:09:36,320 --> 00:09:39,112 And I get hold of that paragraph in startTodoEditing 222 00:09:39,112 --> 00:09:41,778 to get the currently entered text of this todo, 223 00:09:41,778 --> 00:09:44,810 and I then get access of the input element 224 00:09:44,810 --> 00:09:46,580 inside of the todoFormElement 225 00:09:46,580 --> 00:09:50,040 to populate that with that text of the todo 226 00:09:50,040 --> 00:09:52,510 for which I clicked on the Edit button. 227 00:09:52,510 --> 00:09:54,830 And in case this is all a bit abstract here, 228 00:09:54,830 --> 00:09:56,040 you will see it in action 229 00:09:56,040 --> 00:09:57,803 in a couple of minutes, no worries. 230 00:09:58,940 --> 00:10:00,150 So that's what we got here. 231 00:10:00,150 --> 00:10:03,090 Please note that I store this list item 232 00:10:03,090 --> 00:10:05,660 in editedTodoElement, 233 00:10:05,660 --> 00:10:07,960 which is not a variable or a constant 234 00:10:07,960 --> 00:10:09,710 that belongs to this function 235 00:10:09,710 --> 00:10:11,850 but which instead is this helper variable, 236 00:10:11,850 --> 00:10:13,990 which I defined outside of all functions 237 00:10:13,990 --> 00:10:15,890 at the top of this file. 238 00:10:15,890 --> 00:10:17,090 And I'm doing it like this 239 00:10:17,090 --> 00:10:18,980 so that the scope of this variable 240 00:10:18,980 --> 00:10:20,320 is this entire file 241 00:10:20,320 --> 00:10:22,010 and not a single function, 242 00:10:22,010 --> 00:10:23,920 and I can therefore use this variable 243 00:10:23,920 --> 00:10:25,250 in all the functions 244 00:10:25,250 --> 00:10:27,950 because I will need it in other functions as well. 245 00:10:27,950 --> 00:10:30,420 That's why I'm doing it like this. 246 00:10:30,420 --> 00:10:34,180 So what startTodoEditing does in the end 247 00:10:34,180 --> 00:10:36,550 is it sets this helper variable 248 00:10:36,550 --> 00:10:39,660 to the todo for which we clicked on the edit button 249 00:10:39,660 --> 00:10:41,730 and it populates the form input 250 00:10:41,730 --> 00:10:43,223 with the text of that todo. 251 00:10:45,280 --> 00:10:47,940 Now we have the saveTodo function as well, 252 00:10:47,940 --> 00:10:50,130 which is this function which is triggered 253 00:10:50,130 --> 00:10:52,780 if that form is submitted. 254 00:10:52,780 --> 00:10:55,690 And that form is used for two scenarios 255 00:10:55,690 --> 00:10:57,530 that we wanna add a new todo 256 00:10:57,530 --> 00:10:59,613 or that we are editing an existing todo. 257 00:11:01,000 --> 00:11:04,700 Now, saveTodo therefore then first prevents the default 258 00:11:04,700 --> 00:11:07,750 so that the browser does not automatically generate 259 00:11:07,750 --> 00:11:09,530 a HTTP request. 260 00:11:09,530 --> 00:11:11,360 I don't want that to happen 261 00:11:11,360 --> 00:11:14,940 because instead I wanna handle it myself here in JavaScript 262 00:11:14,940 --> 00:11:17,260 and send my own behind-the-scenes 263 00:11:17,260 --> 00:11:20,630 JavaScript-driven HTTP requests. 264 00:11:20,630 --> 00:11:23,800 And then I get the formInput with the FormData object, 265 00:11:23,800 --> 00:11:26,640 which we also saw before in the course already 266 00:11:26,640 --> 00:11:30,700 where I get the text input value from the form. 267 00:11:30,700 --> 00:11:33,620 And that is simply this only input I have in there, 268 00:11:33,620 --> 00:11:36,080 which has this name of text. 269 00:11:36,080 --> 00:11:41,020 So that is what I get here in line 139. 270 00:11:41,020 --> 00:11:44,470 And then I check if I this editedTodoElement, 271 00:11:44,470 --> 00:11:47,740 which is this helper variable we got here at the top. 272 00:11:47,740 --> 00:11:49,970 I check if it's undefined or null, 273 00:11:49,970 --> 00:11:51,660 which it would be initially 274 00:11:51,660 --> 00:11:54,720 or if it is set to some other value. 275 00:11:54,720 --> 00:11:58,200 Then here if it is not set, 276 00:11:58,200 --> 00:11:59,520 so if it is undefined, 277 00:11:59,520 --> 00:12:01,070 we're clearly adding a new todo 278 00:12:02,076 --> 00:12:04,230 and therefore I then call createTodo 279 00:12:04,230 --> 00:12:06,210 and pass the enteredTodoText 280 00:12:06,210 --> 00:12:09,240 to that function, and we will have a look at this function 281 00:12:09,240 --> 00:12:10,594 in a second as well. 282 00:12:10,594 --> 00:12:13,450 Or if editedTodoElement 283 00:12:13,450 --> 00:12:16,090 is set I know that I am editing a todo. 284 00:12:16,090 --> 00:12:18,210 And therefore in that case, 285 00:12:18,210 --> 00:12:20,060 I actually call a different function 286 00:12:20,060 --> 00:12:22,223 and pass the entered text to that. 287 00:12:23,970 --> 00:12:26,070 Now, let's take a look at these two functions. 288 00:12:26,070 --> 00:12:28,010 We also have a deleteTodo function 289 00:12:28,010 --> 00:12:29,410 to which I'll come back in a section. 290 00:12:29,410 --> 00:12:31,380 You can probably guess what it does. 291 00:12:31,380 --> 00:12:34,540 But let's, first of all, have a look at createTodo. 292 00:12:34,540 --> 00:12:36,585 In there in the end, I get this todoText 293 00:12:36,585 --> 00:12:38,430 because we passed it in 294 00:12:38,430 --> 00:12:41,020 in the function we just had a look at. 295 00:12:41,020 --> 00:12:43,469 And then here I send another request, 296 00:12:43,469 --> 00:12:47,630 a POST request to our backend domain /todos. 297 00:12:47,630 --> 00:12:51,050 I add my test there in the request.body. 298 00:12:51,050 --> 00:12:54,910 And I named the field here in the request.body text 299 00:12:54,910 --> 00:12:57,870 because on the backend in the todos.controller 300 00:12:57,870 --> 00:13:02,350 in addTodo, I'm looking for a text field on request.body. 301 00:13:02,350 --> 00:13:05,393 So we'll have to use this key on the front end as well. 302 00:13:06,400 --> 00:13:09,750 I set my headers so that the body parser works correctly 303 00:13:09,750 --> 00:13:11,140 on the backend. 304 00:13:11,140 --> 00:13:12,570 Then I handle errors 305 00:13:12,570 --> 00:13:14,800 and then I extract the responseData 306 00:13:14,800 --> 00:13:16,750 so that I get the ID of the createdTodo 307 00:13:17,760 --> 00:13:21,550 because on the backend, we do update our todo.id 308 00:13:21,550 --> 00:13:26,550 and then we send this updated todo back under createdTodo. 309 00:13:27,720 --> 00:13:30,190 So that's what I get here on the front end then. 310 00:13:30,190 --> 00:13:33,838 And then again I call this createTodoListItem function, 311 00:13:33,838 --> 00:13:35,487 which we saw a couple of minutes ago 312 00:13:35,487 --> 00:13:37,226 to add a new todo list item 313 00:13:37,226 --> 00:13:39,800 to this unordered list. 314 00:13:39,800 --> 00:13:42,940 In updateTodo, I get the ID of the todo 315 00:13:42,940 --> 00:13:44,040 that should be updated 316 00:13:44,040 --> 00:13:45,500 by looking at the dataset, 317 00:13:45,500 --> 00:13:49,730 so these data- properties 318 00:13:49,730 --> 00:13:51,840 on the todo item element, 319 00:13:51,840 --> 00:13:53,913 which we stored in our helper variable. 320 00:13:54,860 --> 00:13:59,370 And then I use this todoId to add it to my URL here. 321 00:13:59,370 --> 00:14:03,260 So I sent this to my domain /todos/ this todoId, 322 00:14:03,260 --> 00:14:04,660 which I got here. 323 00:14:04,660 --> 00:14:06,460 And it's a PATCH request here 324 00:14:06,460 --> 00:14:10,150 with a request.body where we have the newText field 325 00:14:10,150 --> 00:14:13,460 because again, on the backend in updateTodo, 326 00:14:13,460 --> 00:14:15,850 which is triggered for such patch requests, 327 00:14:15,850 --> 00:14:18,220 I'm looking for a new text field 328 00:14:18,220 --> 00:14:20,023 on the incoming request body. 329 00:14:22,250 --> 00:14:23,610 So that's what I sent here. 330 00:14:23,610 --> 00:14:26,090 Then I've got a bunch of error handling here. 331 00:14:26,090 --> 00:14:29,790 And then in the end, I'm updating my DOM element, 332 00:14:29,790 --> 00:14:33,690 my editedTodoElement, so this selected TodoElement, 333 00:14:33,690 --> 00:14:36,270 which we stored in that helper variable. 334 00:14:36,270 --> 00:14:38,990 I'm reaching out to the firstElementChild in there, 335 00:14:38,990 --> 00:14:42,440 which is still the paragraph in that todo item 336 00:14:42,440 --> 00:14:44,580 for which we clicked on the edit button. 337 00:14:44,580 --> 00:14:48,060 And I set the textContent to this newTodoText we have 338 00:14:48,060 --> 00:14:49,319 for this todo. 339 00:14:49,319 --> 00:14:54,319 And then I reset my input in my form to clear its value. 340 00:14:54,620 --> 00:14:59,240 And I reset the editedTodoElement to set it back to null 341 00:14:59,240 --> 00:15:01,280 so that this is now null 342 00:15:01,280 --> 00:15:03,160 and if we would submit the form again therefore, 343 00:15:03,160 --> 00:15:06,370 for example, this would now be mapped 344 00:15:06,370 --> 00:15:07,860 and we're adding a new todo 345 00:15:07,860 --> 00:15:09,750 unless we click editedTodo 346 00:15:09,750 --> 00:15:11,723 on an existing todo item again. 347 00:15:14,000 --> 00:15:17,350 Now, last but not least, I also got the deleteTodo function, 348 00:15:17,350 --> 00:15:19,750 which is triggered when that Delete button is clicked 349 00:15:19,750 --> 00:15:21,070 for a todo item. 350 00:15:21,070 --> 00:15:23,170 We added such a delete button as well 351 00:15:23,170 --> 00:15:24,740 when we add a todo item. 352 00:15:24,740 --> 00:15:25,823 Keep that in mind. 353 00:15:26,690 --> 00:15:30,070 And in deleteTodo, we do what the name suggests. 354 00:15:30,070 --> 00:15:33,501 I get the todoid by getting the todoElement 355 00:15:33,501 --> 00:15:35,720 for which we clicked on a button 356 00:15:35,720 --> 00:15:38,150 by again going up two levels from the button 357 00:15:38,150 --> 00:15:39,270 to dive into the div 358 00:15:39,270 --> 00:15:41,880 that groups the buttons and then into the list item 359 00:15:41,880 --> 00:15:43,107 that holds the div 360 00:15:43,107 --> 00:15:44,853 and then here I've got the todoid, 361 00:15:46,050 --> 00:15:48,830 and then I send a DELETE request 362 00:15:48,830 --> 00:15:50,130 to my domain /todos/todoid 363 00:15:52,160 --> 00:15:54,630 so that this is part of the path. 364 00:15:54,630 --> 00:15:57,820 No body because the DELETE route needs no body 365 00:15:57,820 --> 00:15:59,150 because in deleteTodo, 366 00:15:59,150 --> 00:16:01,150 I just need the ID from the path 367 00:16:01,150 --> 00:16:03,703 and then I'll delete the todo on the backend here. 368 00:16:04,580 --> 00:16:05,920 So I'll send this request 369 00:16:05,920 --> 00:16:07,630 and then have some error handling, 370 00:16:07,630 --> 00:16:10,710 and then I remove that todoElement, 371 00:16:10,710 --> 00:16:13,840 which I selected here to remove it from the DOM, 372 00:16:13,840 --> 00:16:16,053 to remove this list item from the DOM. 373 00:16:17,250 --> 00:16:18,913 That is the front end code.