1
00:00:00,840 --> 00:00:08,400
So this lesson we're going to continue to build with Jason Placeholder and add an option to post to

2
00:00:08,400 --> 00:00:13,620
the server, as well as selecting all of the available posts, and then also whenever they get clicked

3
00:00:13,620 --> 00:00:20,660
on, the posts can be edited and it's going to give us the option to save the data to the server.

4
00:00:20,670 --> 00:00:25,200
So the new updated data can be saved to the server.

5
00:00:25,500 --> 00:00:30,870
And I'll just try that one more time so you can see we're going to be passing in within JSON object

6
00:00:30,870 --> 00:00:32,530
format that we've got.

7
00:00:32,550 --> 00:00:33,300
Hello, world.

8
00:00:33,750 --> 00:00:40,740
We've got the body contents, we've got the correct ID and the correct values here.

9
00:00:42,390 --> 00:00:46,130
So we do have a bunch of different endpoints.

10
00:00:46,140 --> 00:00:50,660
So connecting to some of the other end points where we can create a resource.

11
00:00:50,660 --> 00:00:51,810
So we'll do that one as well.

12
00:00:51,990 --> 00:00:56,250
And then first, what we'll do is we'll list out all of the posts.

13
00:00:56,580 --> 00:01:02,900
So adding another button to the page and then that way we can output the content of the posts.

14
00:01:02,910 --> 00:01:09,000
So making a selection of the main container element, I'm going to append to the container.

15
00:01:11,190 --> 00:01:17,850
So using the documents query selector select elements and actually we just query selector.

16
00:01:18,240 --> 00:01:26,040
So select the elements with a class of container into a variable object container and that will allow

17
00:01:26,040 --> 00:01:28,650
us to append another button to the page.

18
00:01:29,340 --> 00:01:31,020
So let's create that button as well.

19
00:01:32,520 --> 00:01:40,080
And this can be button one and using the function that we have where we've got the add element, so

20
00:01:40,080 --> 00:01:45,270
add elements and it's going to require the parent, which is going to be container.

21
00:01:45,720 --> 00:01:55,020
The type of element is going to be button and the content of the button is going to be Lord all posts.

22
00:01:56,280 --> 00:01:58,200
And so add that to the page.

23
00:01:59,460 --> 00:02:05,070
And because we're actually pretending it's by default, it's adding it before.

24
00:02:05,580 --> 00:02:06,270
So that's fine.

25
00:02:06,280 --> 00:02:08,220
And you can also move this around if you want to.

26
00:02:08,610 --> 00:02:10,830
So add an event listener to that button.

27
00:02:11,490 --> 00:02:17,130
And this is button one, add event listener and event listener that we're adding for.

28
00:02:17,130 --> 00:02:27,570
So a click of the button load all and running a function called load all instead of loading data.

29
00:02:27,990 --> 00:02:32,520
And I'm going to copy this, create a function called Load All.

30
00:02:33,160 --> 00:02:34,170
I can save that.

31
00:02:34,620 --> 00:02:37,230
So right now what it's doing, it's making the same request.

32
00:02:38,220 --> 00:02:45,420
So if we want to just load everything, we can just have no posts variable value at the end.

33
00:02:46,050 --> 00:02:53,880
So it's going to make the request and loads all of the items that are currently within the list.

34
00:02:54,920 --> 00:02:59,580
It looks like there's one hundred items, so we want to load all of them to the page.

35
00:03:00,060 --> 00:03:06,780
So let's add items and create another function to do that.

36
00:03:06,990 --> 00:03:09,170
So we have an array that we want to loop through.

37
00:03:09,300 --> 00:03:17,580
So create the function, add items and then it'll just take in the JSON data that we need to iterate

38
00:03:17,580 --> 00:03:17,930
through.

39
00:03:17,940 --> 00:03:26,090
And this is actually an array so we can write off the bat, do a for each on it and running through

40
00:03:26,100 --> 00:03:33,750
and getting the items for each and also going to take the output and clear the contents of output as

