So this lesson we're going to continue to build with Jason Placeholder and add an option to post to
the server, as well as selecting all of the available posts, and then also whenever they get clicked
on, the posts can be edited and it's going to give us the option to save the data to the server.
So the new updated data can be saved to the server.
And I'll just try that one more time so you can see we're going to be passing in within JSON object
format that we've got.
Hello, world.
We've got the body contents, we've got the correct ID and the correct values here.
So we do have a bunch of different endpoints.
So connecting to some of the other end points where we can create a resource.
So we'll do that one as well.
And then first, what we'll do is we'll list out all of the posts.
So adding another button to the page and then that way we can output the content of the posts.
So making a selection of the main container element, I'm going to append to the container.
So using the documents query selector select elements and actually we just query selector.
So select the elements with a class of container into a variable object container and that will allow
us to append another button to the page.
So let's create that button as well.
And this can be button one and using the function that we have where we've got the add element, so
add elements and it's going to require the parent, which is going to be container.
The type of element is going to be button and the content of the button is going to be Lord all posts.
And so add that to the page.
And because we're actually pretending it's by default, it's adding it before.
So that's fine.
And you can also move this around if you want to.
So add an event listener to that button.
And this is button one, add event listener and event listener that we're adding for.
So a click of the button load all and running a function called load all instead of loading data.
And I'm going to copy this, create a function called Load All.
I can save that.
So right now what it's doing, it's making the same request.
So if we want to just load everything, we can just have no posts variable value at the end.
So it's going to make the request and loads all of the items that are currently within the list.
It looks like there's one hundred items, so we want to load all of them to the page.
So let's add items and create another function to do that.
So we have an array that we want to loop through.
So create the function, add items and then it'll just take in the JSON data that we need to iterate
through.
And this is actually an array so we can write off the bat, do a for each on it and running through
and getting the items for each and also going to take the output and clear the contents of output as
we've got a lot of items here on the page.
So we're going to just list out everything from that mean adjacent object and we can reuse the add to
page.
So as we're looping through each one of the elements, we can do an add to page of that element.
So let's see what that looks like.
So that listed out all of the items on the page.
So we're going to add in the ability so we have an option to create a resource using a post request.
So we're going to need some more inputs at the top in order to create the resource and then we can append
those to the container.
So it looks like we're going to need another button.
And we also will need another input, and I could just call it input one, and this will add another
input to the page and I'm actually going to create another div and I'll just call it output one.
So adding in an output element to the container and this is going to be a div.
So this is where we can drop all of the new input field.
So we're just creating.
So just update the parent and for the input the type is going to be input and just leave that blank.
So input one set attribute and attribute that we're setting type, and that's going to be text input,
so that will add all of the stuff to the top for the button to.
So button two is going to add item and for input one, let's add a placeholder, so call it for placeholder
and the values that we have here, we've got so that we've got a title and a body.
So let's go ahead and add the title as the placeholder and then we'll create another input and that
can be the body.
So this can be input to input too.
And this is just the body content and you can use a text area as well.
I'm going to just keep it at that.
And we want to add the add item after.
So load all of the posts and we're going to create the button first as we're preparing.
So load all of the posts and then if we want to add an item, we've got that option for the input field
there as well.
So once you have it looking the way that you want and I'm going to apply styling afterwards, let's
add an action to button two and that's going to take the contents of the two input fields and I'll post
to the endpoint.
So make a post request to the endpoint.
So button to add event listener and whenever it gets clicked.
Odd item, that's be the function that will run and also move things around here so that we've got all
of the event listeners in one spot here.
And all the elements that we're using for the page are, above all the that listeners are here, all
the variables that we have.
And I'm also going to add the variable rate at the top there for the BCU URL.
And now we can create the function to add item and item contents are going to be contained within these
input fields.
So let's select the title and for the title we're getting the content from the input field.
So input one value.
And if there is no value, so just to condition there, so if there is no value for, then put one,
then we'll just do title and for the body.
And if there is no value for input to just double checking to make sure that input to is the body
and just put body contents, so that will ensure that at least we have some content that we're posting.
So the Futch request, the URL is going to be going to posts.
So it's going to be the end point.
And I'll just copy this to keep things simple.
We also want to set up our options for the posts so you can do it as a separate variable or you can
do it within the fetch request.
So in this case, we'll do it differently than what we did last year.
We'll have the options there as an object.
So that's setting the method and you'll find it that it's done in different ways.
So this is just providing the options.
So the fetch parameters have an option for the euro and then options to set of this.
Or you can set the method, the body, the headers and so on.
And in this case, what we want it to do is make a selection and update the body contents.
So this is all coming from JSON object.
So getting body and we need to do a JSON string Afie and then create the object that we want to string
of.
And you can do this as separate variables as well.
So whatever your preference is.
So it's going to require a title and we do have a variable for that.
It's going to also require a body and we do have a variable set for that and it's also going to require
a user ID.
So we're just going to use that one as a default value.
And we also need to add headers to this as expecting the content type to be application JSON, so we're
going to specify the content type and this is the headers that it does need within the object.
And this object is.
The body contents, so the header is another property within the main object of options.
So set the content type and that's the property name and then the value is application.
And Jason and then the semicolon and character set is equal to UTF Dash eight.
And it's going to have a Jason return of the value, and for now we can consolidate the data.
So let's try the add item.
So this is what we get back the content that we've added.
So it's got it.
One hundred and one download all of the posts and it's actually not storing to the database.
But if you had a life database, you'd have ID 101 would be storing to the post.
Let's try that again.
And I'll clear that so at item and this is the content that we're getting back, so this is also what
we can do to add items.
And add to Page using that same response object, so that will allow us to do the full request and add
it to the page.
So instead of logging it to the console, let's do an add to page.
So it adds up to the page, adds another one to the page, and notice the idea is still the same.
So again, it is a simulated endpoint.
Let's also do an update to the elements.
So we do have the ID value that's being output to the element object.
So making them clickable and whenever we add them to the page, so we're we've got the add element.
Let's make that clickable.
So item at an event listener and the listener is going to be click.
So whenever it gets clicked and we already have the info it, so let's load all the posts, clear the
console and when we click it, I want to make this editable.
So I want to update the item.
And I'm also going to add another button here at the bottom that's going to allow us to make a save
of the data and the contents.
So let's add that button whenever we click it, then it's going to make it editable and we're going
to spend another item to the main content, and that's just going to be clickable button.
And I'll just call it Saver.
So this is going to be our savior button, so adding to mean this is going to be a button object and
the contents of the button save to server and it's going to simulate the saving of the server.
So we're adding the button and it's actually being appended to the top there.
So we can update that prepend append as well if we wanted to.
So in this case, we'll just keep it here up at the top.
So I also want to make this editable and once it's added this click event, I don't want it to be clickable
anymore.
So the main element, I don't want to have it clickable in in order to set it to only once within the
hour of that listener, we have an option to add in a property for once.
And if you set that to true, that's going to only allow the one click on the post.
So select the post, click it and notice that we can't click it anymore.
So if we only want the one click and we want to make this now editable so that make the content editable.
So selecting the main object.
And so to attribute to content added to table.
And set that to trial, so let's see what happens, so we click it and now the content is editable so
we can make updates to the content
and we might not want to make all of it editable.
So let's actually limit what we make editable, where we're going to get the main, but we only want
the paragraph and the title to be editable.
So with the mean, we need to make a selection of those elements.
And let's actually add in a class to them so we can select the elements by class.
And I'll give it a class of edit me, so whichever ones we want to make editable, we'll give a class
to edit me and let's make a selection of the elements.
And within the main object, using query selector all select all of the elements of the class of edit
me and then we'll loop through that element.
Actually, this should be plural.
So loop through for each and return back each element and then for that element, we're going to add
the attribute to make it editable.
So that will limit the ability for the user to edit the entire object.
So this is editable.
And actually, let me update that.
And this is actually looking for a class, that's why it wasn't working.
So now we can select this, we can select that, and then we've got an option to save to the server.
So we can't update it.
We can't make any other changes.
So once we do a save to the server, once we click that button
and for the save to the server.
We need to add an option for that button, so Seiver at an event listener, and that is also going to
be a click and save to server.
So we need to posehn some information and that's going to be the details that we've got within their
element fields.
So when we do to save to the server.
We've got the content of each one of the elements that are updated within the El's object, so as well,
we'll just going to do.
The function here and then so it's a lot more clear how we're passing the data.
So first we're going to just construct the temporary data.
It's a temporary object and this is going to take whatever the values are.
So we've got our title and it's going to take from El's the first element and body is going to take
from El's one.
And we can also have the ID within this.
So the ID of this object is going to be whatever the info ID is.
And then also we can do a user ID.
So if we keep it within the same format as we're submitting when we're creating it, then we can easily
pass that object information over to the server with a put request so that user ID is going to be one.
And for now we'll just console log out that temp object and save it.
So select a post.
I go to the edit mode and then when we're ready, let's clear the console and save the server.
So we need to also specify the value and the value of those elements.
And also, once we go into the edit mode, let's take mean style and we'll do.
Or we'll just start a class class list, too, and add a class of active so that we can see something
is different there when we've actually made the selection to use it.
And this can just be a background color.
And I'll make it red for now.
So there's our posts, once we select it, we can edit it and then once we're ready to save the content,
we save it to the server.
So it looks like there was an issue there with passing.
So let's get more details about that and actually there should be tax content as this these weren't
inputs, so that was why.
We weren't able to pass any of the details, so clear, safe to server, so it's passing in the object
information and this is exactly what the server needs to pass over.
So we're ready actually to do put request to the server with the updated value.
So let's apply a little bit more styling and within that octave and maybe read this a little bit too
strong of a color.
And within the active, so we do have the subtext within the paragraph and as well we have active and
under each one, let me double check.
So we're creating that each one.
And we can also do the class of edit me.
So make a selection and let's do a background color of these to be white and also a border.
And do kind of off block border for it, so let's see what happens.
So that's gives us more of.
What we've got for the elements that were editing.
And we can also see a color of white smoke, so if we select all the posts, we can select whichever
one we want to edit, and I'm actually going to update this to active paragraph.
And the reason it's not working as other extra coal in their.
So we don't actually need tax color of light, so all posts and when we select it and these are contained
with an output, so it's going to be active and then with an active we have the class of edit me.
So it's not immediately underneath.
And then save to the server.
So coming up next, we'll complete the put request to the server for the Jason Placeholder test.
Her application asks for this lesson are to create and load all of the posts from the JSON placeholder
endpoint.
So I put all of the posts to the page, also make the posts as interactive elements so the user can
select the posts that they're making.
The selection from what the details, the title, the body and the user ID and information create a
new post, also have the input fields.
So allowing the user to add items and sending the newly created item with the post method to the server
and then handle the response, adding it to the page as well.
Add attributes and styling to the page elements to create the interaction and then make content editable
in order to prepare to send the newly edited content back to the server, updating the post with whatever
ID the user has selected.