1
00:00:00,990 --> 00:00:07,560
Welcome to part three of the Jason Placeholder API Testor, so we've completed the application, applied

2
00:00:07,560 --> 00:00:14,160
some styling to it, we can select the posts individually and that outputs them to the page and he posts

3
00:00:14,160 --> 00:00:16,320
that is shown it's editable.

4
00:00:16,320 --> 00:00:23,580
So if we want to make changes to the post, we can do that and update the body contents and then save

5
00:00:23,580 --> 00:00:24,570
it to the server.

6
00:00:24,780 --> 00:00:29,900
The server gets the new saved item and it sends it over to the server.

7
00:00:30,420 --> 00:00:34,680
We can also and it does a response box so it automatically adds to the page.

8
00:00:34,830 --> 00:00:37,980
And so we've got the idea for an idea for added twice.

9
00:00:38,160 --> 00:00:40,920
We can delete any of the items on the page as well.

10
00:00:40,920 --> 00:00:47,870
So we added in the delete method request, we can load all of the posts that are currently available,

11
00:00:47,880 --> 00:00:50,370
so just appends it to the output area.

12
00:00:50,970 --> 00:00:52,800
So these are all of the posts.

13
00:00:53,040 --> 00:00:59,070
Select any one of them, make updates to them, and whenever we make updates, save it to the server.

14
00:00:59,190 --> 00:01:02,910
It's going to add the newly updated version with the ID at the top.

15
00:01:03,540 --> 00:01:05,670
You can also select delete any one of them.

16
00:01:05,970 --> 00:01:09,630
And then also in addition, you can add items and content.

17
00:01:09,900 --> 00:01:13,590
So add objects and that just automatically adds it to the top.

18
00:01:13,590 --> 00:01:20,090
So it gives it a new ID and then you can select these and update them, save them and also delete them.

19
00:01:22,380 --> 00:01:27,240
And the reason it's throwing an error there is because this is still the testing server, so the other

20
00:01:27,240 --> 00:01:34,410
up to I.D. one on one, and as we're trying to delete something above the one hundred, so we only have

21
00:01:34,410 --> 00:01:37,830
the all of the posts and this is the default data.

22
00:01:37,830 --> 00:01:40,140
So it's not actually updating that database.

23
00:01:40,140 --> 00:01:41,850
So we can we can throw errors.

24
00:01:42,000 --> 00:01:45,450
And some of those errors, they're not actually errors within the code.

25
00:01:45,450 --> 00:01:50,940
They're errors because the server is a testing server and it doesn't have over ID 100.

26
00:01:52,170 --> 00:01:56,120
In the last lesson, we have the ability to load all of the posts.

27
00:01:56,130 --> 00:01:59,610
We also have an option to add new posts.

28
00:01:59,910 --> 00:02:04,320
And then whenever the user selects them, we can make those posts editable.

29
00:02:05,790 --> 00:02:12,390
And then we also have the ability to send the data over to the server and it's already structured within

30
00:02:12,390 --> 00:02:14,040
that post format.

31
00:02:14,190 --> 00:02:19,340
So it's going to allow us to very easily post and put that content to the server.

32
00:02:19,680 --> 00:02:29,760
So instead of logging it out to the console, will create a function to handle put item and then whatever

33
00:02:29,760 --> 00:02:33,780
the JSON data is that we want to send to the server.

34
00:02:34,020 --> 00:02:37,530
So we have to do is string ify it and then we can post that item.

35
00:02:38,430 --> 00:02:46,740
So one of the other values that we also need is to get the ID so past that into the put item function,

36
00:02:47,820 --> 00:02:54,390
so already have the temporary object within JavaScript object format and then also just to distinguish

37
00:02:54,390 --> 00:03:01,080
the item as we're going to need it for the URL path, we can get the info ID so you can also get it

38
00:03:01,080 --> 00:03:02,660
from the JSON ID.

39
00:03:02,820 --> 00:03:04,110
So it's going to be the same thing.

40
00:03:04,530 --> 00:03:05,160
So it's up to you.

41
00:03:05,160 --> 00:03:11,820
We can pass it in as I as just state as well as that information is already being passed.

42
00:03:11,820 --> 00:03:18,030
So we want to grab the ID value as it's going to be part of the route where we're putting the information