41
00:03:33,750 --> 00:03:35,970
we've got a lot of items here on the page.

42
00:03:36,240 --> 00:03:43,170
So we're going to just list out everything from that mean adjacent object and we can reuse the add to

43
00:03:43,170 --> 00:03:43,620
page.

44
00:03:45,240 --> 00:03:51,440
So as we're looping through each one of the elements, we can do an add to page of that element.

45
00:03:51,990 --> 00:03:53,220
So let's see what that looks like.

46
00:03:53,550 --> 00:03:56,280
So that listed out all of the items on the page.

47
00:03:56,850 --> 00:04:04,230
So we're going to add in the ability so we have an option to create a resource using a post request.

48
00:04:04,590 --> 00:04:10,860
So we're going to need some more inputs at the top in order to create the resource and then we can append

49
00:04:10,860 --> 00:04:11,880
those to the container.

50
00:04:12,720 --> 00:04:15,270
So it looks like we're going to need another button.

51
00:04:17,700 --> 00:04:28,440
And we also will need another input, and I could just call it input one, and this will add another

52
00:04:28,440 --> 00:04:35,890
input to the page and I'm actually going to create another div and I'll just call it output one.

53
00:04:37,350 --> 00:04:42,870
So adding in an output element to the container and this is going to be a div.

54
00:04:43,080 --> 00:04:48,660
So this is where we can drop all of the new input field.

55
00:04:48,670 --> 00:04:49,570
So we're just creating.

56
00:04:50,490 --> 00:05:00,690
So just update the parent and for the input the type is going to be input and just leave that blank.

57
00:05:03,010 --> 00:05:11,910
So input one set attribute and attribute that we're setting type, and that's going to be text input,

58
00:05:14,890 --> 00:05:19,570
so that will add all of the stuff to the top for the button to.

59
00:05:22,460 --> 00:05:34,760
So button two is going to add item and for input one, let's add a placeholder, so call it for placeholder

60
00:05:35,780 --> 00:05:41,480
and the values that we have here, we've got so that we've got a title and a body.

61
00:05:42,470 --> 00:05:52,850
So let's go ahead and add the title as the placeholder and then we'll create another input and that

62
00:05:52,850 --> 00:05:53,570
can be the body.

63
00:05:53,750 --> 00:05:57,290
So this can be input to input too.

64
00:05:59,030 --> 00:06:03,140
And this is just the body content and you can use a text area as well.

65
00:06:03,150 --> 00:06:05,450
I'm going to just keep it at that.

66
00:06:05,450 --> 00:06:10,250
And we want to add the add item after.

67
00:06:10,280 --> 00:06:19,820
So load all of the posts and we're going to create the button first as we're preparing.

68
00:06:21,020 --> 00:06:27,740
So load all of the posts and then if we want to add an item, we've got that option for the input field

69
00:06:27,740 --> 00:06:28,290
there as well.

70
00:06:28,430 --> 00:06:33,860
So once you have it looking the way that you want and I'm going to apply styling afterwards, let's

71
00:06:33,860 --> 00:06:42,530
add an action to button two and that's going to take the contents of the two input fields and I'll post

72
00:06:42,530 --> 00:06:43,860
to the endpoint.

73
00:06:45,320 --> 00:06:47,600
So make a post request to the endpoint.

74
00:06:49,100 --> 00:06:55,400
So button to add event listener and whenever it gets clicked.

75
00:06:57,650 --> 00:07:04,010
Odd item, that's be the function that will run and also move things around here so that we've got all

76
00:07:04,010 --> 00:07:06,860
of the event listeners in one spot here.

77
00:07:11,290 --> 00:07:17,020
And all the elements that we're using for the page are, above all the that listeners are here, all

78
00:07:17,020 --> 00:07:18,610
the variables that we have.

79
00:07:18,910 --> 00:07:23,170
And I'm also going to add the variable rate at the top there for the BCU URL.

80
00:07:24,400 --> 00:07:32,560
And now we can create the function to add item and item contents are going to be contained within these

