1 00:00:00,510 --> 00:00:09,900 So in this lesson, we're going to be wrapping up our local host so that Jason fake Jason Placeholder 2 00:00:10,140 --> 00:00:17,220 data, so on the Jason server, creating a local Jason server that we can output content from and then 3 00:00:17,220 --> 00:00:19,450 creating the interaction with that content. 4 00:00:19,800 --> 00:00:22,780 So first we load all of the Post's information. 5 00:00:22,800 --> 00:00:27,260 So these are all the posts and they correspond with the content we have in the database. 6 00:00:27,600 --> 00:00:35,460 So for the database we have it one, ID eight, ID 12, and we can also select and update the content. 7 00:00:35,880 --> 00:00:42,660 So if you want to update it and that will also update the corresponding post in the database. 8 00:00:45,130 --> 00:00:47,320 So there that other one updated. 9 00:00:49,000 --> 00:00:53,810 And also that once updated and then also we have an option to delete. 10 00:00:53,830 --> 00:00:57,460 So let's go ahead and delete with the ID of eight. 11 00:00:58,060 --> 00:01:03,670 So it's going to delete it out and remove it from that database, provides the user some information 12 00:01:03,670 --> 00:01:04,600 about what's happening. 13 00:01:05,320 --> 00:01:08,610 And if we want, we can also create a new one. 14 00:01:09,190 --> 00:01:10,570 So doing Hello World. 15 00:01:10,780 --> 00:01:12,600 And so this is only adding in the title. 16 00:01:12,610 --> 00:01:14,470 There is a default, Arthur, that's set. 17 00:01:14,950 --> 00:01:17,590 So adding to the bottom there, the hello world. 18 00:01:17,920 --> 00:01:20,890 And then that's also added into the database. 19 00:01:21,100 --> 00:01:24,730 And then this can be updated and deleted the same way. 20 00:01:25,240 --> 00:01:33,190 So we're going to be practicing making the put as well as the delete methods in this lesson and also 21 00:01:34,090 --> 00:01:41,350 debugging and troubleshooting and making updates to the application, the outputting the posts to the 22 00:01:41,350 --> 00:01:47,860 page and then also updating it so that we can select the posts and update them. 23 00:01:48,040 --> 00:01:51,880 So edit them and update the titles of the posts. 24 00:01:52,390 --> 00:01:58,980 So let's create and using the page contents, we're loading the data into the page contents. 25 00:01:59,170 --> 00:02:02,910 So this is where we can construct and start create the elements. 26 00:02:03,100 --> 00:02:10,630 So creating a main element that is just going to go within the output and clear out the current contents 27 00:02:10,630 --> 00:02:11,530 of output. 28 00:02:13,850 --> 00:02:20,780 And creating an elements, I'm going to give it a variable name of mean and the parent for the mean 29 00:02:20,780 --> 00:02:29,720 is going to be output and the element type is going to be a div and then there's no HTML that we're 30 00:02:29,720 --> 00:02:30,350 passing in. 31 00:02:30,350 --> 00:02:33,950 So there's going to be a blank element that we can use. 32 00:02:34,100 --> 00:02:41,720 And as we loop through the data that we have available to us, so take data and then using for each, 33 00:02:42,230 --> 00:02:44,630 we're going to loop through each one of the items. 34 00:02:45,680 --> 00:02:52,250 So it's going to return back the elements and within the console will first log out the element content 35 00:02:53,990 --> 00:02:57,040 so we can take a closer look and see what we've got to work with. 36 00:02:57,320 --> 00:03:01,430 So we want to ultimately output this information to the page. 37 00:03:02,540 --> 00:03:08,750 So let's select this content and we're going to select it. 38 00:03:08,760 --> 00:03:11,040 So it's really easy to update it. 39 00:03:11,300 --> 00:03:18,050 So adding in the title information and then also we can update the author information so it creates 40 00:03:18,050 --> 00:03:21,950 some inputs and set the values of those inputs to match. 41 00:03:23,180 --> 00:03:25,760 So the first one is going to be input one. 42 00:03:25,790 --> 00:03:28,820 So just call it in one and. 43 00:03:31,450 --> 00:03:41,560 I got actually shortened to create my element because it's rather long and so do a quick replace of 44 00:03:41,560 --> 00:03:45,190 the crate in my element and I just call it CME. 45 00:03:47,110 --> 00:03:49,100 So just update all of those. 46 00:03:50,870 --> 00:03:57,250 And so now if we want to create the element, we just use the CME function. 47 00:03:58,030 --> 00:04:00,670 So the parent that we're adding it to is going to be mean. 48 00:04:01,660 --> 00:04:08,530 The type of input is going to be input and there's no values for the input. 49 00:04:09,280 --> 00:04:15,020 So we can select one and we can set up the value of the input. 50 00:04:15,730 --> 00:04:25,600 So having this as element title, so that will add all of them to the page and I'm going to add some 51 00:04:25,600 --> 00:04:29,630 styling so that we can distinguish between the elements. 52 00:04:30,640 --> 00:04:44,080 So for the box, let's set it up as a display block and settle with to be 70 percent and border one 53 00:04:44,080 --> 00:04:45,670 pick solid. 54 00:04:45,920 --> 00:04:48,190 So that has some border to distinguish it. 55 00:04:48,700 --> 00:04:54,890 And for margin, we'll do top and bottom of five picks and left and right of auto. 56 00:04:55,870 --> 00:05:04,850 So when we create the main object with class list, we can add the class of box to it. 57 00:05:05,470 --> 00:05:09,070 So it's going to apply some styling to each one of the items. 58 00:05:10,420 --> 00:05:13,410 And actually we're going to do this inside of here. 59 00:05:14,980 --> 00:05:21,760 So as we're iterating through, we're going to have the separate containers for each one of those and 60 00:05:21,760 --> 00:05:25,480 for the box inputs. 61 00:05:28,270 --> 00:05:33,910 They can have a width of one hundred percent or maybe more to it 90 percent. 62 00:05:36,200 --> 00:05:47,360 Their display will be block, so take up the full available width and we can also update them to have. 63 00:05:48,840 --> 00:05:55,050 Some some padding around and also an add in padding to the box object. 64 00:05:57,420 --> 00:06:00,720 And apply the box sizing to all the elements. 65 00:06:03,050 --> 00:06:12,530 So of border box, so that way we have all of the inputs there and as we're constructing the inputs, 66 00:06:13,310 --> 00:06:18,910 so we also want another input to the main, so creating another one. 67 00:06:18,920 --> 00:06:22,570 And this can be also in put and this is our second input. 68 00:06:22,910 --> 00:06:26,360 So this is where we're returning back the author information. 69 00:06:30,120 --> 00:06:38,160 So now we've got the title and the author, and then let's add in some buttons just below. 70 00:06:41,930 --> 00:06:45,170 So this is going to be where we've got some buttons. 71 00:06:49,540 --> 00:06:55,630 And we're going to have all of the action buttons here, so that's going to be just creating a regular 72 00:06:55,630 --> 00:06:55,990 diff 73 00:06:58,780 --> 00:07:04,210 and adding up to Maine and then within the buttons Divx. 74 00:07:06,830 --> 00:07:16,340 Will create some buttons so one can be the first button that we're creating and this is going to be 75 00:07:16,340 --> 00:07:21,170 appended within the BTE buttons object. 76 00:07:23,410 --> 00:07:30,160 And this is going to be a button and on this button, it will say update. 77 00:07:34,860 --> 00:07:40,270 And button two will be a button as well, and this one can say delete. 78 00:07:41,670 --> 00:07:43,940 So these are going to provide us the options. 79 00:07:45,030 --> 00:07:49,830 So we've got update and delete buttons and we can add event listeners to the buttons. 80 00:07:51,300 --> 00:07:58,030 So we're constructing the option to update and delete each one of the elements on the page. 81 00:07:58,050 --> 00:07:59,750 So just doing a four each for them. 82 00:08:02,960 --> 00:08:06,600 And also, let's handle this within our function. 83 00:08:09,230 --> 00:08:10,640 So just make the item. 84 00:08:15,020 --> 00:08:17,930 And it'll just take in the element information. 85 00:08:22,510 --> 00:08:30,430 And let's just make sure that we've got all of the details that we need, so as we're looping through 86 00:08:30,670 --> 00:08:33,550 the page contents, we'll make each one of the items. 87 00:08:34,210 --> 00:08:36,720 So that's still working as expected. 88 00:08:37,300 --> 00:08:44,860 So now within the buttons themselves, we can add in the event items that will update and also delete 89 00:08:44,860 --> 00:08:45,140 them. 90 00:08:46,450 --> 00:08:52,510 So the first one that we want to look at is button one and add an event listener to that. 91 00:08:53,090 --> 00:09:01,210 So BTN one, add an event listener and event that we're listening for is click. 92 00:09:02,170 --> 00:09:08,020 And when the click event gets triggered, then what do we want to do? 93 00:09:08,230 --> 00:09:14,020 And we ultimately also want to remove the main whatever button two gets clicked. 94 00:09:15,070 --> 00:09:20,080 So that's or actually this is just BTE and this is BTE to. 95 00:09:24,520 --> 00:09:31,510 So within the buttons, now that we've had event listeners, we want to construct the object that we 96 00:09:31,510 --> 00:09:33,500 can make the Futch request to. 97 00:09:34,690 --> 00:09:39,380 So we're we're making the update to the item. 98 00:09:40,870 --> 00:09:43,480 Let's first construct JSON object. 99 00:09:47,760 --> 00:09:51,280 And it's going to be give it a name of Jason. 100 00:09:52,380 --> 00:09:58,680 So this is ultimately going to be the content that we're sending within the body and we can get that 101 00:09:58,680 --> 00:09:59,490 information. 102 00:10:00,420 --> 00:10:05,610 So we make sure that we're structuring it the same way as here where we're constructing it. 103 00:10:09,930 --> 00:10:11,490 And the various options. 104 00:10:14,760 --> 00:10:19,650 And then we're posting it within the posts you URL, so all of this. 105 00:10:24,290 --> 00:10:29,690 And we'll create a separate function to handle that update item. 106 00:10:33,400 --> 00:10:44,410 And for the update we want to pass in the JSON data, so we'll pick up the JSON data and we have to 107 00:10:44,440 --> 00:10:48,190 sign title and we'll have another one for JSON author. 108 00:10:52,500 --> 00:10:58,980 And since this is already going to be contained within a JSON object, we can just use the JSON that's 109 00:10:58,980 --> 00:10:59,790 being passed in. 110 00:11:02,260 --> 00:11:12,100 So let's add these values for Jason and we'll pick them up from the inputs that we've created so far 111 00:11:12,100 --> 00:11:16,180 and input one that whatever the current value is. 112 00:11:17,080 --> 00:11:22,770 And then for the author, it's going to be input to add whatever the value is. 113 00:11:23,320 --> 00:11:31,110 And so for the update of items we're just passing in the Jason value so far. 114 00:11:31,300 --> 00:11:37,450 And we're also going to have to pass on the main element or we can just remove it whenever we've done 115 00:11:37,450 --> 00:11:38,380 the update of the item. 116 00:11:39,760 --> 00:11:45,120 So this is going to be making a put method request. 117 00:11:45,700 --> 00:11:52,570 We're going to do a JSON String Afie of the Jason content and for now we can just put it into the console. 118 00:11:54,520 --> 00:11:59,320 And it does require actually some parameters that we need to pass in the ID. 119 00:11:59,980 --> 00:12:01,250 So we need to forgive. 120 00:12:01,320 --> 00:12:02,700 So we need to pass in the ID. 121 00:12:03,520 --> 00:12:10,720 So for the update of the item, we're going to need the ID value and then add ID into it. 122 00:12:12,010 --> 00:12:13,480 So when we update the item. 123 00:12:14,560 --> 00:12:16,150 We need to get the element ID. 124 00:12:19,320 --> 00:12:27,210 And that's part of the route to make the update so clear and do an update and selecting with Element 125 00:12:27,210 --> 00:12:34,560 ID number one, we're sending the new data information over to do an update to the server. 126 00:12:36,360 --> 00:12:46,800 So let's also check to see if the update has taken place and write a new content and then hello world 127 00:12:47,250 --> 00:12:48,470 and do an update of it. 128 00:12:48,870 --> 00:12:51,390 So it's updating the database content. 129 00:12:51,960 --> 00:12:55,740 So let's also add the option to send a delete request. 130 00:12:56,520 --> 00:13:02,280 So this is going to be deleting it from the existing content so the update can stay the same. 131 00:13:02,760 --> 00:13:05,010 We might want to send a message over to the user. 132 00:13:05,010 --> 00:13:06,600 That update has been completed. 133 00:13:07,110 --> 00:13:12,600 But the content here, as long as you're pressing update, it will match whatever content we have within 134 00:13:12,600 --> 00:13:16,720 the database and then we can always do a reload of the content. 135 00:13:17,130 --> 00:13:23,940 So if I was to update it and if I refresh the page, we get that updated content because this is actually 136 00:13:23,940 --> 00:13:25,470 being saved within the database. 137 00:13:26,160 --> 00:13:33,600 So we're able to remove out the ones where we've got undefined and I'm just going to put my name into 138 00:13:33,600 --> 00:13:42,810 all the undefined ones and then just go through and update them individually so that we make sure it 139 00:13:43,200 --> 00:13:44,010 can double check. 140 00:13:44,010 --> 00:13:46,990 Just make sure that everything matches the content, all matches. 141 00:13:47,610 --> 00:13:51,350 And now let's add in the option to delete the item. 142 00:13:51,780 --> 00:13:59,310 So for the delete, it's going to be a fairly simple it's just a fetch request to the ID and to this 143 00:13:59,310 --> 00:14:07,150 end point, so we could as well construct the end point here instead of having the ID. 144 00:14:08,640 --> 00:14:10,710 So that's another option that we have as well. 145 00:14:11,400 --> 00:14:20,340 So in this case, let's construct the endpoint and the endpoints we're getting is from the IDY and so 146 00:14:20,340 --> 00:14:24,270 that's routing over to posts and whatever the current ID value is. 147 00:14:24,720 --> 00:14:29,880 And then we just make a futch request to the euro that we have. 148 00:14:31,110 --> 00:14:40,010 And for the parameters, this is going to be an object and we just need to specify the method, delete, 149 00:14:41,490 --> 00:14:43,580 and this is going to be a string value. 150 00:14:45,360 --> 00:14:51,270 So taking the delete method and that should actually remove it from the database. 151 00:14:51,730 --> 00:14:59,140 And also we want to remove out the main element, the main container, so just completely remove it. 152 00:15:00,090 --> 00:15:03,030 So just to remove of that main element. 153 00:15:03,720 --> 00:15:09,300 So let's see if we can remove out an item from the database, will remove this one here. 154 00:15:10,080 --> 00:15:16,320 So select delete snuffer is gone and we delete a bunch of them. 155 00:15:17,670 --> 00:15:19,920 And not to worry, we can always add new ones in. 156 00:15:20,820 --> 00:15:24,570 So now we should have four posts within the database, which we do. 157 00:15:25,140 --> 00:15:29,810 And even if we load the posts, everything is consistent with what we have on the page. 158 00:15:31,230 --> 00:15:39,330 So that's how we can create the interaction to the local data and also load out the content on the page. 159 00:15:42,180 --> 00:15:49,020 So let's apply some styling to the application and also we might want to have some messaging to the 160 00:15:49,020 --> 00:15:55,840 user that we can let them know what's going on, whether we've made some updates and so on. 161 00:15:56,220 --> 00:15:57,960 So going into the code. 162 00:16:03,920 --> 00:16:05,540 And with an output 163 00:16:08,150 --> 00:16:13,310 and actually within the main container, we'll add we'll create another. 164 00:16:15,840 --> 00:16:24,540 Object, and this can be our main message object, and so just using the same structure that we have, 165 00:16:25,800 --> 00:16:30,840 we can contain it within the container and have it as a div. 166 00:16:33,590 --> 00:16:41,330 Message area, so this will provide us a way to have a message area to the users 167 00:16:44,780 --> 00:16:48,230 and ideally maybe we need to put it near the top. 168 00:16:49,370 --> 00:16:54,950 So that means that we need to reconstruct some of the content of the page and we need to prepend instead 169 00:16:54,950 --> 00:16:55,670 of append. 170 00:16:56,480 --> 00:17:01,430 So maybe we want to create another option here to prepend or to append. 171 00:17:04,720 --> 00:17:11,450 So let's create another one and this one's going to prepend and we'll just call it CMT. 172 00:17:13,840 --> 00:17:17,380 So that will give us an option if we want to prepend content. 173 00:17:21,540 --> 00:17:27,080 So loading them near the top gives us the message area and the ability to load the posts. 174 00:17:27,360 --> 00:17:32,790 So even if we have a lot of posts that gives us the area that we can provide the messaging into. 175 00:17:37,290 --> 00:17:42,120 Now as well, a lot of times you might be doing this with regular HTML, so you don't have to worry 176 00:17:42,120 --> 00:17:46,710 about where you're positioning the elements, but that's how you can do a JavaScript where you can prepend 177 00:17:46,710 --> 00:17:47,420 and append. 178 00:17:47,690 --> 00:17:54,960 And if we go over to the HTML, if we do an inspect of the HTML code and see that we've got the content 179 00:17:55,620 --> 00:17:56,310 prepend. 180 00:17:56,550 --> 00:18:01,680 So what it did is it just added to the beginning of the main container as opposed to adding it to the 181 00:18:01,680 --> 00:18:04,290 end of the main container that we've been working with. 182 00:18:10,150 --> 00:18:18,730 So now whenever we get the response back from the server, so where we got the ad post, we also might 183 00:18:18,730 --> 00:18:21,730 want to add the actual post to the page. 184 00:18:22,840 --> 00:18:25,720 So we want to add it to the top of the page. 185 00:18:26,140 --> 00:18:30,640 So we do get the console message being returned back from the server, but we're not going to actually 186 00:18:30,640 --> 00:18:32,970 see the post until we do a load of the posts. 187 00:18:33,550 --> 00:18:36,070 So let's add that optioning as well. 188 00:18:36,580 --> 00:18:40,650 And also I wanted to add in the value of the ID. 189 00:18:40,990 --> 00:18:49,630 So this is going to be the I'll give it a value of my ID and this can just be a div at the top. 190 00:18:51,870 --> 00:18:54,120 And added into main. 191 00:18:56,980 --> 00:19:07,360 And returning back that element I'd value, so that was the IDs at the top of the main element. 192 00:19:08,430 --> 00:19:14,910 And then we can apply some styling as needed to those as well, so what we want to do as well is whenever 193 00:19:14,910 --> 00:19:19,580 we're adding creating a new item, we want to make the item. 194 00:19:21,030 --> 00:19:23,580 So all we need to do is pass in the. 195 00:19:26,650 --> 00:19:27,160 Dieter. 196 00:19:29,660 --> 00:19:31,520 That we're getting return back. 197 00:19:33,640 --> 00:19:42,340 So add that option in and we've already got it as data, so let's just do a make item of the data content 198 00:19:42,550 --> 00:19:46,720 that gets returned from the server and we'll give it a test. 199 00:19:47,410 --> 00:19:54,940 So that added in that new item at the bottom and also double can always double check within the database 200 00:19:55,510 --> 00:19:56,880 just to make sure it's working. 201 00:19:56,890 --> 00:20:02,290 So test, we've got an idea of 15 and that also added it to the bottom of the page. 202 00:20:03,670 --> 00:20:09,010 And then these are also we're able to update it and as well we're able to delete it. 203 00:20:09,010 --> 00:20:14,920 So all the functionality is there because we're using the same model that we use for the function to 204 00:20:14,920 --> 00:20:17,160 create the page elements above. 205 00:20:17,170 --> 00:20:20,170 So we're able to still have that same interaction for it as well. 206 00:20:25,670 --> 00:20:35,900 So whenever we make an item, let's create a function for function, and I'll call it my message and 207 00:20:35,900 --> 00:20:42,630 it'll take in whatever HTML that we want, and I'm going to be playing the entire HTML to your message. 208 00:20:43,790 --> 00:20:52,400 So this will give us a way to communicate to the user whatever is happening so we can send over a message 209 00:20:52,410 --> 00:20:52,880 value. 210 00:20:56,970 --> 00:21:11,160 And this can I use the tactics there so for sending in the HMO object and let's get data ID, new item 211 00:21:11,400 --> 00:21:11,880 made. 212 00:21:15,130 --> 00:21:22,300 So let's try that out and see what happens within the Massachusetts and new item made, ID 15. 213 00:21:27,620 --> 00:21:37,790 And then whatever messaging you want to send to the user and as we're updating, so let's go over to 214 00:21:37,790 --> 00:21:40,490 here where we're updating the item. 215 00:21:42,470 --> 00:21:44,510 So element ID. 216 00:21:48,870 --> 00:21:54,660 And updated, and then here we can write out that it's been deleted. 217 00:21:59,230 --> 00:22:08,160 So this way, the user is going to know what's going on, deleted number nine, updated 12 and so on. 218 00:22:09,190 --> 00:22:13,990 So it's got the full communication whenever we're making any updates to the data. 219 00:22:14,260 --> 00:22:15,350 And that's all being done. 220 00:22:16,390 --> 00:22:24,400 So now we're ready to apply styling to the page elements and go ahead and test it out, make sure that 221 00:22:24,400 --> 00:22:26,800 you've got the functionality that you want. 222 00:22:26,830 --> 00:22:31,360 And next up, let's apply the styling to the page elements. 223 00:22:32,230 --> 00:22:34,420 So selecting the element content. 224 00:22:39,480 --> 00:22:44,280 And actually, I want to center all of the elements within container. 225 00:22:47,830 --> 00:22:59,820 So what's in the container, we'll do a text, a line and central line and also to a margin of order 226 00:23:00,160 --> 00:23:00,970 for the elements. 227 00:23:02,470 --> 00:23:06,910 So that just centered that content there for the load posts. 228 00:23:10,060 --> 00:23:12,550 Right in a class for Lord posts. 229 00:23:14,700 --> 00:23:26,270 And let's set the display to block what is going to be 50 percent font size, sixty one point five p.m., 230 00:23:27,310 --> 00:23:29,930 et cetera, background color to it. 231 00:23:30,780 --> 00:23:37,770 So this can be bluish color or blue color and then the font can be white 232 00:23:40,470 --> 00:23:44,370 and going into the load posts button. 233 00:23:45,720 --> 00:23:55,580 So it's as button to class list, add and add the class of load posts. 234 00:23:57,780 --> 00:24:06,180 So it's just applying the styling to the page elements and do margin of order for it. 235 00:24:06,990 --> 00:24:08,070 So to center it. 236 00:24:08,080 --> 00:24:10,530 So we've got a big button there to load the posts. 237 00:24:11,190 --> 00:24:13,650 So whenever that gets clicked, that's going to load the posts. 238 00:24:14,310 --> 00:24:16,680 Let's create one for the message. 239 00:24:22,850 --> 00:24:25,820 And this can have a font size of one 240 00:24:28,730 --> 00:24:33,830 and the color, so make it slightly off block. 241 00:24:36,480 --> 00:24:37,860 Allowed some padding. 242 00:24:41,440 --> 00:24:51,520 And now let's apply to that message element, so message elements, class list and the class of message 243 00:24:51,520 --> 00:24:51,930 to it. 244 00:24:53,680 --> 00:24:55,920 So it gives us a little bit of styling around that. 245 00:24:56,560 --> 00:24:58,600 Also, maybe we'll add in a border. 246 00:25:06,180 --> 00:25:12,510 So added in some styling around the message area, let's also update the input fields. 247 00:25:16,610 --> 00:25:23,150 And updating the input fields for all of the inputs, or we could just do it for the being container 248 00:25:23,150 --> 00:25:23,670 inputs. 249 00:25:23,690 --> 00:25:25,500 So we've got it ready for the box inputs. 250 00:25:26,090 --> 00:25:29,510 So how about we do separate input here? 251 00:25:33,410 --> 00:25:41,030 And I'll just give it a class of my in so that we can update the inputs and actually that's not going 252 00:25:41,030 --> 00:25:43,140 to look good at 90 percent. 253 00:25:43,250 --> 00:25:46,450 So let's do a separate, separate class for it. 254 00:25:50,320 --> 00:25:54,130 So this is just further info for the selection of the info items. 255 00:25:58,450 --> 00:25:59,740 And in. 256 00:26:01,860 --> 00:26:10,980 To this element where we've got the input and the button, so I'm going to add the select info to both 257 00:26:10,980 --> 00:26:11,340 of those. 258 00:26:16,300 --> 00:26:27,670 So where we've got the button to create new so for button one dot class list, go ahead and add the 259 00:26:27,670 --> 00:26:33,490 class of select info and then also for the input that we created. 260 00:26:34,250 --> 00:26:37,270 And we've got quite a few elements here on the page. 261 00:26:37,990 --> 00:26:44,190 So where we're creating an input and that's actually an existing one. 262 00:26:45,280 --> 00:26:46,680 So we didn't actually create that one. 263 00:26:47,560 --> 00:26:49,670 So other classless to that as well. 264 00:26:51,640 --> 00:27:03,850 So as we're updating the elements, the width of 40 percent and display and we'll do an inline block. 265 00:27:07,750 --> 00:27:11,410 And maybe even do 30 percent make those smaller? 266 00:27:14,830 --> 00:27:18,220 So let's do a height for these. 267 00:27:20,720 --> 00:27:21,740 For iPIX. 268 00:27:24,330 --> 00:27:28,320 So nice and big update the font size. 269 00:27:34,820 --> 00:27:38,240 And that we can just have as the title area. 270 00:27:42,610 --> 00:27:46,010 So create new, so that actually is going to create a new one. 271 00:27:46,210 --> 00:27:47,860 We get the message here at the top. 272 00:27:51,880 --> 00:27:59,110 Let's apply some styling for the inputs within the box, so add some margin. 273 00:28:02,730 --> 00:28:05,070 And we can do an auto for left and right. 274 00:28:10,020 --> 00:28:13,840 Also, let's update the font size to one point two a.m.. 275 00:28:17,390 --> 00:28:18,920 And then for the buttons. 276 00:28:22,530 --> 00:28:24,810 Let's add some padding around these. 277 00:28:29,440 --> 00:28:34,960 And then for each one of these, we've got two of them, so we've got the update and the delete can 278 00:28:34,960 --> 00:28:42,420 also set a default width for them and update the cursor to pointer. 279 00:28:43,780 --> 00:28:45,910 So they're nice and clickable buttons. 280 00:28:47,830 --> 00:28:51,290 So for the buttons themselves, these are also going. 281 00:28:51,520 --> 00:28:57,130 So these input buttons and update, they're also contained within a div. 282 00:28:57,460 --> 00:29:01,150 So this way we can select a mean input div. 283 00:29:01,420 --> 00:29:11,020 So this can be kind of like a dashboard kind of options that we have for the buttons and we can also 284 00:29:11,020 --> 00:29:14,870 select the first item as well as the second item. 285 00:29:15,580 --> 00:29:19,150 So using the first child pseudo class. 286 00:29:21,270 --> 00:29:30,330 And set the background color, so for updates, let's set the background color to green and then for 287 00:29:30,330 --> 00:29:34,290 last child, let's get the background color to red. 288 00:29:37,720 --> 00:29:43,450 And so I thought to read and then for dashboard itself. 289 00:29:46,780 --> 00:29:54,400 Well, we'll select the color of the elements to be white, and that should just be color. 290 00:29:57,640 --> 00:30:03,910 And now let's go back into the code and where we're creating that parent device before we're adding 291 00:30:03,910 --> 00:30:08,420 the buttons, we're going to add the class of dashboard to that device. 292 00:30:08,800 --> 00:30:12,540 So it's a pleaing appended to this buttons div. 293 00:30:12,550 --> 00:30:18,940 So buttons and class list add and add the class of dashboard to it. 294 00:30:22,340 --> 00:30:28,530 And child, and this is where we just need to specify the child that we want to apply the color to. 295 00:30:29,760 --> 00:30:31,910 So selecting and let's do that. 296 00:30:31,910 --> 00:30:32,690 And the child. 297 00:30:34,950 --> 00:30:41,540 And have the color be applied of red to this. 298 00:30:47,130 --> 00:30:50,250 And we need to also specify that these are the buttons. 299 00:30:53,750 --> 00:31:00,560 And for the buttons, said the text, to be white, let's make the font size big. 300 00:31:05,830 --> 00:31:07,340 And maybe that's a little bit too big. 301 00:31:07,360 --> 00:31:19,540 So just keep that one and we can do also border radius to around the borders of the buttons and also 302 00:31:19,540 --> 00:31:20,470 for the buttons. 303 00:31:20,500 --> 00:31:21,880 Let's create a hover effect. 304 00:31:23,080 --> 00:31:28,870 So now that we've added colors, we can add a hover effect with opacity. 305 00:31:30,880 --> 00:31:34,600 And then, of course, you can apply styling and make the updates as needed. 306 00:31:36,420 --> 00:31:43,140 Thanks for this lesson are to make sure that you've got the page posts being output within the HTML 307 00:31:43,380 --> 00:31:46,470 so that the user can interact with them, they can select them. 308 00:31:46,650 --> 00:31:49,260 You can also put them within input fields. 309 00:31:49,490 --> 00:31:53,870 That's going to make it a little bit easier in order to make updates to the title and the author. 310 00:31:54,120 --> 00:32:01,320 So create the event listeners so that the user can select either to update or to delete the page posts 311 00:32:01,590 --> 00:32:04,410 and also provide feedback to the user. 312 00:32:04,620 --> 00:32:10,410 So some type of messaging so the user knows if they've updated what they've what action has been taken 313 00:32:10,800 --> 00:32:15,990 and then send the corresponding put or delete method to the JSON server. 314 00:32:16,140 --> 00:32:23,400 So for the update, get the data from the input fields and create it as a JSON object, sending that 315 00:32:23,400 --> 00:32:25,890 over to the JSON server, using the put method. 316 00:32:27,510 --> 00:32:35,310 Also for the delete select element ID from the database that's being put to the page and then remove 317 00:32:35,310 --> 00:32:42,660 it from the JSON database, sending over the fetch request to delete using the delete method, also 318 00:32:42,660 --> 00:32:49,800 apply, add staling, debug the application and work through it just to make sure it's working properly, 319 00:32:50,010 --> 00:32:56,580 that you can load the posts, you can create new posts, you can update posts and you can delete posts 320 00:32:57,060 --> 00:33:03,180 all being done from the front end code for the user to be able to interact with the data within the 321 00:33:03,180 --> 00:33:04,160 JSON database.