43
00:03:18,330 --> 00:03:20,570
and then the rest is going to be contained within the body.

44
00:03:21,210 --> 00:03:30,960
So getting the JSON and ID value and then also lets output the adjacent object entirely as well and

45
00:03:30,960 --> 00:03:35,970
save load the posts, click it and clear the console.

46
00:03:36,480 --> 00:03:37,680
So we're saving it.

47
00:03:37,710 --> 00:03:44,370
We're getting the road for one hundred, which corresponds with the value also for the user ID.

48
00:03:46,320 --> 00:03:49,980
We can also get the user I.D. because it looks like it is changing.

49
00:03:49,980 --> 00:03:51,000
So it's not always one.

50
00:03:51,750 --> 00:03:57,960
So selecting the user ID value so that it corresponds with post data that's being output.

51
00:04:01,110 --> 00:04:06,780
So let's create the put request, and this is actually going to be very similar to what we had when

52
00:04:06,780 --> 00:04:12,000
we're doing the post, so we could as well create a function in order to handle that.

53
00:04:15,570 --> 00:04:19,620
So selecting all of this information.

54
00:04:22,990 --> 00:04:24,640
And I'll just create a function.

55
00:04:28,480 --> 00:04:33,940
Make request and then the content that we need to pass in there.

56
00:04:44,630 --> 00:04:54,200
So while passing the JSON object and then instead of strengthening the body, we can contact that and

57
00:04:54,200 --> 00:04:55,350
just pass in the adjacent.

58
00:04:55,370 --> 00:04:58,960
So that's the only value that's going to be changing from our request.

59
00:04:59,300 --> 00:05:02,560
And this is going to make it easier for us to make those requests.

60
00:05:02,900 --> 00:05:09,060
So add to page data and we want to make the request object.

61
00:05:09,350 --> 00:05:12,330
This is the content body that we want to pass on.

62
00:05:13,310 --> 00:05:17,690
So this is our JSON object with the user ID of one.

63
00:05:23,740 --> 00:05:27,880
And the U.S. is actually going to be the same, so we don't need the all in here.

64
00:05:30,480 --> 00:05:35,520
And so it would just make the request with Jason, we'll try it out just to make sure it works.

65
00:05:37,980 --> 00:05:39,480
So we create a new one.

66
00:05:41,400 --> 00:05:44,400
That will create the new post idee.

67
00:05:49,530 --> 00:06:01,190
And we also want to specify the method, so we want to send it as a post, and this also should be dynamic.

68
00:06:01,470 --> 00:06:03,810
So just call it math for the method.

69
00:06:04,830 --> 00:06:08,520
And that way we can dynamically update and make those requests.

70
00:06:09,360 --> 00:06:11,160
So for the request itself.

71
00:06:13,510 --> 00:06:15,440
Just double check and make sure it's working.

72
00:06:15,580 --> 00:06:19,450
So we are passing through the title The Body and adding a new item.

73
00:06:22,730 --> 00:06:27,230
So we're we're making the selection and doing the put item.

74
00:06:32,600 --> 00:06:37,370
We can simplify this and do a put request.

75
00:06:40,010 --> 00:06:47,660
And get that temporary object, so we don't even need an extra function in order to handle that, or

76
00:06:47,660 --> 00:06:52,550
if we want to keep it like this, we can just keep that that function and then do the.

77
00:07:02,510 --> 00:07:03,410
Make request.

78
00:07:06,130 --> 00:07:07,750
Within this function separately.

79
00:07:10,490 --> 00:07:16,280
So depending on what's easier for you to read, so make the request and the method in this case is going

80
00:07:16,280 --> 00:07:21,260
to be a put request, so load all of the elements

81
00:07:24,500 --> 00:07:26,800
and make an update to it.

82
00:07:29,270 --> 00:07:31,880
And it cleared, so send it to the server.

83
00:07:37,230 --> 00:07:46,500
And we also need to put to a specific path for the euro, so we also need to pass the European.

84
00:07:49,650 --> 00:07:57,720
So it looks like we need the URL value as we're posting to a specific path.

85
00:07:59,100 --> 00:08:07,140
Let's send the URL in and add the URL and copy.

86
00:08:09,360 --> 00:08:10,410
Copy that you are.