81
00:07:32,560 --> 00:07:33,460
input fields.

82
00:07:34,390 --> 00:07:43,000
So let's select the title and for the title we're getting the content from the input field.

83
00:07:43,270 --> 00:07:45,040
So input one value.

84
00:07:48,210 --> 00:07:55,500
And if there is no value, so just to condition there, so if there is no value for, then put one,

85
00:07:56,760 --> 00:08:01,950
then we'll just do title and for the body.

86
00:08:06,630 --> 00:08:15,720
And if there is no value for input to just double checking to make sure that input to is the body

87
00:08:19,830 --> 00:08:26,670
and just put body contents, so that will ensure that at least we have some content that we're posting.

88
00:08:27,510 --> 00:08:33,590
So the Futch request, the URL is going to be going to posts.

89
00:08:33,600 --> 00:08:34,830
So it's going to be the end point.

90
00:08:35,490 --> 00:08:38,850
And I'll just copy this to keep things simple.

91
00:08:39,590 --> 00:08:46,500
We also want to set up our options for the posts so you can do it as a separate variable or you can

92
00:08:46,500 --> 00:08:48,360
do it within the fetch request.

93
00:08:49,200 --> 00:08:53,090
So in this case, we'll do it differently than what we did last year.

94
00:08:53,190 --> 00:08:55,530
We'll have the options there as an object.

95
00:08:56,160 --> 00:09:03,490
So that's setting the method and you'll find it that it's done in different ways.

96
00:09:03,510 --> 00:09:05,280
So this is just providing the options.

97
00:09:05,460 --> 00:09:11,870
So the fetch parameters have an option for the euro and then options to set of this.

98
00:09:11,880 --> 00:09:15,660
Or you can set the method, the body, the headers and so on.

99
00:09:15,870 --> 00:09:22,250
And in this case, what we want it to do is make a selection and update the body contents.

100
00:09:22,650 --> 00:09:26,090
So this is all coming from JSON object.

101
00:09:26,730 --> 00:09:36,000
So getting body and we need to do a JSON string Afie and then create the object that we want to string

102
00:09:36,000 --> 00:09:36,120
of.

103
00:09:37,290 --> 00:09:39,810
And you can do this as separate variables as well.

104
00:09:39,990 --> 00:09:41,850
So whatever your preference is.

105
00:09:42,270 --> 00:09:47,360
So it's going to require a title and we do have a variable for that.

106
00:09:47,640 --> 00:09:54,210
It's going to also require a body and we do have a variable set for that and it's also going to require

107
00:09:54,210 --> 00:09:55,290
a user ID.

108
00:09:55,890 --> 00:09:59,000
So we're just going to use that one as a default value.

109
00:10:02,520 --> 00:10:10,470
And we also need to add headers to this as expecting the content type to be application JSON, so we're

110
00:10:10,470 --> 00:10:16,650
going to specify the content type and this is the headers that it does need within the object.

111
00:10:17,640 --> 00:10:19,710
And this object is.

112
00:10:22,400 --> 00:10:27,710
The body contents, so the header is another property within the main object of options.

113
00:10:30,550 --> 00:10:41,610
So set the content type and that's the property name and then the value is application.

114
00:10:42,550 --> 00:10:51,340
And Jason and then the semicolon and character set is equal to UTF Dash eight.

115
00:10:58,550 --> 00:11:05,340
And it's going to have a Jason return of the value, and for now we can consolidate the data.

116
00:11:06,380 --> 00:11:07,840
So let's try the add item.

117
00:11:08,270 --> 00:11:12,230
So this is what we get back the content that we've added.

118
00:11:12,860 --> 00:11:13,920
So it's got it.

119
00:11:14,270 --> 00:11:21,860
One hundred and one download all of the posts and it's actually not storing to the database.

120
00:11:21,860 --> 00:11:26,600
But if you had a life database, you'd have ID 101 would be storing to the post.

121
00:11:28,340 --> 00:11:29,930
Let's try that again.

122
00:11:32,730 --> 00:11:39,780
And I'll clear that so at item and this is the content that we're getting back, so this is also what

123
00:11:39,780 --> 00:11:41,730
we can do to add items.

124
00:11:45,870 --> 00:11:55,890
And add to Page using that same response object, so that will allow us to do the full request and add

125
00:11:55,890 --> 00:11:56,750
it to the page.

126
00:11:56,760 --> 00:12:00,210
So instead of logging it to the console, let's do an add to page.

127
00:12:01,770 --> 00:12:08,790
So it adds up to the page, adds another one to the page, and notice the idea is still the same.

128
00:12:09,300 --> 00:12:11,250
So again, it is a simulated endpoint.

129
00:12:12,570 --> 00:12:16,170
Let's also do an update to the elements.

130
00:12:16,530 --> 00:12:20,820
So we do have the ID value that's being output to the element object.

131
00:12:21,420 --> 00:12:28,170
So making them clickable and whenever we add them to the page, so we're we've got the add element.

132
00:12:29,640 --> 00:12:31,890
Let's make that clickable.

133
00:12:31,890 --> 00:12:36,490
So item at an event listener and the listener is going to be click.

134
00:12:37,500 --> 00:12:46,950
So whenever it gets clicked and we already have the info it, so let's load all the posts, clear the

135
00:12:46,950 --> 00:12:50,730
console and when we click it, I want to make this editable.

136
00:12:51,030 --> 00:12:53,610
So I want to update the item.

137
00:12:54,900 --> 00:13:01,020
And I'm also going to add another button here at the bottom that's going to allow us to make a save

138
00:13:01,020 --> 00:13:03,000
of the data and the contents.

139
00:13:04,420 --> 00:13:11,880
So let's add that button whenever we click it, then it's going to make it editable and we're going

140
00:13:11,880 --> 00:13:18,000
to spend another item to the main content, and that's just going to be clickable button.

141
00:13:21,230 --> 00:13:22,580
And I'll just call it Saver.

142
00:13:22,610 --> 00:13:30,980
So this is going to be our savior button, so adding to mean this is going to be a button object and

143
00:13:30,980 --> 00:13:37,480
the contents of the button save to server and it's going to simulate the saving of the server.

144
00:13:39,590 --> 00:13:45,020
So we're adding the button and it's actually being appended to the top there.

145
00:13:50,830 --> 00:13:54,100
So we can update that prepend append as well if we wanted to.

146
00:13:54,700 --> 00:13:57,400
So in this case, we'll just keep it here up at the top.

147
00:13:57,760 --> 00:14:06,160
So I also want to make this editable and once it's added this click event, I don't want it to be clickable

148
00:14:06,160 --> 00:14:06,560
anymore.

149
00:14:07,360 --> 00:14:14,200
So the main element, I don't want to have it clickable in in order to set it to only once within the

150
00:14:14,200 --> 00:14:18,640
hour of that listener, we have an option to add in a property for once.

151
00:14:18,820 --> 00:14:23,560
And if you set that to true, that's going to only allow the one click on the post.

152
00:14:24,550 --> 00:14:28,840
So select the post, click it and notice that we can't click it anymore.

153
00:14:28,840 --> 00:14:34,750
So if we only want the one click and we want to make this now editable so that make the content editable.

154
00:14:36,520 --> 00:14:39,190
So selecting the main object.

155
00:14:44,880 --> 00:14:51,530
And so to attribute to content added to table.

156
00:14:54,020 --> 00:15:02,810
And set that to trial, so let's see what happens, so we click it and now the content is editable so

157
00:15:02,810 --> 00:15:05,540
we can make updates to the content

158
00:15:08,270 --> 00:15:12,340
and we might not want to make all of it editable.

159
00:15:12,830 --> 00:15:22,100
So let's actually limit what we make editable, where we're going to get the main, but we only want

160
00:15:22,100 --> 00:15:25,360
the paragraph and the title to be editable.