87
00:08:11,940 --> 00:08:22,380
So within the put value and we want to post it too and forward slash, then let's concatenate the JSON

88
00:08:22,380 --> 00:08:22,990
ID to it.

89
00:08:24,750 --> 00:08:27,900
And so this is going to pass through the usual object.

90
00:08:28,740 --> 00:08:30,000
So try that one more time.

91
00:08:36,130 --> 00:08:38,440
And clear, so save to the server.

92
00:08:41,460 --> 00:08:50,520
So we do get the response back from the server on our updated item, so what it's doing is as it's still

93
00:08:50,520 --> 00:08:54,960
matching the same pattern as before, where it's just making an update to our list.

94
00:08:56,970 --> 00:09:01,260
And of course, because this is a testing API, it's not saving to that end result.

95
00:09:03,240 --> 00:09:09,300
But we do have the ability to make the updates and save that updated data, send it over to the server,

96
00:09:09,450 --> 00:09:11,820
and then this is the response back from the server.

97
00:09:12,000 --> 00:09:16,460
So we do see that it matches the same parameters as the one that we saved.

98
00:09:17,100 --> 00:09:24,630
And so also, whenever we're saving it, we want to remove out the button and then also remove out that

99
00:09:24,630 --> 00:09:25,380
active class.

100
00:09:32,300 --> 00:09:39,320
Or we might want to just released all of the posts, so there's a few options there on how to handle

101
00:09:39,320 --> 00:09:39,590
that.

102
00:09:46,560 --> 00:09:53,750
So I'll do this as well, where when we do the safe, we can only do it once and then when it gets clicked,

103
00:09:56,040 --> 00:09:58,830
we're going to remove out the editable.

104
00:09:59,880 --> 00:10:06,780
So we loop through all of them and editable will just be set to false.

105
00:10:07,920 --> 00:10:11,310
And we can do this because we already have the elements on the main.

106
00:10:18,250 --> 00:10:23,560
And we can also remove it, so remove the act of class from Main.

107
00:10:25,820 --> 00:10:32,960
So just update us to remove and then let's take the silver button.

108
00:10:36,550 --> 00:10:42,970
And just do a move on it so all posts make an update.

109
00:10:46,110 --> 00:10:56,340
Save the update and so that resets are back to normal and we can't actually replicate because that main

110
00:10:56,340 --> 00:10:58,340
element only has just the once.

111
00:10:58,860 --> 00:11:01,020
So there's no option to reset that.

112
00:11:01,680 --> 00:11:03,690
So there's different ways around that.

113
00:11:04,110 --> 00:11:11,280
But one of the best ways is typically just to load the new content, as when you do have the server

114
00:11:11,280 --> 00:11:14,850
response, you wouldn't be adding it to the top, you might be handling it differently.

115
00:11:14,850 --> 00:11:17,250
So you might reload the new content into here.

116
00:11:17,430 --> 00:11:21,390
And there's various options that you can apply to the coding.

117
00:11:27,740 --> 00:11:30,290
So you can also delete a resource if you want.

118
00:11:30,980 --> 00:11:35,810
So there's a delete method as well, so let's add that option.

119
00:11:35,810 --> 00:11:40,640
And so if you want to delete the message from the from the list.

120
00:11:45,050 --> 00:11:52,370
And just as we added the button to save it, we also might want to have an additional button, maybe

121
00:11:52,370 --> 00:11:55,730
at the bottom, just outside of the main that will delete it.

122
00:12:01,190 --> 00:12:07,670
So this can go outside of output, as we don't want it contained within the main because we already

123
00:12:07,670 --> 00:12:09,050
have the event listener on Main.

124
00:12:11,980 --> 00:12:24,640
No button, and this will go into Output's and it'll be a button and it will say delete item and then

125
00:12:24,640 --> 00:12:26,920
we can also have the ID value.

126
00:12:32,880 --> 00:12:39,570
And then just add to it and then if delete button out of that, Mr..

127
00:12:45,860 --> 00:12:50,960
And the fact that we're listening for is going to be click so it gets clicked.

128
00:12:52,890 --> 00:13:00,300
We can run the delete process so it can make fetch request to delete the item and then also some of

129
00:13:00,330 --> 00:13:10,260
the processes that we need to do as well, or we'd have to take mean and remove it, delete button and

130
00:13:10,260 --> 00:13:14,580
remove it so it would remove both of those from the page.

131
00:13:16,680 --> 00:13:19,530
And let's send our delete request.

132
00:13:22,950 --> 00:13:30,420
Item and the parameters that we need to send for delete, so we just need to have a method, delete

133
00:13:30,780 --> 00:13:40,590
and send it over to this path so we can also do this within the same list here where this is going to

134
00:13:40,590 --> 00:13:43,650
be our basic URL.

135
00:13:48,520 --> 00:13:50,590
Euro and then add to it.

136
00:13:52,450 --> 00:13:59,660
The posts, so it's a very simple request fetch and we're just doing a delete for it.

137
00:14:00,550 --> 00:14:06,070
So again, it's not going to be really deleted because this is fake.

138
00:14:07,180 --> 00:14:09,970
So we need to just specify the info ID.

139
00:14:14,720 --> 00:14:19,070
For the posts and sending over this as a delete.

140
00:14:21,490 --> 00:14:28,270
So it's not going to actually delete it, but this is just giving us our option to delete it, and that's

141
00:14:28,270 --> 00:14:32,170
deleting it from the page as well for the delete button

142
00:14:34,780 --> 00:14:35,740
class list.

143
00:14:35,860 --> 00:14:41,860
And let's add a class of delete and we can apply some styling to the button.

144
00:14:43,330 --> 00:14:48,220
So for the delete button, so do a display of block.

145
00:14:50,670 --> 00:15:02,130
So it goes all the way across with a conservative 50 percent margin set to auto sort centers of background

146
00:15:02,370 --> 00:15:05,190
color, so let's set the background color to red.

147
00:15:07,300 --> 00:15:09,550
And the color of the font can be white.

148
00:15:12,690 --> 00:15:14,370
And font size.

149
00:15:17,090 --> 00:15:18,220
So to 1:00 a.m..

150
00:15:22,690 --> 00:15:30,040
So the delete buttons and they're being it, so you can do it a number of different ways as well if

151
00:15:30,040 --> 00:15:38,350
you want, or you could add another div container to container and then have the button within there.

152
00:15:38,470 --> 00:15:43,710
And then that can just delete out the full element object that we've selected.

153
00:15:45,100 --> 00:15:46,930
So these ones are a little bit on top.

154
00:15:46,930 --> 00:15:48,370
So it's a little bit hard to see that.

155
00:15:49,120 --> 00:15:52,270
But this is just the styling thing that you can update as needed.

156
00:15:53,050 --> 00:15:54,880
And let's add some padding.

157
00:15:58,390 --> 00:16:02,080
So you can apply the styling, however, however, you feel best suited.

158
00:16:04,150 --> 00:16:14,010
Border radius, so slightly rounded buttons and also for delete hover.

159
00:16:16,880 --> 00:16:18,830
And I'll update the opacity.

160
00:16:23,060 --> 00:16:33,980
So all the posts and if we click them, they're editable, the save to server button, let's add some

161
00:16:34,880 --> 00:16:36,080
content to that.

162
00:16:39,320 --> 00:16:47,150
And I'll just call it save and save and how do we want to style this?

163
00:16:47,600 --> 00:16:54,890
So give it a color of green, how font can be white as well.

164
00:16:55,040 --> 00:16:58,990
And this is just that saver button, font size border radius.

165
00:16:59,360 --> 00:17:01,180
So I think everything else can be fine.

166
00:17:01,700 --> 00:17:08,270
So once we create the save button, let's add a class to a saver.

167
00:17:08,900 --> 00:17:12,530
So class list, add another class of save.

168
00:17:16,290 --> 00:17:24,450
So save to server, make the updates to it, say that let's also add some classes to these buttons and

169
00:17:24,450 --> 00:17:25,030
the inputs.

170
00:17:26,730 --> 00:17:36,120
So this is in our main output element and I just look at the element as it's getting fairly complex

171
00:17:36,120 --> 00:17:36,270
here.

172
00:17:36,280 --> 00:17:38,280
We've added quite a bit of stuff here.

173
00:17:38,850 --> 00:17:41,240
So this is all within this top area.

174
00:17:42,150 --> 00:17:45,990
So let's apply some styling to these elements.