161
00:15:27,050 --> 00:15:31,310
So with the mean, we need to make a selection of those elements.

162
00:15:37,660 --> 00:15:42,970
And let's actually add in a class to them so we can select the elements by class.

163
00:15:45,690 --> 00:15:52,290
And I'll give it a class of edit me, so whichever ones we want to make editable, we'll give a class

164
00:15:52,290 --> 00:15:57,750
to edit me and let's make a selection of the elements.

165
00:15:58,920 --> 00:16:07,230
And within the main object, using query selector all select all of the elements of the class of edit

166
00:16:07,230 --> 00:16:11,890
me and then we'll loop through that element.

167
00:16:12,630 --> 00:16:14,100
Actually, this should be plural.

168
00:16:16,970 --> 00:16:26,570
So loop through for each and return back each element and then for that element, we're going to add

169
00:16:26,570 --> 00:16:28,280
the attribute to make it editable.

170
00:16:28,880 --> 00:16:32,960
So that will limit the ability for the user to edit the entire object.

171
00:16:35,060 --> 00:16:36,200
So this is editable.

172
00:16:39,730 --> 00:16:41,230
And actually, let me update that.

173
00:16:46,540 --> 00:16:50,770
And this is actually looking for a class, that's why it wasn't working.

174
00:16:50,800 --> 00:16:57,370
So now we can select this, we can select that, and then we've got an option to save to the server.

175
00:16:57,520 --> 00:16:59,040
So we can't update it.

176
00:16:59,200 --> 00:17:01,750
We can't make any other changes.

177
00:17:03,460 --> 00:17:07,840
So once we do a save to the server, once we click that button

178
00:17:10,480 --> 00:17:12,910
and for the save to the server.

179
00:17:16,480 --> 00:17:27,550
We need to add an option for that button, so Seiver at an event listener, and that is also going to

180
00:17:27,550 --> 00:17:32,790
be a click and save to server.

181
00:17:33,550 --> 00:17:41,050
So we need to posehn some information and that's going to be the details that we've got within their

182
00:17:41,140 --> 00:17:42,120
element fields.

183
00:17:46,900 --> 00:17:49,750
So when we do to save to the server.

184
00:17:55,400 --> 00:18:04,730
We've got the content of each one of the elements that are updated within the El's object, so as well,

185
00:18:05,360 --> 00:18:06,290
we'll just going to do.

186
00:18:11,230 --> 00:18:15,820
The function here and then so it's a lot more clear how we're passing the data.

187
00:18:16,510 --> 00:18:19,840
So first we're going to just construct the temporary data.

188
00:18:20,050 --> 00:18:26,320
It's a temporary object and this is going to take whatever the values are.

189
00:18:26,440 --> 00:18:37,780
So we've got our title and it's going to take from El's the first element and body is going to take

190
00:18:37,780 --> 00:18:41,110
from El's one.

191
00:18:43,090 --> 00:18:45,760
And we can also have the ID within this.

192
00:18:46,220 --> 00:18:50,290
So the ID of this object is going to be whatever the info ID is.

193
00:18:52,100 --> 00:18:54,810
And then also we can do a user ID.

194
00:18:55,270 --> 00:19:03,610
So if we keep it within the same format as we're submitting when we're creating it, then we can easily

195
00:19:03,610 --> 00:19:11,590
pass that object information over to the server with a put request so that user ID is going to be one.

196
00:19:12,400 --> 00:19:20,180
And for now we'll just console log out that temp object and save it.

197
00:19:20,350 --> 00:19:21,700
So select a post.

198
00:19:22,180 --> 00:19:29,910
I go to the edit mode and then when we're ready, let's clear the console and save the server.

199
00:19:32,170 --> 00:19:39,060
So we need to also specify the value and the value of those elements.

200
00:19:40,000 --> 00:19:49,060
And also, once we go into the edit mode, let's take mean style and we'll do.

201
00:19:58,820 --> 00:20:08,930
Or we'll just start a class class list, too, and add a class of active so that we can see something