175
00:17:47,980 --> 00:17:59,350
And this is going to be within output one, so output one and class list add.

176
00:18:08,470 --> 00:18:11,260
And this is just a I mean container.

177
00:18:16,950 --> 00:18:18,960
And I'll just give it a class of container one.

178
00:18:22,570 --> 00:18:25,570
So this is kind of like our controls and our dashboard.

179
00:18:31,100 --> 00:18:37,550
So let's just make sure that container one got added so we've got class of container one so we can apply

180
00:18:37,550 --> 00:18:39,020
the styling as needed.

181
00:18:41,870 --> 00:18:43,190
So let's do a font size.

182
00:18:46,510 --> 00:18:47,170
Podding.

183
00:18:50,410 --> 00:18:52,630
And to a margin of auto.

184
00:18:54,960 --> 00:19:00,860
Width of 80 percent and you can apply the styling, us, however, works best for you.

185
00:19:03,260 --> 00:19:06,350
Do a text, a line central line the text.

186
00:19:08,300 --> 00:19:10,760
Let's also update the inputs and the buttons.

187
00:19:12,470 --> 00:19:16,580
So inputs and also of the buttons.

188
00:19:23,140 --> 00:19:32,440
And also, let's apply it to BTN, not with the class of BTN, so making all of these big sports center

189
00:19:32,530 --> 00:19:34,090
and we don't need to center a line.

190
00:19:36,860 --> 00:19:41,180
Add some padding to it, make it a larger font size.

191
00:19:52,830 --> 00:20:00,570
I had actually turned out a little bit too big, so I want to have the add items to the new line so

192
00:20:00,570 --> 00:20:02,870
you can apply the styling as needed as well.

193
00:20:07,490 --> 00:20:14,000
So the load load all posts, let's create block object for that.

194
00:20:17,530 --> 00:20:18,820
So for button one.

195
00:20:22,950 --> 00:20:31,860
And I'll just update the style display and also to display to people, OK, so that I have a new line

196
00:20:31,860 --> 00:20:32,240
for it.

197
00:20:36,170 --> 00:20:39,560
And let's set the margin to auto for them

198
00:20:44,150 --> 00:20:47,560
and also just going to add some Google fonts to it as well.

199
00:20:48,500 --> 00:20:57,350
So selecting the Google font do an import of it within the style elements and then we'll select this

200
00:20:57,350 --> 00:20:59,950
and add it to the body of the page.

201
00:21:02,480 --> 00:21:05,810
So all of the elements will have this font family.

202
00:21:06,860 --> 00:21:07,970
So see what that looks like.

203
00:21:13,460 --> 00:21:15,470
And let's do a load of the posts.

204
00:21:22,130 --> 00:21:28,370
And make sure everything is still working properly, going into the console and clear that and do a

205
00:21:28,370 --> 00:21:28,850
safe.

206
00:21:32,250 --> 00:21:38,520
So it saved this current version as well as it creates a new one right up at the top with the same ideas,

207
00:21:39,120 --> 00:21:42,930
and then actually you can edit this one because you can't edit the one that was just changed.

208
00:21:43,650 --> 00:21:48,900
We also have the option to delete items and update items on the page.

209
00:21:52,450 --> 00:21:55,570
So test it out and make sure you've got all of the functionality

210
00:21:57,970 --> 00:22:02,620
and build a fully functional application that interacts with the JSON placeholder.

211
00:22:12,090 --> 00:22:17,850
Thanks for this lesson, are to test out the application and make sure it's working as expected and

212
00:22:18,180 --> 00:22:22,500
then try out, put and delete methods, sending those requests to the server.

213
00:22:22,680 --> 00:22:29,250
So updating and allowing the user to interact with data on the page and effectively updating and interacting

214
00:22:29,250 --> 00:22:30,220
with the server data.

215
00:22:30,450 --> 00:22:36,600
So creating interactive page elements that you can save, you can delete and you can select and update

216
00:22:36,600 --> 00:22:44,520
the content to updating the content and also interacting with the page content and with Jason Server

217
00:22:44,520 --> 00:22:51,090
Response Data, update the page content accordingly, apply styling as needed to complete the application

218
00:22:51,090 --> 00:22:54,270
and also tested the application at the different end points.