202
00:20:08,930 --> 00:20:13,090
is different there when we've actually made the selection to use it.

203
00:20:15,160 --> 00:20:17,560
And this can just be a background color.

204
00:20:19,730 --> 00:20:21,600
And I'll make it red for now.

205
00:20:22,430 --> 00:20:30,860
So there's our posts, once we select it, we can edit it and then once we're ready to save the content,

206
00:20:31,130 --> 00:20:32,410
we save it to the server.

207
00:20:33,020 --> 00:20:36,470
So it looks like there was an issue there with passing.

208
00:20:40,360 --> 00:20:49,660
So let's get more details about that and actually there should be tax content as this these weren't

209
00:20:49,660 --> 00:20:52,300
inputs, so that was why.

210
00:20:56,430 --> 00:21:03,390
We weren't able to pass any of the details, so clear, safe to server, so it's passing in the object

211
00:21:03,390 --> 00:21:07,260
information and this is exactly what the server needs to pass over.

212
00:21:07,800 --> 00:21:13,170
So we're ready actually to do put request to the server with the updated value.

213
00:21:13,680 --> 00:21:21,840
So let's apply a little bit more styling and within that octave and maybe read this a little bit too

214
00:21:21,840 --> 00:21:22,770
strong of a color.

215
00:21:26,320 --> 00:21:37,900
And within the active, so we do have the subtext within the paragraph and as well we have active and

216
00:21:37,900 --> 00:21:41,080
under each one, let me double check.

217
00:21:41,980 --> 00:21:43,570
So we're creating that each one.

218
00:21:45,550 --> 00:21:48,340
And we can also do the class of edit me.

219
00:21:48,880 --> 00:21:57,100
So make a selection and let's do a background color of these to be white and also a border.

220
00:22:01,570 --> 00:22:07,350
And do kind of off block border for it, so let's see what happens.

221
00:22:12,150 --> 00:22:14,220
So that's gives us more of.

222
00:22:18,700 --> 00:22:21,940
What we've got for the elements that were editing.

223
00:22:25,720 --> 00:22:33,970
And we can also see a color of white smoke, so if we select all the posts, we can select whichever

224
00:22:33,970 --> 00:22:40,100
one we want to edit, and I'm actually going to update this to active paragraph.

225
00:22:41,230 --> 00:22:45,640
And the reason it's not working as other extra coal in their.

226
00:22:49,000 --> 00:22:58,210
So we don't actually need tax color of light, so all posts and when we select it and these are contained

227
00:22:58,210 --> 00:23:04,380
with an output, so it's going to be active and then with an active we have the class of edit me.

228
00:23:04,810 --> 00:23:06,340
So it's not immediately underneath.

229
00:23:12,470 --> 00:23:13,790
And then save to the server.

230
00:23:16,070 --> 00:23:22,520
So coming up next, we'll complete the put request to the server for the Jason Placeholder test.

231
00:23:22,520 --> 00:23:28,820
Her application asks for this lesson are to create and load all of the posts from the JSON placeholder

232
00:23:28,820 --> 00:23:29,410
endpoint.

233
00:23:29,630 --> 00:23:36,350
So I put all of the posts to the page, also make the posts as interactive elements so the user can

234
00:23:36,350 --> 00:23:39,260
select the posts that they're making.

235
00:23:39,260 --> 00:23:45,710
The selection from what the details, the title, the body and the user ID and information create a

236
00:23:45,710 --> 00:23:49,220
new post, also have the input fields.

237
00:23:49,430 --> 00:23:57,380
So allowing the user to add items and sending the newly created item with the post method to the server

238
00:23:57,710 --> 00:24:00,560
and then handle the response, adding it to the page as well.

239
00:24:01,160 --> 00:24:07,970
Add attributes and styling to the page elements to create the interaction and then make content editable

240
00:24:08,240 --> 00:24:16,880
in order to prepare to send the newly edited content back to the server, updating the post with whatever

241
00:24:16,880 --> 00:24:18,830
ID the user has selected.